一、安装eslint
npm install eslint --save-dev
or
yarn add eslint --save-dev
二、eslint配置
-
Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
- 在javascript使用注释配置eslint信息。
/* eslint-env node, mocha */ // 使用注释来指定环境 /* global var1:writable, var2:readonly */ // 使用注释指定全局变量,并且约定全局变量是否允许重写, writable允许重写全局变量、readonly不允许重写全局变量、off禁用全局变量 /* eslint eqeqeq: "off", curly: "error" */ // 使用注释配置规则。off关闭规则;warn开启警告级别规则;error开启错误级别规则; /* eslint eqeqeq: 0, curly: 2 */ // 使用注释配置规则。0关闭规则;1开启警告级别规则;2开启错误级别规则; /* eslint "plugin1/rule1": "error" */ // 使用注释配置来自plugin的规则。 /* eslint-enable no-alert, no-console */ // 启用指定规则
- 在javascript使用注释禁止eslint规则使用。
/* eslint-disable */ // 对整个文件禁用eslint /* eslint-disable no-alert, no-console */ // 指定规则的禁用 // eslint-disable-line // 当前行禁用 /* eslint-disable-next-line no-alert, quotes, semi */ // 下一行禁用规则 /* eslint-disable-line example/rule-name */ // 禁用eslint-plugin-example的rule-name 规则
-
Configuration Files-可以配置在.eslintrc.*文件里,或者直接在
package.json
文件里的eslintConfig
字段指定配置。- 如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
- 可以配置的信息如下:
environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
全局变量一部分来自
globals
第三方库,还有一部分来自eslint/conf/environments.js
里面的定义。-
env - 要在配置文件里指定环境。如果你想在一个特定的插件中使用一种环境,确保提前在
plugins
数组里指定了插件名,然后在 env 配置中不带前缀的插件名后跟一个/
,紧随着环境名。{ "browser": true, "node": true, "example/custom": true }
-
globals - 脚本在执行期间访问的额外的全局变量。
globals
配置属性设置为一个对象,该对象包含以你希望使用的每个全局变量。对于每个全局变量键,将对应的值设置为"writable"
以允许重写变量,或"readonly"
不允许重写变量,"off"
禁用全局变量。{ "globals": { "var1": "writable", "var2": "readonly", "var3": "off" } }
-
plugins - 在配置文件里配置插件时,可以使用
plugins
关键字来存放插件名字的列表。插件名称可以省略eslint-plugin-
前缀。{ "plugins": [ "plugin1", "eslint-plugin-plugin2" ] }
-
rules - 启用的规则及其各自的错误级别。
"off"
或0
- 关闭规则"warn"
或1
- 开启规则,使用警告级别的错误:warn
(不会导致程序退出)"error"
或2
- 开启规则,使用错误级别的错误:error
(当被触发的时候,程序会退出)
{ "plugins": [ "plugin1" ], "rules": { "eqeqeq": "off", "curly": "error", "quotes": ["error", "double"], "plugin1/rule1": "warn" // 启用plugin的规则,当指定来自插件的规则时,确保删除 eslint-plugin- 前缀 } }
-
parserOptions - 解析配置
- ecmaVersion - 默认设置为 3,5,你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10)
- sourceType - 设置为
"script"
(默认) 或"module"
如果你的代码是 ECMAScript 模块)。 - ecmaFeatures - 这是个对象,表示你想使用的额外的语言特性:
- globalReturn - 允许在全局作用域下使用
return
语句 - impliedStrict - 启用全局 strict mode (如果
ecmaVersion
是 5 或更高) - jsx - 启用 JSX
- experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(**重要:**这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)
- globalReturn - 允许在全局作用域下使用
{ parserOptions: { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } } }
-
parser - 默认解析器为Espree, 可以传其他解析器: esprima、babel-eslint、@typescript-eslint/parser
-
processor - 处理器。插件可以提供处理器,处理器可以从另一种文件中提取 JavaScript 代码,然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。若要在配置文件中指定处理器,请使用
processor
键,并使用由插件名和处理器名组成的串接字符串加上斜杠。要为特定类型的文件指定处理器,请使用overrides
键和processor
键的组合。{ { "plugins": ["plugin1"], "processor": "plugin1/myProcessor" } }
-
settings - 共享设置。它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息,这将会很有用,并且很容易配置。
{ "settings": { "sharedData": "Hello" } }
在自定义规则create(context)钩子函数,context上下文中可以获取settings。具体请查看eslint 官网。
-
extends - 一个配置文件可以被基础配置中的已启用的规则继承。
extends
属性值可以由以下组成:- plugin: - plugins可以省略包名的前缀
eslint-plugin-
- 包名
/
- 配置名称
{ "plugins": [ "plugin1" ], "extends": [ "eslint:recommended", "plugin:plugin1/myConfigs" ], }
- plugin: - plugins可以省略包名的前缀
- 如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:
-
要对特殊类型的文件指定处理器或者规则,请使用
overrides
和files
。{ "plugins": [ "plugin1" ], "overrides": [ { "files": ["*.md"], "processor": "plugin1/markdown" }, { "files": ["*.md"], "rules": { "strict": "off" } } ] }
-
默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的
package.json
文件或者.eslintrc.*
文件里的eslintConfig
字段下设置"root": true
。ESLint 一旦发现配置文件中有"root": true
,它就会停止在父级目录中寻找。{ "root": true }