Vue|VSCode|ESLint+autofix最简配置Linter是语法检查/代码质量检查工具，不同语言都有自己的版

定个小目标⛳️：实现用VS Code编辑默认vue cli创建的vue2项目，对.vue, .js等文件有错误检查与代码风格检查(lint)、保存时自动修复(autofix)、按照Prettier风格进行格式化。

上网搜索vscode的vue项目lint和格式化，大多文章介绍的是其团队自己一揽子规范，很多规则不通用，还有很多过时、无效的配置也一并贴出来（当前为2021年），看得我头都大了🤯

我只想要一个vue、eslint、prettier三者结合的官方默认配置，怎么这么麻烦？？于是我决定痛下决心，分别查询各个官网以寻求最简配置⚙️

✅Tips: 只关心配置的朋友，直接拉到最后。

问题的解决思路

经过一轮探索与思考，要想实现上述目标，我们其实要解决三个问题：

代码检查(Lint)，包括错误检查与风格检查
在Lint之后做代码自动修复(autofix)
使用代码格式化工具(formatter)去做autofix

具体到VS Code这款编辑器的配置，我们需要搞定以下概念以及解决方案：

概念
- Linter与Formatter的区别？
VS Code相关
- VS Code如何识别Vue SFC(.vue单文件) 文件？
- VS Code如何识别项目的eslint配置，并在编辑器中提示错误？
- VS Code如何在保存时自动修复eslint错误？
- VS Code如何通过Prettier这款格式化工具，来自动修复eslint错误？
- 如何解决ESLint、Prettier之间的规则冲突？
项目配置相关
- vue cli创建的默认eslint配置到底包含了哪些规则？
- 如何设置Eslint的代码错误规则？
- 如何设置Eslint的代码风格Prettier的规则？

Linter与Formatter的区别？

我们首先讲下什么是Linter： Linter是语法检查/代码质量检查工具，不同语言都有自己的版本，比如JavaScript的Linter有 ESLint，JSLint，Python有pylint...而JS中目前最常用的就是ESLint，通过配置规则+ESLint的命令行工具(CLI)，可以实现代码检错、风格检错、自动修复错误等能力。

然后是Formatter： Formatter是指代码格式化工具，这类工具会帮你把代码按照规则进行统一的格式化，保证项目代码的美观、统一。前端有代表性的Formatter有Prettier、Beautify等，他们都可以规范HTML、CSS、JS等前端语言。

那么Linter与Formatter有什么区别呢？参考 Prettier 官网的解释：Prettier vs. Linters · Prettier，我们可以得知 Linter 主要有两类配置：

代码格式化相关(Formatting rules) :
- eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
代码质量相关(Code-quality rules):
- eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors… 而Formatter如Prettier，只关心代码格式化的规则，完全不关心代码质量的规则。

所以我们应该发挥各自所长，在项目中：

使用 Linter 来做代码质量检查
在 Linter 中配置 Formatter 的规则，使用 Linter 来做代码风格检查
使用 Formatter 来做代码的格式化

💪 实战：从零开始配置

环境说明：

Mac OS 10.15.7

vs code 1.50.1

@vue/cli 4.5.12

有eslint配置的vue2项目

初始化vue2项目

场景是这样的，通过 @vue/cli 创建一个默认的vue2项目，包括eslint、babel都是最基础的。在这里插入图片描述创建之后，用没装什么插件的vs code打开项目：

安装必要vs code插件

看到.vue后缀的文件默认是没有语法高亮的，我们需要安装 vetur 插件来支持安装完之后，vscode即支持vue SFC文件的语法高亮：在这里插入图片描述什么？？居然没有错误提示，明明vue/cli默认帮我们创建了eslint配置的！

代码质量错误检测

其实这里要安装vs code的插件 ESLint，他能读取项目中的eslint配置，并告诉vs code，vs code才可以在编辑器中找到错误并提示出来！在这里插入图片描述安装完之后，回到App.vue，可以看到错误的代码有红色波浪线提示，鼠标悬浮还有具体错误原因，eslint(no-undef)，这里说明vscode已经可读取项目的eslint配置，并按照no-undef(不允许存在未定义的变量)这条规则定位错误！注意，这是属于代码质量类错误。在这里插入图片描述对于vue的template，代码质量类错误也是可以检测出来：可以看到这里错误规则来源于eslint-plugin-vue，这是因为vue cli创建的eslint规则中，包含了两条继承的规则：

eslint:recommended: 负责检查 JS 错误(eslint)，来自 eslint 包
plugin:vue/essential：负责检查 vue 的错误(eslint-plugin-vue)，来自 eslint-plugin-vue 包

代码风格类错误检测

接下来我们测试下 代码风格类错误 ，在template和script中都打上多余的空格：在这里插入图片描述好家伙，这么丑的代码都不报错，还有没有王法了？！为什么呢，我们不是有配置eslint规则吗？怀疑到了我们的两条规则：eslint:recommended，plugin:vue/essential，查阅资料发现：

List of available rules - ESLint - Pluggable JavaScript linter 告诉我们：eslint:recommended 只包含了必要的代码质量规则，对于风格规则，完全不在意。

User Guide | eslint-plugin-vue告诉我们：plugin:vue/essential只包含了vue在ESLint的解析、以及vue错误的检查，对于风格规则也是完全不care。如果我们想加上vue的代码风格规范，应该使用 "plugin:vue/recommended" 规则集。我们只需改一下eslint配置：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
+     "plugin:vue/recommended"
-     "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

