eslint - 一篇笔记，让你看懂 eslint 的常用配置
介绍
阅读前两个章节可以快速应对项目中的eslint规则调整/禁用的场景；
后面的使用示例和常用配置推荐刚刚接触eslint的读者使用。
配置eslint语法规则
module.exports = {
// ...
"rules": {
"semi": ["error", "always"],
"camelcase": "off"
}
}
| 错误级别 | 说明 |
|---|---|
"off" / 0 | 关闭规则 |
"warn" / 1 | 不满足规则将生成警告 |
"error" / 2 | 不满足规则将生成错误，会退出程序 |
可以参考中文文档查看语法配置项的具体含义；
忽略eslint语法检查
忽略多个文件
[root]/.eslintignore
# 忽略build目录下类型为js的文件
build/*.js
# 忽略src/assets目录下文件
src/assets
# 忽略public目录下文件
public
# 忽略当前目录下为js的文件
*.js
# 忽略当前目录的demo.js文件
demo.js
# 忽略所有文件
*
忽略单个文件
忽略整个文件
/* eslint-disable */
some code
some code
<!-- eslint-disable-->
<template></template>
...
在 .vue 文件中需要忽略整个文件的eslint校验时，语法如上。
忽略一段代码
/* eslint-disable */
some code
some code
/* eslint-enable */
忽略下一行
// eslint-disable-next-line
some code
// 使用示例
watch: {
// eslint-disable-next-line
'a.b': function () {
this.loadList();
},
},
忽略当前行
some code // eslint-disable-line
console.log(message); // eslint-disable-line no-console
使用示例
初始化项目
npm init -y
安装eslint依赖
npm install eslint --save-dev
初始化eslint，在项目根目录下生成 .eslintrc.*
npm run ./node_modules/.bin/eslint --init
.eslintrc.js
module.exports = {
// ...
"extends": "eslint:recommended"
}
由于这行，所有在规则页面被标记为 ✔️ 的规则将会默认开启;
也可以使用其他的配置集，或写成数组形式来使用多个配置集。
编写例子用于测试
demo.js
function dos() {
console.log(123)
}
function dos() {
console.log(456)
}
dos()
配置并启用脚本
package.json
"scripts": {
"test": "node demo.js"
}
npm run test
使用 vscode 时，还需要额外安装插件 ESLint 才能使校验生效；
常用配置
编写配置文件有以下三种方式，添加的配置将作用于整个目录：
-
使用 JavaScript/json/yaml，编写对应的
.eslintrc.*配置； -
直接在
package.json文件里的eslintConfig字段配置； -
在命令行指定需要运行的配置文件。
eslint -c test.js
配置规则项
配置 rules 可以对细粒度的语法规则进行配置
module.exports = {
// ...
"rules": {
"semi": ["error", "always"],
"camelcase": "off",
"plugin1/rule1": "off"
}
}
属性名为规则名称，字符串/数组首参为设置的错误级别；
规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则，
指定来自插件的规则时，需要删除 eslint-plugin- 前缀。
| 错误级别 | 说明 |
|---|---|
"off" / 0 | 关闭规则 |
"warn" / 1 | 不满足规则将生成警告 |
"error" / 2 | 不满足规则将生成错误，会退出程序 |
支持ES6
module.exports = {
// ...
"parserOptions": {
"ecmaVersion": 6
},
"env": {
"es6": true
}
}
指定解析器
module.exports = {
// ...
"parser": {
"ecmaVersion": "esprima"
}
}
| 可选值 | 说明 |
|---|---|
| babel-eslint（废弃） | 保证 babel，以实现与 eslint 兼容 |
| @babel/eslint-parser | babel-selint 的新实现 |
| @typescript-eslint/parser | 能够实现 ts 与 eslint 的兼容 |
使用了自定义解析器后，也需要配置 parserOptions，它会传入解析器，来决定是否启用 es6 等。
指定环境
每个环境都有对应的预定义好的全局变量，让 eslint 知道它们的存在，方便在项目中使用，且不报错。
module.exports = {
// ...
"env": {
"browser": true,
"node": true
}
}
| 可选值 | 说明 |
|---|---|
| browser | 浏览器环境中的全局变量 |
| node | Node.js 全局变量和 Node.js 作用域 |
| commonjs | commonjs 全局变量和 commonjs 作用域 |
| es6 | 启用除了 modules 以外的所有 ECMAScript 6 特性 |
| es6 | 该选项会自动设置 ecmaVersion: 6，即支持 es6 |
定义全局变量
需要在源文件中使用未定义变量时，为避免报错需要进行配置：
module.exports = {
// ...
"globals": {
"var1": "writable", // 允许重写
"var2": "readonly" // 只读
}
}
要启用 no-global-assign 规则来禁止对只读的全局变量进行修改。
使用插件
module.exports = {
// ...
"plugins": [
"eslint-plugin-plugin1",
"plugin2"
]
}
使用插件前需要先安装插件依赖；
插件名称可以省略 eslint-plugin- 前缀。
层叠配置
取当前目录与祖先目录配置文件的并集，当前目录规则优先。
your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc
└── test.js
附录
更多资料
参考资料
补充的话
在仓库，还提供了许多前端常见需求及实现的归纳整理，欢迎客官看看~
如果这篇笔记能够帮助到你，