ESlint 是一个可以规范化团队及个人的js语言项目的一个工具。ESlint 的合理使用可以规避掉很多不必要的错误,同时它可以让程序员养成规范化的代码风格,让我这个强迫症用起来爱不释手呀。

这篇博客会简单介绍 ESlint 的使用配置,及在正常项目需要使用到的配置或插件的基本了解。

Install

1
2
npm isntall -g eslint # 全局安装
npm install -D eslint # 项目安装

当使用eslint --init 使用 config 安装依赖后,需要本地进行 eslint 的安装,否则使用全局的 eslint cli 无法直接解析本地的 config 模块(你也可以选择将配置模块安装在全局,但那样不好)

Eslint init

配置 eslint 文件使用es6语法, es6模块, 运行环境 browser、node, CommonJS模块语法, JSX语法, 使用React, 缩进风格 tab、space, 引号风格 double、single, 换号符环境 Unix、windows 详细 , 是否需要使用分号。

需要生成的配置文件格式 JavaScriptYMALJSON

这里需要安装 eslint-plugin-react@latesteslint@latest

生产 .eslintignore 设置 eslint 排除检测的文件以 ! 开头的行是否定模式,它将会重新包含一个之前被忽略的模式。

1
2
3
4
5
6
# /node_modules/* and /bower_components/* ignored by default
# Ignore built files except build/index.js
build/*
!build/index.js

# 开头是注释 将忽略 node_modulesbower_components 以及 build/ 目录下除了 build/index.js 的所有文件。

.eslintrc 详细

react 需要安装 eslint-plugin-react 插件(仅jsx不可以)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
// 环境,浏览器,commonjs模块,es6语法环境
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
//启用推荐的规则
"extends": "eslint:recommended",
//设置解析器选项
"parserOptions": {
// ECMA 特性
"ecmaFeatures": {
// rest spread 语法
"experimentalObjectRestSpread": true,
// jsx 语法
"jsx": true
},
//设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
//...
}
};

Configuring ESlint

使用 eslint 的方式

  1. 使用 eslint cli 的方式,在命令行参数配置lint的语法
  2. js 文件的注释配置 lint 语法检测
  3. 使用 eslint 配置文件,执行 eslint 会自动使用配置文件的语法检测

这里建议使用 .slintrc 的配置文件,这样可以进行更多的配置

  • Environaments 可以设置 eslint 检测的运行环境,提供了预定义全局变量
  • Globals 在 lint 脚本执行期间可以访问的额外全局变量
  • Rules 设置规则 可以配置出更加符合你项目代码规范的 lint

.eslintrc 若为 js 文件需要使用 node 模块语法,也就是 module.exports ={[eslint config]} 去导出lint config ,让 eslint cli 执行

Parser

eslint 默认使用 Espree 解析器

1
2
3
{
"parser": "babel-eslint"
}

这里的 babel-eslint 对 Babel 解析器的包装使其与 ESLint 兼容。

Environments

  • browser: browser 全局变量。
  • node: Node.js 全局变量和 Node.js 作用域。
  • commonjs: CommonJS 全局变量和 CommonJS 作用域 (仅为使用 Browserify/WebPack 写的只支持浏览器的代码) 。
  • shared-node-browser: Node 和 Browser 通用全局变量。
  • es6: 支持除模块外所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6)。
  • worker: web workers 全局变量。
  • amd: 定义 require() 和 define() 作为像 amd 一样的全局变量。
  • mocha: 添加所有的 Mocha 测试全局变量。
  • jest: Jest 全局变量。
  • phantomjs: PhantomJS 全局变量。
  • jquery: jQuery 全局变量。
  • shelljs: ShellJS 全局变量。
  • meteor: Meteor 全局变量。
  • mongo: MongoDB 全局变量。

可以选择多个

1
2
3
4
5
6
{
"env": {
"browser": true,
"node": true
}
}

当使用的插件依赖一种环境的时候,需要进行环境的设置

1
2
3
4
5
6
{
"plugins": ["example"],
"env": {
"example/custom": true
}
}

Globals variabels

当你在一个模块中存在未定义的变量使用的时候 no-undef 规则会发出警告。 这时可以使用文件内头部注释来消除警告

1
/* global var1, var2 */

这里定义了两个全局变量:var1 和 var2。如果你想指定这些变量不应被重写(只读),你可以将它们设置为 false:

1
/* global var1:false, var2:false */

头部注释必须写在第一行 globals 指出你要使用的全局变量。设置每个变量等于 true 允许变量被重写,或 false 不允许被重写

1
2
3
4
5
6
{
"globals": {
"var1": true,
"var2": false
}
}

建议设置false,避免全局变量的更改带来不必要的麻烦 注意:启用no-global-assign规则来禁止对只读的全局变量进行修改。