再回到编辑器，可以发现template的代码风格校验告警了，而script中仍然没有提示。在这里插入图片描述其实也很容易想到，当前eslint的规则集里缺少 JS 的风格校验规则，是 Prettier 登场的时候了！我们希望 eslint 里能写入 prettier 的规则，这里需要在项目里安装 eslint-plugin-prettier-vue NPM依赖，根据其NPM文档指引，我们在项目里安装：

npm install --save-dev \
  eslint-plugin-prettier-vue \
  eslint-plugin-vue \
  eslint-config-prettier \
  eslint \
  prettier

prettier: 是prettier的核心包
eslint: 是eslint的核心包
eslint-plugin-vue：是vue的eslint插件，包含多个规则集
eslint-plugin-prettier-vue：是prettier fo vue的eslint插件，包含prettier风格检测规则集
eslint-config-prettier：禁用 linter 与 prettier之间会产生冲突的部分规则，保证Prettier与ESLint不冲突

安装完后我们再为ESLint添加风格校验规则集：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
	    "plugin:vue/recommended",
+     "plugin:prettier-vue/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

再回到编辑器，已经可以检测 template, script, style 所有的风格错误了！在这里插入图片描述

开启 ESLint Autofix

检测出错误，我们该修复错误了，我们可以手动修复（太笨），也可以命令行执行 eslint --fix（太麻烦），有没有更舒服地方式，有，在保存文件时自动修复风格错误！

要开启此特性，我们在vscode中，打开 偏好设置preference，点击切换到JSON配置文件模式：在这里插入图片描述在配置中添加：

// 开启代码保存时，eslint执行fix动作
"editor.codeActionsOnSave": { 
  "source.fixAll.eslint": true
},

保存后回到编辑器，按ctrl+s保存，可以发现代码根据prettier的规则，一口气格式化好了！在这里插入图片描述至此，ESLint将怀揣vue与js的质量规则+prettier for vue的风格规则，帮我们检测代码异常，并自动修复风格问题🤩

正式宣布，我们完成了在vscode下，编辑有 eslint 配置的vue2项目，拥有代码质量检测+代码风格检测以及自动根据prettier规则修复的目标了！

其他说明

autofix的范围

能自动修复的只有代码风格类错误（缩进，换行），代码质量类是没法自动修复的（你当他AI吗？自动帮你修bug）

在这里插入图片描述如上图，输入aaa检测出一条质量问题(no-undef)，一条风格问题(缺少;号)，点击保存，只会帮你把分号加上😥

关于prettier风格覆盖

在 eslint 配置中的 rules 字段配即可(更多字段查询eslint.org/docs/rules/… prettier 的双引号规则为单引号:

rules: {
    'prettier-vue/prettier': [
      'error',  // 不符合规则的设为错误，好让eslint修复
      {
        // Override all options of `prettier` here
        // @see https://prettier.io/docs/en/options.html
        singleQuote: true,
      },
    ],
  },

疑问总结

VS Code相关
- VS Code如何识别Vue SFC(.vue单文件) 文件？
  - 通过 vetur 插件
- VS Code如何识别项目的eslint配置，并在编辑器中提示错误？
  - 通过 Eslint 插件
- VS Code如何在保存时自动修复eslint错误？
  - 偏好配置中开启：editor.codeActionsOnSave -> "source.fixAll.eslint": true
- VS Code如何通过Prettier这款格式化工具，来自动修复eslint错误？
  - 项目安装 prettier, eslint, eslint-plugin-prettier-vue, eslint-config-prettier
  - eslint配置中继承 plugin:prettier-vue/recommended 规则
- 如何解决ESLint、Prettier之间的规则冲突？
  - 安装 eslint-config-prettier 依赖，禁用冲突的规则，需要搭配其他包使用，如 eslint-plugin-prettier-vue
项目配置相关
- vue cli创建的默认eslint配置到底包含了哪些规则？
  - eslint:recommended: 负责检查 JS 错误(eslint)，不含风格检测，来自 eslint 包
  - plugin:vue/essential：负责检查 vue 的必要错误(eslint-plugin-vue)，不含风格检测，来自 eslint-plugin-vue 包
- 如何设置Eslint的代码错误规则？
  - 继承已有的规则集，或通过rules手动配置
- 如何设置Eslint的代码风格Prettier的规则？
  - 通过plugin:prettier-vue/recommended继承Prettier的规则集

配置总结

VS Code插件：

Vetur: 让vscode识别vue SFC文件，语法高亮、代码检测等
ESLint 让vscode读取项目eslint配置，并在编辑器中提示语法错误、应用autofix等

NPM开发依赖：

prettier: 是prettier的核心包
eslint: 是eslint的核心包
eslint-plugin-vue：是vue的eslint插件，包含多个规则集
eslint-plugin-prettier-vue：是prettier fo vue的eslint插件，包含prettier风格检测规则集
eslint-config-prettier：禁用 linter 与 prettier之间会产生冲突的部分规则，保证Prettier与ESLint不冲突

ESLint配置：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "plugin:prettier-vue/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "prettier-vue/prettier": [
        "error",
        {
          "singleQuote": true
        }
      ]
    }
  }

VS Code配置

// 开启代码保存时，eslint执行fix动作
"editor.codeActionsOnSave": { 
  "source.fixAll.eslint": true
}

以上就是Vue项目在vscode中lint/autofix/format的最简配置🤓装备好武器，开始撸代码吧👨🏻‍💻

参考网站：

Prettier vs. Linters · Prettier: prettier.io/docs/en/com…

ESLint rules: eslint.org/docs/rules/

eslint-plugin-vue: eslint.vuejs.org/user-guide/…

eslint-plugin-prettier-vue: www.npmjs.com/package/esl…