这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
脚手架git地址 持续更新中....
概览
ESLint作为代码检测工具，是脚手架中必不可少的一部分。如果此前没有自己配置过，还是有一定的上手难度。
首先你要明白ESLint作用于两个地方：一个是你的打包工具(webpack)，一个是你编写代码的IDE（vscode）。两个地方你都需要配置。
然后项目不同，你的配置也要跟着变，所需的包也不一样。一个纯的js项目和使用了vue2的项目、vue3+js与vue3+ts的项目，这些配置都不一样。
在明白ESLint的基本概念前提下，多参考不同项目的cli工具的配置，各种技术栈的项目自己都去配置一下，一定会对配置ESLint有一定感觉的。
在vscode开启代码ESLint
对于不通的IDE工具都有自己的ESLint插件，这里我们主要讲在vscode中开启ESLint检测。这样我们在写代码的过程中，如果出现不符合规则的代码，上面就会有红色或者黄色的波浪线。
另外需要明白一点，vscode的ESLint所遵循的规则就是项目.eslintrc.js文件中配置的规则。
vscode安装ESLint插件
有些时候修改规则之后，vscode没有生效，可重启一下此插件
代码编写过程出现黄色的波浪号
ESLint配置文件解释
.eslintrc.js文件，这就是ESLint的配置文件。此文件导出一个配置对象，接下来看一看这些重要的字段。要深入了解这些配置的含义，请查看 官网 。
root
示例：
module.exports = {
root: true
}
指定根目录，配置文件有此属性，将不会向上检测。没有此目录则会一直向上检测，直到电脑文件系统的根目录。
一般如果一个项目不同目录使用不懂的配置，需要用此来指明检测的根目录。我们的脚手架用一套配置,只需在项目根目录下创建.eslintrc.js文件，指明root就好。
env
指明es版本，指定运行环境
module.exports = {
"browser": true,
"es2021": true
// "node": true
}
- 如果运行在浏览器browser设置为true
- 如果运行在node环境，nide选项设置为true
- 指明es版本。可以是es5, es6, es7。也可以跟上年份es2015,es2020
globals
指明全局变量。当你在使用一些第三方框架的时候，第三方框架会向项目中注入一些全局变量。比如我们公司自研的框架会向项目中注入一个UA的全局变量。这个时候你必须告诉ESLint，项目中有一个全局变量教UA
module.exports = {
globals: {
UA: true
}
}
如果你不指明，就会报错：
parser & parserOptions
parser是解析器，对于这种语法检测工具，他肯定会与编译有关系。他肯定会进行语法分析，生成AST语法树，而做个事情的就是parser。parser通常是一个node模块，不同语法跟我们提供不同的解析器。打个比方：如果你的项目是一个ts项目，你就系要ts的解析器，也就是@typescript-eslint/parser
parserOptions是解析器选项，不想多说这个了，直接上图
extends
ESLint的校验规则有很多很多，不可能需要开发人员去一个个的配置吧。不同语法有不同的规则，像vue2与vue3的规则不同吧，ts与js的规则也不同吧。有没有一群一群的规则集，这个规则集适用于vue2，另一个规则集适用于vue3，开发人员根据自己所有的框架自行选择。答案是肯定有的，而且就在extends进行配置。
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
]
上面的例子定义了ts的规则集
所以在日常配置中我们只要会选就好
plugins
ESLint允许第三方插件。可以把ESLint理解为对ESlint的一个扩展。当我们在extends中无法找到响应的规则，就在plugins中来找。
"plugins": [
"@typescript-eslint"
],
ts官方提交的eslint插件
rules
启用的规则及其各自的错误级别。可以根据环境配置。比如开发环境允许console输出，生产打包的时候不允许console。都在这里面配置
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off'
}
上诉配置就根据当前环境，设置不同的错误级别。
例子
梳理了一下ESLint的各个配置，我们来看一个ts项目怎么配置ESLint。
场景：某一天你学习了ts，想着用ts来封装ajax，做一个简易版本的axios库。例子git仓库。这个时候的ESLint配置如下：
module.exports = {
"root": true,
"env": {
// "browser": true,
// "es2021": true
// 运行在node环境下
"node": true
},
"extends": [
"eslint:recommended",
// 使用ts官方提供的规则集
"plugin:@typescript-eslint/recommended"
],
// ts官方ESLint解析器
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
// "sourceType": "module"
},
"plugins": [
// ts官方插件
"@typescript-eslint"
],
"rules": {
'@typescript-eslint/no-inferrable-types': 'off'
}
};
所需依赖如下：
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"eslint": "^8.1.0",
从上可以看到，ts团队会提供官方（@typescrip表示ts官方）的插件、解析器、规则集供开发者使用。那vue3会不会也有了？
vue3+ts项目中配置ESLint
webpack中配置eslint-webpack-plugin
webpack配置这个插件之后，如果代码有规范问题，一是会在控制台打印相关错误，二是页面会报错。这样会强制开发人员去规范代码
const ESLintPlugin = require('eslint-webpack-plugin')
plugins: [
new ESLintPlugin({
extensions: ['js', 'ts', 'vue'],
exclude: ['node_modules']
}),
]
配置文件编写
对于vue3，其团队也出了一份配置表。可以通过官方cli（vue-cli）工具创建项目，参考进行配置。
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard',
'@vue/typescript/recommended'
],
rules: {}
}
配置十分简单，但是所需的依赖比较复杂.你要安装vue官方的eslint插件，因为项目使用ts也要安装ts官网的eslint插件，还有eslint本身的一些东西...
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1",
"@vue/eslint-config-standard": "^6.1.0",
"@vue/eslint-config-typescript": "^9.0.1",
"@vue/cli-plugin-eslint": "^4.5.15",
"@vue/cli-plugin-typescript": "^4.5.15",
"eslint": "^8.2.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.1",
"eslint-plugin-vue": "^8.0.3",
其实也不用担心，依赖这么多，记不住。只要在webpack中配置了ESLintPlugin，差什么包，就会提示你安装。
总结
到目前为止一个基本的脚手架已经完成，不过还有很多优化工作可以做。比如：dll，happypack等。只能说未完待续.....
