eslint可以帮助我们约束代码规范，保证团队代码的一致性，前端项目不可或缺的代码检查工具，重要性不言而喻。那么你真的看懂配置了吗？会配置了吗？
全文会结合官方文档介绍，从0到1带你学习配置eslint，让你少走弯路，看懂配置。
安装
安装分为两种方式一种是全局安装，另一种是项目内安装。
// 全局安装
npm i eslint -g
// 项目安装
npm i eslint -D
启用 ESLint IDE 插件，比如 ESLint for VSCode，然后你就可以在开发时获得规范检查器的反馈。这同时也避免了启动开发服务器时不必要的规范检查。
初始化
生成.eslintrc.js文件
npx eslint --init
也可以使用 ./node_modules/.bin/eslint --init 创建文件。 文件支持类型 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件在package.json里创建一个 eslintConfig 属性，在那里，同样可以定义你的配置如果 .eslintrc 和 package.json 里面的 selintConfig 同时存在，则只读取 .eslintrc.js 文件。
如果 报错可以尝试运行
npm install npx
根据提示 选择你所需的配置
初始化成功之后会在你的项目根目录生成一个.eslintrc.js文件。
// .eslintrc.js
module.exports = {
/**
* 运行环境 * http://eslint.cn/docs/user-guide/configuring#specifying-environments
* 【】一个环境定义了一组预定义的全局变量
* 【】获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
* 【】常见的运行环境有以下这些，更多的可查看官网
* browser - 浏览器环境中的全局变量。
* node - Node.js 全局变量和 Node.js 作用域。
* es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
* amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
* commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
* jquery - jQuery 全局变量。
* mongo - MongoDB 全局变量。
* worker - Web Workers 全局变量。
* serviceworker - Service Worker 全局变量。
*/
"env": {
"browser": true,
"es2021": true,
"node": true
},
/**
* 规则继承 * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
*【】可继承的方式有以下几种
*【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
*【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
* 可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
*【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
*【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
*/
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
/**
* 针对特定文件的配置
* 【】可以通过overrides对特定文件进行特定的eslint检测
* 【】特定文件的路径书写使用Glob格式，一个类似正则的路径规则，可以匹配不同的文件
* 【】配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 extends、overrides 和 root 之外的其他任何有效配置选项，
*/
"overrides": [
// {
// "files": ["bin/*.js", "lib/*.js"],
// "excludedFiles': "*.test.js",
// "rules": {
// 'quotes': [2, 'single']
// }
// }
],
/**
* 解析器
* http://eslint.cn/docs/user-guide/configuring#specifying-parser
* 【】ESLint 默认使用Espree作为其解析器
* 【】解析器必须是本地安装的一个 npm 模块。即必须按照在本地的node_module中
* 【】解析器是用于解析js代码的，怎么去理解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义分析什么的，才能判断语句符不符合规范。而不是通过简单的字符串对比。
* 【】解析器有很多，但兼容eslint的解析器有以下几个
* Espree：默认解析器，一个从Esprima中分离出来的解析器，做了一些优化
* Esprima：js标准解析器
* Babel-ESLint： 一个对Babel解析器的包装，babel本身也是js解析器的一种（不然怎么能转化为兼容性代码呢？首先需要进行js解析，才能转化）。如果我们的代码需要经过babel转化，则对应使用这个解析器
* typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器
* 【】但是通常在vue项目中，并不会写在 parser 字段中，而是写在 parserOptions -> parser。具体原因在 parserOptions 一栏中介绍
*/
"parser": "@typescript-eslint/parser",
/**
* 解析器配置项
* http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
* 【】这里设置的配置项将会传递到解析器中，被解析器获取到，进行一定的处理。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
*/
"parserOptions": {
"ecmaVersion": "latest", // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进行定义
"sourceType": "module", // 指定JS代码来源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
"ecmaFeatures": { // Features是特征的意思，这里用于指定要使用其他那些语言对象
"experimentalObjectRestSpread": true, //启用对对象的扩展
"jsx": true, //启用jsx语法
"globalReturn":true, //允许return在全局使用
"impliedStrict":true //启用严格校验模式
}
},
/**
* 插件 * http://eslint.cn/docs/user-guide/configuring#configuring-plugins
* 【】插件同样需要在node_module中下载
* 【】注意插件名忽略了「eslint-plugin-」前缀，所以在package.json中，对应的项目名是「eslint-plugin-vue」
* 【】插件的作用类似于解析器，用以扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则。
* 【】如 eslint-plugin-vue，是为了帮助我们检测.vue文件中 <template> 和 <script> 中的js代码
*/
"plugins": [
"vue",
"@typescript-eslint"
],
/**
* 自定义规则
* http://eslint.cn/docs/user-guide/configuring#configuring-rules
* 【】基本使用方式
* "off" 或者0 关闭规则
* "warn" 或者1 将规则打开为警告（不影响退出代码）
* "error" 或者2 将规则打开为错误（触发时退出代码为1）
* 如：'no-restricted-syntax': 0, // 表示关闭该规则
* 【】如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
* 如 'semi': ['error', 'never'], never就是额外的配置项
*/
"rules": {
'eqeqeq': 'warn', // 要求使用 === 和 !==
'semi': 'off', // 要求或禁止使用分号代替 ASI
'indent': ['error', 4], // 强制使用一致的缩进
'quotes': ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
'arrow-spacing': 'error', // 强制箭头函数的箭头前后使用一致的空格
'no-unused-vars': [ // 禁止出现未使用过的变量
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'space-before-function-paren': 'off',
'vue/multi-word-component-names': 'off',
}
}
配置
先从简单的配置入手，了解rules是什么，看个例子：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
这两条规则分别表示的：句子末尾分号必须存在，使用双引号。
value值数组中，第一个值代表错误级别，有三个可选值：
- "off" or 0 - 关闭规则
- "warn" or 1 - 将规则视为一个警告
- "error" or 2 - 将规则视为一个错误
我们可以配置任意多个这样的规则，当然随着规则的增多，写起来就比较麻烦，所以eslint提供了一些预设，像这样：
{
"extends": "eslint:recommended"
}
更多rule配置请参考：cn.eslint.org/docs/rules/
扩展
-
.eslintignore 忽略文件
在项目的根目录创建一个.eslintignore 文件告诉eslint 去忽略特定的文件和目录。
步骤： 1. .eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该被忽略检查。 2. eslint总是忽略 /node_modules/\* 和 /bower_components/\*中的文件 -
VScode 保存自动格式化
在编辑器中打开 setting.json文件中添加一项规则
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
