ESLint是一個(gè)用來(lái)識(shí)別 ECMAScript 并且按照規(guī)則給出報(bào)告的代碼檢測(cè)工具揖赴,使用它可以避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格雪位。ESLint被設(shè)計(jì)為完全可配置的竭钝,主要有兩種方式來(lái)配置ESLint:
- 在注釋中配置:使用JavaScript注釋直接把配置嵌入到JS文件中。
- 配置文件:使用下面任一的文件來(lái)為全部的目錄和它的子目錄指定配置信息雹洗。
- javascript:使用
.eslintrc.js
文件并導(dǎo)出一個(gè)包含配置的對(duì)象香罐。 - YAML:
.eslintrc.yaml
或者.eslintrc.yml
- JSON:
.eslintrc.json
,并且此文件允許使用JS形式的注釋 - 廢棄的用法:
.eslintrc
时肿,此文件可以是JSON或者YAML - package.json:在
package.json
文件中創(chuàng)建eslintConfig
屬性庇茫,所有的配置包含在此屬性中。
- javascript:使用
這些文件的優(yōu)先級(jí)則是按照以上出現(xiàn)的順序(.eslintrc.js
> .eslintrc.yaml
> .eslintrc.yml
> .eslintrc.json
> .eslintrc
> package.json
)螃成。
可以被配置的信息主要分為3類:
- Environments:你的 javascript 腳步將要運(yùn)行在什么環(huán)境(如:nodejs旦签,browser,commonjs等)中寸宏。
- Globals:執(zhí)行代碼時(shí)腳步需要訪問(wèn)的額外全局變量宁炫。
- Rules:開(kāi)啟某些規(guī)則,也可以設(shè)置規(guī)則的等級(jí)氮凝。
安裝
- 全局安裝
npm i -g eslint
- 局部安裝(推薦)
npm i -D eslint
安裝完畢后羔巢,接下來(lái)新建一個(gè)配置文件.eslintrc.js
,或者使用如下的命令行來(lái)自動(dòng)生成罩阵。
eslint --init
配置
指定執(zhí)行環(huán)境
JavaScript 代碼可以運(yùn)行在瀏覽器或 nodejs 等環(huán)境中竿秆,每個(gè)環(huán)境的全局變量都不盡相同(如 nodejs 中沒(méi)有 DOM 相關(guān)的全局變量)。在配置文件中可以自由的指定執(zhí)行環(huán)境稿壁。
// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
};
所有的環(huán)境可以在官網(wǎng)上查詢幽钢。
指定全局變量
可以在配置文件或注釋中指定額外的全局變量,false
表明變量只讀:
- 使用注釋來(lái)配置:
/* global var1, var2 */
/* global var1:false, var2:false */
- 使用配置文件來(lái)配置:
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
規(guī)則
在配置文件中可以設(shè)置一些規(guī)則傅是。
這些規(guī)則的等級(jí)有三種:
- "off" 或者 0:關(guān)閉規(guī)則匪燕。
- "warn" 或者 1:打開(kāi)規(guī)則,并且作為一個(gè)警告(不影響exit code)落午。
- "error" 或者 2:打開(kāi)規(guī)則谎懦,并且作為一個(gè)錯(cuò)誤(exit code將會(huì)是1)肚豺。
例如:
- 使用配置文件來(lái)配置
// .eslintrc.js
module.exports = {
rules: {
eqeqeq: 'off',
curly: 'error',
},
};
- 使用注釋來(lái)配置
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
也可以在注釋中關(guān)閉所有或者某個(gè)規(guī)則:
/* eslint-disable */
/* eslint-enable */
/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */
具體的規(guī)則可以在官網(wǎng)上找到溃斋,或者使用別人寫(xiě)好的配置,例如eslint-config-airbnb吸申。
使用方法
命令行
通過(guò)命令行工具來(lái)使用 eslint 梗劫。
eslint [options] file.js [file.js] [dir]
編輯器
配合相應(yīng)的插件享甸,在vscode中直接顯示錯(cuò)誤和警告。