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

附录

更多资料

eslint配置文档-中文

eslint-命令行文档

eslint-plugin-vue文档

eslint-plugin-vue配置文档

参考资料

• eslint常见问题记录

• .eslintrc.js文件内容/配置eslint/eslint参数

补充的话

在仓库，还提供了许多前端常见需求及实现的归纳整理，欢迎客官看看~

如果这篇笔记能够帮助到你，