在Vue项目中使用ESLint来检查代码

ESLint是基于NodeJS的一个检查语法规则和代码风格的前端插件工具，通过该工具可以让我们在团队合作中制定一个更加统一规范的编码风格。

安装

选择一个包管理器来安装，这里我使用npm来安装eslint插件：

npm install --save-dev eslint

安装好之后，就可以通过eslint来初始化一个配置文件了，如下执行npx eslint --init一步步勾选：

当然上面的选项不是必须一样，可以按照自己的风格来选择，执行完命令之后，可以看到目录下生成了一个.eslintrc.json配置文件，内容如下：

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/essential"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "vue"
  ],
  "rules": {
  }
}

配置项

现在eslint安装好了，接下来的主要工作就是在.eslintrc.json写配置了，例如语法风格和规则就需要在文件里面的rules里面配置，如下：

{
  "rules": {
    "semi": ["warn", "never"]
  }
}

上面我配置了一个"semi": ["warn", "never"]，就表示代码末尾不用加分号（;），否则就会报出警告（warn）；如下图：

如果编辑器没有报错的话，查看一下vscode的eslint扩展是否安装了，如果安装也没有报错信息的话，可以进入扩展设置项查看validate项，并设置：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true }, // 没有就补上
    "vue"  // 没有就补上
]

设置好了的话，正常情况就可以看到提示信息了。

解决错误的方式有两种，第一种手动删掉分号（-_-||）；
第二种就是通过插件来修复，首先需要安装vuefix插件：

npm install --save-dev eslint-plugin-vuefix

安装完成之后，在.eslintrc.json注册插件：

{
  "plugins": [
    "vue",
    "vuefix"
  ]
}

注册好插件之后，就可以通过执行一下命令来修复问题：

npx eslint --fix --debug --ext .js --ext .vue src/

执行命令后，有问题的文件都会被自动修复，上面表示的意思分别是：

• --fix: 执行修复命令
• --debug： 打印日志信息，可以不加
• --ext：后缀名，上面表示需要修复的文件后缀名为js或者vue
• src/：需要修复的文件或目录，这里表示src目录

因为命令比较长，所以可以通过在npm里面添加scripts来方便使用：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "npx eslint --fix --ext .js --ext .vue src/"
}

这样，只需要执行npm run lint就可以自动修复问题了。

以上，就是怎么样在Vue中使用eslint了，当然新建项目的话脚手架直接选择更方便。