1. 前提说明

eslint是什么: ESLint是在JavaScript代码中 识别 和 报告 模式匹配的工具。

为什么需要eslint：保证代码的一致性，避免错误。

2. 叙述大纲

• 所需依赖
• 定义模式规则（.eslintrc配置文件）
• 报告不符合模式的语法（vscode和eslint的结合）
• 纠正不符合模式的语法

3. 所需依赖

    "eslint": "^6.7.2",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-vue": "^6.2.2",
复制代码

• 首先需要安装eslint模式识别工具，然后在项目根目录下创建eslint的配置文件.eslintrc.json。eslint会自动去读取.eslintrc的配置文件。
• babel-eslint 解析器（为什么使用babel-eslint ? 你这个异教徒去死吧。）
• eslint-plugin-vue eslint默认只能识别js文件，要识别vue文件，这个插件是必不可少的。

4. 配置文件

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended" // 启用推荐的规则，推荐的规则都带有一个标记。
  ],
  "parserOptions": {
    "parser": "babel-eslint" // 以babel-eslint作为解析器
  },
  "rules": {
    "no-debugger": ["error"], // [(0 : off) ; (1 : warn) ; (2 : error)]
    "semi": ["warn"]
  }
}
复制代码

需要关注的是extends选项。这里我们启用了推荐的规则。推荐的规则前面会有一个勾勾。通过 plugin:vue/essential 也启用了vue的规则。至此，当代码存在debugger，编译阶段就会报错。因为rules中定义了debugger的级别是error。

5.报告不符合规则的语法

要想将不符合规则的语法标红，需要安装eslint插件。

安装完成后，发现debugger报红了

6.修复不符合规则的语法

首先定义规则 "semi": ["error"] 每一行结尾必需要有分号。在没有分号的情况下...

现在我们希望vscode能够帮我们自动补全分号。我们需要修改配置文件 settings -> extensions -> eslint -> setting.json

  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
复制代码

现在当我们自动保存的时候，缺失的分号就会自动补全。

7. 注意事项

在推荐的规则中只有携带🔧图标的rule才能够自动修复。例如，即便启动了no-debugger，代码中出现的debuger也不会自动删除。