一、简介
ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免某些低级错误并统一代码风格。ESLint 被设计为完全可配置的,主要有两种方式:
- 在注释中配置:使用 JavaScript 注释直接把配置嵌入到 JS 文件中。
- 配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
- javascript:使用
.eslintrc.js
文件并导出一个包含配置的对象。 - YAML:
.eslintrc.yaml
或者.eslintrc.yml
- JSON:
.eslintrc.json
,并且此文件允许使用JS形式的注释 - 废弃的用法:
.eslintrc
,此文件可以是JSON或者YAML - package.json:在
package.json
文件中创建eslintConfig
属性,所有的配置包含在此属性中。
- javascript:使用
这些文件的优先级则是按照以上出现的顺序(.eslintrc.js
> .eslintrc.yaml
> .eslintrc.yml
> .eslintrc.json
> .eslintrc
> package.json
)。
可以被配置的信息主要分为3类:
- Environments:你的 javascript 脚步将要运行在什么环境(如:nodejs,browser,commonjs 等)中。
- Globals:执行代码时脚步需要访问的额外全局变量。
- Rules:开启某些规则,也可以设置规则的等级。
二、安装
- 全局安装
npm i -g eslint
- 局部安装(推荐)
npm i -D eslint
安装完毕后,接下来新建一个配置文件.eslintrc.js
,或者使用如下的命令行来自动生成。
eslint --init
三、配置
3.1 指定执行环境
JavaScript 代码可以运行在浏览器或 Node.js 等环境中,每个环境的全局变量都不尽相同(如 Node.js 中没有 DOM 相关的全局变量)。在配置文件中可以自由的指定执行环境。
// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
};
所有的环境可在官网查询。
3.2 指定全局变量
可以在配置文件或注释中指定额外的全局变量,false
表明变量只读:
- 使用注释来配置:
/* global var1, var2 */
/* global var1:false, var2:false */
- 使用配置文件来配置:
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
3.3 规则
在配置文件中可以设置一些规则。
这些规则的等级有三种:
- “off” 或者 0:关闭规则。
- “warn” 或者 1:打开规则,并且作为一个警告(不影响 exit code)。
- “error” 或者 2:打开规则,并且作为一个错误(exit code 将会是1)。
例如:
- 使用配置文件来配置:
// .eslintrc.js
module.exports = {
rules: {
eqeqeq: 'off',
curly: 'error',
},
};
- 使用注释来配置:
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
具体的规则可以在官网上找到。
四、使用方法
4.1 命令行
通过命令行使用 ESLint。
eslint [options] file.js [file.js] [dir]
4.2 编辑器
使用 VSCode 配合相应的插件直接显示错误和警告。
除了上述,还可以配合 Gulp、Webpack 等工具使用。
五、常见示例
5.1 一般示例
在项目的根目录中添加文件 .prettierrc
{
"semi": false, // 格式化消除所有分号
"singleQuote": true // 格式化字符串为单引号
}
找到 .eslintrc.js,在 rules 中
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// fun () {} => fun() {}
'space-before-function-paren': 0
}