什么是ESLint
eslint是一个可配置得js代码检查器,它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。 — 摘抄官网
ESLint的配置文件
eslint支持几种格式的配置文件
- 首先它支持
.eslintrc.*后缀可以是jsyaml json - 但当你的项目
package.json的"type": "module"时 ,请使用.eslintrc.cjs - 也可以package.json - 在
package.json文件中创建eslintConfig属性那里定义你的配置。
如果在同一目录下存在多个配置文件，ESLint 将按照以下优先顺序以此使用其一：
1 .eslintrc.js
2 .eslintrc.cjs
3 .eslintrc.yaml
4 .eslintrc.yml
5 .eslintrc.json
6 package.json
配置文件的使用规则
默认情况下，ESLint 会自动要检查文件的目录中寻找它们，并在其直系父目录中寻找，直到文件系统的根目录（/）、当前用户的主目录（~/）或指定 root: true 时停止,它存在级联和层次结构
还有一种情况是把文件保存在你想保存的地方，然后用 --config 选项把它的位置传给 CLI，例如：
eslint -c myconfig.json myfiletotest.js
配置文件属性讲解
{
// 指定环境 , 可用的环境见下方详解, 这些环境并不互斥，所以你可以一次定义多个环境。
"env": {
"browser": true,
"node": true,
"es6": true // 支持新的 ES6 全局变量和类型了
},
// ESLint 的一些核心规则依赖于对你的代码在运行时可用的全局变量的了解。
// 由于这些变量在不同的环境中会有很大的不同，而且在运行时也会被修改，
// 因此 ESLint 不会对你的执行环境中存在的全局变量进行假设。
// 如果你想使用需要知道有哪些全局变量的规则，你可以在你的配置文件中定义全局变量，
// 或者在你的源代码中使用配置注释。
"globals": {
"var1": "writable", // 允许变量被覆盖
"var2": "readonly", // 禁止覆盖 仅可读
// 可以将它们的值设置为字符串 "off" 来禁用全局变量。例如，在一个环境中，可以使用大多数 ES2015 全局变量，但不可以使用 Promise，那么你就可以使用这个配置：
"Promise": "off"
},
// 覆盖规则,
// 比如某些文件内的写法你认为是对的,但还会提示错误,你就可以在这里配置覆盖规则,不需要单行或者文件使用eslint注释
// 比如为特定类型的文件指定处理器：设置某些文件，禁用部分检查
// 同一个配置文件中的多个覆盖会按顺序应用,也就是最后一个覆盖块总是具有最高的优先权
overrides: "overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
},
// 为md文件指定使用a-plugin插件处理,注意要安装特定的插件
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
}
],
// 添加自定义解析器 通常情况下，这意味着你应该使用 npm 单独安装解析器包。
// 一般常与parserOptions一起使用,默认解析器为 espree。
parser: 'vue-eslint-parser',
// 指定解析器选项
parserOptions: {
// 这个自定义解析器中，使用@typescript-eslint/parser作为<script>标记。
parser: '@typescript-eslint/parser',
// 设置为 "script"（默认值）或 "module"（如果代码是 ECMAScript 模块）。
sourceType : 'script',
// 设置为 3、5（默认）、6、7、8、9、10、11、12 或 13，以指定你要使用的 ECMAScript 语法的版本
// 你也可以设置为 2015（6）、2016（7）、2017（8）、2018（9）、2019（10）、2020（11）、2021（12）或 2022（13）来使用基于年份的命名。你也可以设置 "latest" 来使用受支持的最新版本。
// 支持es6语法（但不支持新的 ES6 全局变量或类型，如Set）
ecmaVersion: 'latest',
// 设置为 "script"（默认值）或 "module"（如果代码是 ECMAScript 模块）。
sourceType: 'module',
jsxPragma: 'React',
// 表示你想使用哪些额外的语言特性的对象, value 均为 true/false
ecmaFeatures: {
// 启用 JSX
jsx: true,
globalReturn: true, // 允许在全局作用域下使用 return 语句
},
},
// 规则配置
rules: {
// ***
},
// 配置插件
plugins: ['a-plugin'],
// 拓展 集成
extends: [],
}
额外说明
-
还有一些其他不常用的属性 我就没看了. 有些说实话也没看懂
-
在 rules 对象中, 要改变规则的设置，你必须把规则 ID 设置为这些值之一：
"off"或0- 关闭规则"warn"或1- 启用并视作警告（不影响退出）。"error"或2- 启用并视作错误（触发时退出代码为 1）- 具体的规则配置可能会不一样，有的是一个字符串，有的可以配置一个对象，你可以参考 ESLint 官方文档。
可用的环境
browser- 浏览器全局变量。node- Node.js 的全局变量和 Node.js 的范围。commonjs- CommonJS 全局变量和 CommonJS 范围（用于使用 Browserify/WebPack 的纯浏览器代码）。shared-node-browser- Node.js 和浏览器共同的全局变量。es6- 启用除模块之外的所有 ECMAScript 6 功能（这会自动将解析器设置为 6）。es2016- 添加所有 ECMAScript 2016 的全局变量，并自动将解析器选项ecmaVersion设置为 7。es2017- 添加所有 ECMAScript 2017 的全局变量，并自动将解析器选项ecmaVersion设置为 8。es2018- 添加所有 ECMAScript 2018 的全局变量，并自动将解析器选项ecmaVersion设置为 9。es2019- 添加所有 ECMAScript 2019 的全局变量，并自动将解析器选项ecmaVersion设置为 10。es2020- 添加所有 ECMAScript 2020 的全局变量，并自动将解析器选项ecmaVersion设置为 11。es2021- 添加所有 ECMAScript 2021 的全局变量，并自动将解析器选项ecmaVersion设置为 12。es2022- 添加所有 ECMAScript 2022 的全局变量，并自动将解析器选项ecmaVersion设置为 13。worker- 网络工作者全局变量。amd- 根据 amd 规范，将require()和define()定义为全局变量。mocha- 添加所有 Mocha 测试的全局变量。jasmine- 添加 1.3 和 2.0 版本的所有 Jasmine 测试全局变量。jest- Jest 全局变量。phantomjs- PhantomJS 全局变量。protractor- Protractor 全局变量。qunit- QUnit 全局变量。jquery- jQuery 全局变量。prototypejs- Prototype.js 全局变量。shelljs- ShellJS 全局变量。meteor- Meteor 全局变量。mongo- MongoDB 全局变量。applescript- AppleScript 全局变量。nashorn- Java 8 Nashorn 全局变量。serviceworker- Service Worker 全局变量。atomtest- Atom 测试帮助器全局变量。embertest- Ember 测试助手的全局变量webextensions- WebExtensions 全局变量。greasemonkey- GreaseMonkey 全局变量。
plugin
- 当前端项目越来越多样化的时候,各种框架百花齐放, eslint 默认的那些内置规则就慢慢不够用了,所以就出现了plugins
- 可以理解为就是拓展eslint的能力,
- 需要注意的是plugins只是加载了插件, 某些插件并不是所有规则都打开的,有些还是需要去rules里面去配置或者覆盖
- 一个插件可以执行许多功能，包括但不限于添加新的规则和导出可共享的配置
- 可以省略包名中的
eslint-plugin-前缀。
举个例子, 比如在 vue工程里，我们需要对 vue代码进行某些特殊的校验，而 eslint 默认的规则已经满足不了我们的需求，这个时候就需要引入能够校验 vue代码的规则，比如 eslint-plugin-vue。会提供 SFC 相关规则的定义
引入一个plugin分两步
- 安装 plugin，例如
npm i ``eslint-plugin-vue`` -D - 声明 plugin，在工程的配置文件中，比如
.eslintrc.js中添加声明配置
{
"plugins": ["eslint-plugin-vue"]
}
需要注意的是在eslint中,非范围包和范围包中都可以省略 eslint-plugin- 前缀,什么意思呢,看下面
// 非范围包
{
// ...
"plugins": [
"jquery", // means eslint-plugin-jquery
]
// ...
}
// 范围包：
{
// ...
"plugins": [
"@jquery/jquery", // means @jquery/eslint-plugin-jquery
"@foobar" // means @foobar/eslint-plugin
]
// ...
}
配置好plugins后, 相当于你只是加载了这个规则集, 你还需要查看文档,里面包含了哪些规则,,然后在你的项目中决定启动哪些规则, 然后去rules里面配置
当然有些plugin也会提供extents的选项,具体参考不同插件的文档说明
然后你会发现 plugin 里提供了大量的 rules，如果每个都过一遍，决定在工程里应用哪些规则的话，会浪费大量时间,且还有其他人呢,都需要过一遍? 这显然是不合理的,那么接下来就是下面这个'仁兄'出场了,就是extents
extends
相当于继承另外一份 ESLint 配置，可以配置为一个字符串数组。
你可以把这个配置理解为去集成已经有了的eslint配置方案的最佳实践, 举个不怎么恰当的例子, 就相当于出门买衣服, 你不需要自己从头买针买线自己做,只需要去商场挑来成熟的合适的漂亮的衣服穿上即可, 大概是这么意思, 已经是个成熟品
主要分如下 3 种情况:
- 从 ESLint 本身继承；
- 从类似
eslint-config-xxx的 npm 包继承； - 从 ESLint 插件继承。
// .eslintrc.js
module.exports = {
"extends": [
// 第1种情况
"eslint:recommended",
// 第2种情况，一般配置的时候可以省略 `eslint-config`
"standard"
// 第3种情况，可以省略包名中的 `eslint-plugin`
// 格式一般为: `plugin:${pluginName}/${configName}`
"plugin:react/recommended" "plugin:@typescript-eslint/recommended",
]
}
下篇文章再介绍实操, 怎么配置自动化代码规范工具的使用