Config & Plugins

插件在使用的时候不需要输入 eslint-plugin- eslint会自动检测 注意:全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件还可以使用全局安装的插件。

eslint: eslint 核心模块

eslint-config-airbnb: eslint airbnb 默认的eslint配置 包括ECMAScript 6+和React。依赖eslinteslint-plugin-importeslint-plugin-react,和eslint-plugin-jsx-a11y

eslint-config-airbnb-base: 包括 ECMAScript 6+. 依赖eslint, eslint-plugin-import. eslint airbnb 默认的 js eslint 配置 配置

eslint-plugin-react: react 语法支持 插件

babel-eslint: 使用eslint babel解析器

eslint-plugin-import: 该插件旨在支持ES2015 +(ES6 +)导入/导出语法的提示,并防止文件路径拼写错误和导入名称的问题。ES2015 +静态模块语法打算提供的所有好处,标记在您的编辑器中。

eslint-config-react-app: 来自 create-react-app 的eslint 配置 配置

eslint-plugin-jsx-a11y: 在JSX元素可访问规则静态AST检查器。 插件

eslint-loader: 配合wabpack 的eslint检测 webpack-loader

eslint-plugin-flowtype: 使用Flow时需要,针对数据类型有极为灵活的限制规则 插件

eslint-config-standard: standard 配置文件 配置, 依赖eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

eslint-plugin-standard: 当你使用 standard config 时需要使用plugin,因为它提供了特殊设置检测 插件

eslint-config-standard-jsx: 关于jsx的配置 配置

eslint-plugin-jest jest: 使用jest时需要,测试文件的检测 插件

eslint-plugin-node: node环境下的语法检测 插件

eslint-plugin-promise: 语法检测支持 插件

eslint-config-prettier: prettier 配置 配置

eslint-plugin-prettier: prettier 规则 插件 官网

Check rules

eslint 的这些规则的判断分为三个等级

  • "off"0 - 关闭规则
  • "warn"1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error"2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

为了在文件注释里配置规则,使用以下格式的注释:

1
/* eslint eqeqeq: "off", curly: "error" */

在这个例子里,eqeqeq 规则被关闭,curly 规则被打开,定义为错误级别。你也可以使用对应的数字定义规则严重程度:

1
/* eslint eqeqeq: 0, curly: 2 */

这个例子和上个例子是一样的,只不过它是用的数字而不是字符串。eqeqeq 规则是关闭的,curly 规则被设置为错误级别。

如果一个规则有额外的选项,你可以使用数组字面量指定它们,比如:

1
/* eslint quotes: ["error", "double"], curly: 2 */

这条注释为规则 quotes 指定了"double"选项。数组的第一项总是规则的严重程度(数字或字符串)。

配置文件 rules 设置

1
2
3
4
5
6
7
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}

配置定义在插件中的一个规则的时候,你必须使用 插件名/规则ID 的形式。比如:

1
2
3
4
5
6
7
8
9
10
11
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}

Set init project config file

将eslint配置文件保存好,在项目需要的时候可以使用 eslint cli

1
eslint -c 'eslintConfig.js' '.eslintrc.js'

Questions

ESlint plugin 和 config 的区别:

plugin 是定义了一些特别的 eslint 检测规则,并未提供 eslint 的配置(仅提供配置选项) config 是一个 eslint 的配置文件,你需要使用 extends 使用配置,而且你的配置文件的设置也会优先于 config 文件的设置

使用prettierprettier 目前在很多项目都会使用,prettier 有啥好? 在我使用 eslint 时都会进行配置,各种插件,各种 rules,在一番配置和使用后,有时自己都搞不清,代码为什么这样了(我使用 vscode 开发,并且设置了eslint.autoFix,保存代码会自动安装 eslint fix 代码)。

prettier 支持 JavaScript, ES2017, JSX, Flow, TypeScript, CSS, Less, SCSS, JSON, GraphQL, 并且有简单的 rules
prettier 是根据每行的 mixwidth 来换行美化代码的。

prettier-cli 使用很简单,参考官方的就可以,cli 一般很少用,这种情况就可以只使用编辑器的 prettier 插件了,别cli方便。

prettier 主要是默认的对代码的美化,因为它支持的语法多,美化的格式更易读(看起来舒服,专业美化!),而在团队开发中,还是要使用 eslint 配置,配合其他插件来规避错误,美化代码。

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// install the following packages:
// yarn add --dev eslint prettier babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y@5.1.1
{
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"semi": [2, "always"],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
}

这是我常用的默认配置, react 的开发,prettier 默认会对 jestflow 等文件进行美化,但 eslint 还需要对应的语法支持,就需要安装相应的 eslint 插件了

Reference