Vue 编译报错 Missing semicolon：原因及解决方法

2024-12-19 07:44:12

好的，以下是一篇关于解决 Vue 中 “missing semicolon” 错误的技术博客文章，符合您的所有要求：

Vue 编译时出现 "Missing semicolon" 错误：排查与解决

在 Vue 开发过程里，可能会遇到一个烦人的编译错误：[vue/compiler-sfc] Missing semicolon。这个错误信息直指代码缺少分号。但问题根源是什么？如何解决？

问题剖析

这类 “missing semicolon” 错误通常由配置了 Eslint 或者类似的语法规范性工具的代码项目引起，而不是语法层面的。问题集中在 .vue 文件的 <script> 块。以开头那段有问题的代码举例说明，看起来似乎没有问题，但 ESLint 检测会报告错误，特别是在声明的 linkText: '', 语句处提示缺少分号。

该问题的症结在于数据对象 (data) 的属性声明方式不符合当前代码的ESLint语法规范，可能跟所安装的代码格式化规范冲突了。

解决的办法可以分为几类：一种是安装对应的Vue格式规范，保持整体代码风格一致；一种是在代码文件中使用行尾分号进行补全；如果团队风格不允许在对象声明语句行尾添加分号，可以使用禁用行或者注释的方式修改当前文件或者项目配置。具体地，可以分为一下几种办法进行处理和规范化：

解决方案详解

1. 代码补全法

如果坚持使用 ESLint 配置和项目当前配置，需要根据所安装的风格进行补全，最直接有效的一种就是手动给声明对象或者数组末尾补全分号。具体就是补充行尾的分号。把

export default {
    props: ['pageCreated'],
    data(){
        return {
          pageTitle: '',
          linkText: '',
          linkUrl: '',
          content: ''
        }
    }
}

补充修改为如下：

export default {
    props: ['pageCreated'],
    data(){
        return {
          pageTitle: '',
          linkText: '',
          linkUrl: '',
          content: '',
        }
    }
}

return 里是 data 对象数据声明。修改后，所有属性声明后都加上分号。这样可以修复缺少分号的问题，确保当前文件代码符合语法检测，通过Vue编译，但是可能还是会被VSCode或者同类工具继续格式化删除。

2. 单行禁用 ESLint 规则

某些情景里，必须坚持特定代码风格（不添加行尾分号）来兼容已有的格式化风格和项目规则。eslint-disable-next-line 注释可以发挥作用。操作不复杂：只需要在出错那行的代码上一行增加这条规则即可。操作前后的变化展示如下：

代码调整前：

export default {
    props: ['pageCreated'],
    data(){
        return {
          pageTitle: '',
          linkText: '', // eslint 提示此行有问题
          linkUrl: '',
          content: ''
        }
    }
}

调整代码如下：

export default {
    props: ['pageCreated'],
    data(){
        return {
          pageTitle: '',
          // eslint-disable-next-line
          linkText: '', // eslint 不会再检查此行代码的错误了
          linkUrl: '',
          content: ''
        }
    }
}

简单增加一行 eslint 禁用规则，可解决指定行的代码报错。这样一来，该行代码就会避开 ESLint 的半检查规则。必须强调 ，只建议在测试或极特殊的情况这样临时处理。大面积使用不利于项目规范统一。

3. 修改 `.eslintrc.js` 配置文件

这是根本解决问题的一个方法。对症下药才能治本。.eslintrc.js 是 ESLint 的全局配置文件。通常位于项目的根目录。若没有，需手动创建并进行相关配置。文件内的 semi 规则管理分号相关策略。

这里先贴出可能需要的项目配置文件

package.json 配置：

{
  "name": "vue-project",
  "devDependencies": {
    "eslint": "^8.0.0",
    "eslint-plugin-vue": "^9.0.0"
  }
}

.eslintrc.js 文件配置:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'semi': ['error', 'never'] // 修改这一规则
  }
}

如果 ESLint 的配置是： 'semi': ['error', 'always'] ，这样设置规则要求声明结束都应该加上分号。
将值调整成 'never'，ESLint 规则变为 'semi': ['error', 'never']，表示禁用分号。修改后再次运行项目就避免错误出现，符合不使用分号声明的情况。

安全建议： 修改配置需要全盘考虑，建议团队内部协商后，选择团队能共同遵循的规范方案进行修改和项目代码调整。

4. 使用 `.editorconfig` 统一代码风格

项目添加并配置好 .editorconfig，能跨编辑器和 IDE 保持一致代码风格，非常建议使用。不同开发人员和团队使用不同工具。有了它，无需反复沟通调整配置，极大提升效率。项目根目录下创建 .editorconfig 文件。以下示例供参考：

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
indent_style = space
indent_size = 2

[*.vue]
indent_style = space
indent_size = 2