ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验

最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。
于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。
阅读完这篇文章，你可以收获：

能够自己亲手写出一套 ESLint 配置；
会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码；
vue-cli 在初始化一个包含代码校验的项目时都做了什么；
Prettier 是什么？为什么要使用它？如何与 ESLint 配合使用？
EditorConfig 又是什么？如何使用？
如何在 VSCode 中通过插件来协助代码校验工作；
如何保证 push 到远程仓库的代码是符合规范的；

下面开始阅读吧，如果你对 ESLint 比较熟悉，可以直接跳过这个部分。
ESLint 是什么
ESLint 是一个集代码审查和修复的工具，它的核心功能是通过配置一个个规则来限制代码的合法性和风格。
配置解析器和解析参数
ESLint 的解析器，早期的时候用的是 Esprima，后面基于 Esprima v1.2.2 版本开发了一个新的解析器 Espree，并且把它当做默认解析器。
除了使用 ESLint 自带的解析器外，还可以指定其他解析器：

@babel/eslint-parser：使 Babel 和 ESLint 兼容，对一些 Babel 语法提供支持；
@typescript-eslint/parser：TSLint 被弃用后，TypeScript 提供了此解析器用于将其与 ESTree 兼容，使 ESLint 对 TypeScript 进行支持；

为项目指定某个选择器的原则是什么？

如果你的项目用到了比较新的 ES 语法，比如 ES2021 的 Promise.any()，那就可以指定 @babel/eslint-parser 为解析器；
如果项目是基于 TS 开发的，那就使用 @typescript-eslint/parser；

如果你对 ES 最新标准还不熟悉，可以看看这篇文章：送你一份精心总结的3万字ES6实用指南（下）

除了指定解析器 parser 外，还可以额外配置解析器参数 parserOption：
{
// ESLint 默认解析器，也可以指定成别的
parser: “espree”,
parserOption: {
// 指定要使用的 ECMAScript 版本，默认值 5
ecmaVersion: 5,
// 设置为 script (默认) 或 module（如果你的代码是 ECMAScript 模块)
sourceType: “script”,
// 这是个对象，表示你想使用的额外的语言特性,所有选项默认都是 false
ecmafeatures: {
// 是否允许在全局作用域下使用 return 语句
globalReturn: false,
// 是否启用全局 strict 模式（严格模式）
impliedStrict: false,
// 是否启用JSX
jsx: false,
// 是否启用对实验性的objectRest/spreadProperties的支持
experimentalObjectRestSpread: false
}
}
}
复制代码
指定环境 env
指定不同的环境可以给对应环境下提供预设的全局变量。比如说在 browser 环境下，可以使用 window 全局变量；在 node 环境下，可以使用 process 全局变量等；
ESLint 中可配置的环境比较多，这里有份完整的环境列表，下面列出几个比较常见的：

browser：浏览器全局变量；
node：Node.js 全局变量和作用域；
es6：es6 中除了模块之外的其他特性，同时将自动设置 parserOptions.ecmaVersion 参数为 6；以此类推 ES2017 是 7，而 ES2021 是 12；
es2017：parserOptions.ecmaVersion 为 8；
es2020：parserOptions.ecmaVersion 为 11；
es2021：parserOptions.ecmaVersion 为 12；

配置方式如下：
{
env: {
browser: true,
node: true,
es6: true,
commonjs: true,
mocha: true,
jquery: true,
}
}
复制代码
可以指定多个环境并不意味着配置的环境越多越好，实际配置的时候还是得依据当前项目的环境来选择。
配置全局变量 globals
ESLint 的一些核心规则依赖于对代码在运行时可用的全局变量的了解。 由于这些在不同环境之间可能会有很大差异，并且在运行时会进行修改，因此 ESLint 不会假设你的执行环境中存在哪些全局变量。
如果你想使用这些全局变量，那就可以通过 globals 来指定。比如在 react .eslintrc.js 里就把 spyOnDev、 spyOnProd 等变量挂在了 global 下作为全局变量：
{
globals: {
spyOnDev: true,
spyOnProd: true,
}
}
复制代码
对于它的值需要特别说明下：

false、readable、readonly 这 3 个是等价的，表示变量只可读不可写；
true、writeable、writable 这 3 个是等价的，表示变量可读可写；

配置扩展 extends
实际项目中配置规则的时候，不可能团队一条一条的去商议配置，太费精力了。通常的做法是使用业内大家普通使用的、遵循的编码规范；然后通过 extends 去引入这些规范。extends 配置的时候接受字符串或者数组：
{
extends: [
‘eslint:recommended’,
‘plugin:vue/essential’,
‘eslint-config-standard’, // 可以缩写成 ‘standard’
‘@vue/prettier’,
‘./node_modules/coding-standard/.eslintrc-es6’
]
}
复制代码
从上面的配置，可以知道 extends 支持的配置类型可以是以下几种

eslint 开头的：是 ESLint 官方的扩展；
plugin 开头的：是插件类型扩展，比如 plugin:vue/essential；
eslint-config 开头的：来自 npm 包，使用时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard；
@开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；
一个执行配置文件的相对路径或绝对路径；

那有哪些常用的、比较著名扩展可以被 extends 引入呢

eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；
eslint:all：ESLint 内置的所有规则；
eslint-config-standard：standard 的 JS 规范；
eslint-config-prettier：关闭和 ESLint 中以及其他扩展中有冲突的规则；
eslint-config-airbnb-base：airbab 的 JS 规范；
eslint-config-alloy：腾讯 AlloyTeam 前端团队出品，可以很好的针对你项目的技术栈进行配置选择，比如可以选 React、Vue（现已支持 Vue 3.0）、TypeScript 等；

使用插件 plugins
ESLint 提供插件是干嘛用的
ESLint 虽然可以定义很多的 rules，以及通过 extends 来引入更多的规则，但是说到底只是检查 JS 语法。如果需要检