ESLint 配置

ESLint 配置

ESlint 被設(shè)計(jì)為完全可配置的,這意味著你可以關(guān)閉每一個(gè)規(guī)則而只運(yùn)行基本語(yǔ)法驗(yàn)證,或混合和匹配 ESLint 默認(rèn)綁定的規(guī)則和你的自定義規(guī)則,以讓 ESLint 更適合你的項(xiàng)目。有兩種主要的方式來配置 ESLint:

  1. Configuration Comments - 使用 JavaScript 注釋把配置信息直接嵌入到一個(gè)代碼源文件中。
  2. Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件為整個(gè)目錄和它的子目錄指定配置信息??梢耘渲靡粋€(gè)獨(dú)立的 .eslintrc.* 文件,或者直接在 package.json 文件里的 eslintConfig 字段指定配置,ESLint 會(huì)查找和自動(dòng)讀取它們,再者,你可以在命令行運(yùn)行時(shí)指定一個(gè)任意的配置文件。

有很多信息可以配置:

  • Environments - 指定腳本的運(yùn)行環(huán)境。每種環(huán)境都會(huì)有一組特定的預(yù)定義全局變量。
  • Globals - 腳本在執(zhí)行期間訪問的額外的全局變量。
  • Rules - 啟用的規(guī)則及其各自的錯(cuò)誤級(jí)別。

所有這些選項(xiàng)讓你可以細(xì)粒度地控制 ESLint 如何對(duì)待你的代碼。

指定解析器選項(xiàng)

ESLint 允許你指定你想要支持的 JavaScript 語(yǔ)言選項(xiàng)。默認(rèn)情況下,ESLint 支持 ECMAScript 5 語(yǔ)法。你可以覆蓋該設(shè)置,以啟用對(duì) ECMAScript 其它版本和 JSX 的支持。

請(qǐng)注意,對(duì) JSX 語(yǔ)法的支持不用于對(duì) React 的支持。React 使用了一些特定的 ESLint 無法識(shí)別的 JSX 語(yǔ)法。如果你正在使用 React 并且想要 React 語(yǔ)義支持,我們推薦你使用 eslint-plugin-react

同樣的,支持 ES6 語(yǔ)法并不意味著同時(shí)支持新的 ES6 全局變量或類型(比如 Set 等新類型)。使用 { "parserOptions": { "ecmaVersion": 6 } } 來啟用 ES6 語(yǔ)法支持;要額外支持新的 ES6 全局變量,使用 { "env":{ "es6": true } }(這個(gè)設(shè)置會(huì)同時(shí)自動(dòng)啟用 ES6 語(yǔ)法支持)。

解析器選項(xiàng)可以在 .eslintrc.* 文件使用 parserOptions 屬性設(shè)置。可用的選項(xiàng)有:

  • ecmaVersion - 默認(rèn)設(shè)置為 5, 你可以使用 3、5、6、7 或 8 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號(hào)指定為 2015(同 6),2016(同 7),或 2017(同 8)
  • sourceType - 設(shè)置為 "script" (默認(rèn)) 或 "module"(如果你的代碼是 ECMAScript 模塊)。
  • ecmaFeatures - 這是個(gè)對(duì)象,表示你想使用的額外的語(yǔ)言特性:globalReturn - 允許在全局作用域下使用 return 語(yǔ)句impliedStrict - 啟用全局 strict mode (如果 ecmaVersion 是 5 或更高)jsx - 啟用 JSXexperimentalObjectRestSpread - 啟用實(shí)驗(yàn)性的 object rest/spread properties 支持。(重要:這是一個(gè)實(shí)驗(yàn)性的功能,在未來可能會(huì)有明顯改變。 建議你寫的規(guī)則 不要 依賴該功能,除非當(dāng)它發(fā)生改變時(shí)你愿意承擔(dān)維護(hù)成本。)

.eslintrc.json 文件示例:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

設(shè)置解析器選項(xiàng)能幫助 ESLint 確定什么是解析錯(cuò)誤,所有語(yǔ)言選項(xiàng)默認(rèn)都是 false。

指定解析器

ESLint 默認(rèn)使用Espree作為其解析器,你可以在配置文件中指定一個(gè)不同的解析器,只要該解析器符合下列要求:

  1. 它必須是本地安裝的一個(gè) npm 模塊。
  2. 它必須有兼容 Esprima 的接口(它必須輸出一個(gè) parse() 方法)
  3. 它必須產(chǎn)出兼容 Esprima 的 AST 和 token 對(duì)象。

注意,即使?jié)M足這些兼容性要求,也不能保證一個(gè)外部解析器可以與 ESLint 正常配合工作,ESLint 也不會(huì)修復(fù)與其它解析器不兼容的相關(guān) bug。

為了表明使用該 npm 模塊作為你的解析器,你需要在你的 .eslintrc 文件里指定 parser 選項(xiàng)。例如,下面的配置指定了 Esprima 作為解析器:

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

以下解析器與 ESLint 兼容:

  • Esprima
  • Babel-ESLint - 一個(gè)對(duì)Babel解析器的包裝,使其能夠與 ESLint 兼容。
  • typescript-eslint-parser(實(shí)驗(yàn)) - 一個(gè)把 TypeScript 轉(zhuǎn)換為 ESTree 兼容格式的解析器,這樣它就可以在 ESLint 中使用了。這樣做的目的是通過 ESLint 來解析 TypeScript 文件(盡管不一定必須通過所有的 ESLint 規(guī)則)。

注意,在使用自定義解析器時(shí),為了讓 ESLint 在處理非 ECMAScript 5 特性時(shí)正常工作,配置屬性 parserOptions 仍然是必須的。解析器會(huì)被傳入 parserOptions,但是不一定會(huì)使用它們來決定功能特性的開關(guān)。

指定環(huán)境

一個(gè)“環(huán)境”定義了一組預(yù)定義的全局變量??捎玫沫h(huán)境包括:

  • browser - 瀏覽器環(huán)境中的全局變量。
  • node - Node.js 全局變量和 Node.js 作用域。
  • commonjs - CommonJS 全局變量和 CommonJS 作用域 (一般用于 Browserify/WebPack 打包的只在瀏覽器中運(yùn)行的代碼)。
  • shared-node-browser - Node 和 Browser 通用全局變量。
  • es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性(該選項(xiàng)會(huì)自動(dòng)設(shè)置 ecmaVersion 解析器選項(xiàng)為 6)。
  • worker - Web Workers 全局變量。
  • amd - 將 require()define() 定義為像 amd 一樣的全局變量。
  • mocha - 添加所有的 Mocha 測(cè)試全局變量。
  • jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的測(cè)試全局變量。
  • jest - Jest 全局變量。
  • phantomjs - PhantomJS 全局變量。
  • protractor - Protractor 全局變量。
  • qunit - QUnit 全局變量。
  • jquery - jQuery 全局變量。
  • prototypejs - Prototype.js 全局變量。
  • shelljs - ShellJS 全局變量。
  • meteor - Meteor 全局變量。
  • mongo - MongoDB 全局變量。
  • applescript - AppleScript 全局變量。
  • nashorn - Java 8 Nashorn 全局變量。
  • serviceworker - Service Worker 全局變量。
  • atomtest - Atom 測(cè)試全局變量。
  • embertest - Ember 測(cè)試全局變量。
  • webextensions - WebExtensions 全局變量。
  • greasemonkey - GreaseMonkey 全局變量。

這些環(huán)境并不是互斥的,所以你可以同時(shí)定義多個(gè)。

可以在源文件里、在配置文件中或使用 命令行--env 選項(xiàng)來指定環(huán)境。

要在你的 JavaScript 文件中使用注釋來指定環(huán)境,格式如下:

/* eslint-env node, mocha */

該設(shè)置啟用了 Node.js 和 Mocha 環(huán)境。

要在配置文件里指定環(huán)境,使用 env 關(guān)鍵字指定你想啟用的環(huán)境,并設(shè)置它們?yōu)?true。例如,以下示例啟用了 browser 和 Node.js 的環(huán)境:

{
    "env": {
        "browser": true,
        "node": true
    }
}

或在 package.json 文件中:

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

在 YAML 文件中:

---
  env:
    browser: true
    node: true

如果你想在一個(gè)特定的插件中使用一種環(huán)境,確保提前在 plugins 數(shù)組里指定了插件名,然后在 env 配置中不帶前綴的插件名后跟一個(gè) / ,緊隨著環(huán)境名。例如:

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

或在 package.json 文件中

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "plugins": ["example"],
        "env": {
            "example/custom": true
        }
    }
}

在 YAML 文件中:

---
  plugins:
    - example
  env:
    example/custom: true

指定全局變量

當(dāng)訪問當(dāng)前源文件內(nèi)未定義的變量時(shí),no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量,推薦你在 ESLint 中定義這些全局變量,這樣 ESLint 就不會(huì)發(fā)出警告了。你可以使用注釋或在配置文件中定義全局變量。

要在你的 JavaScript 文件中,用注釋指定全局變量,格式如下:

/* global var1, var2 */

這里定義了兩個(gè)全局變量:var1var2。如果你想指定這些變量不應(yīng)被重寫(只讀),你可以將它們?cè)O(shè)置為 false

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

在配置文件里配置全局變量時(shí),使用 globals 指出你要使用的全局變量。將變量設(shè)置為 true 將允許變量被重寫,或 false 將不允許被重寫。比如:

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

在 YAML 中:

---
  globals:
    var1: true
    var2: false

在這些例子中 var1 允許被重寫,var2 不允許被重寫。

注意: 要啟用no-global-assign規(guī)則來禁止對(duì)只讀的全局變量進(jìn)行修改。

配置插件

ESLint 支持使用第三方插件。在使用插件之前,你必須使用 npm 安裝它。

在配置文件里配置插件時(shí),可以使用 plugins 關(guān)鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

在 YAML 中:

---
  plugins:
    - plugin1
    - eslint-plugin-plugin2

注意:全局安裝的 ESLint 只能使用全局安裝的插件。本地安裝的 ESLint 不僅可以使用本地安裝的插件,也可以使用全局安裝的插件。

配置規(guī)則

ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則。要改變一個(gè)規(guī)則設(shè)置,你必須將規(guī)則 ID 設(shè)置為下列值之一:

  • "off"0 - 關(guān)閉規(guī)則
  • "warn"1 - 開啟規(guī)則,使用警告級(jí)別的錯(cuò)誤:warn (不會(huì)導(dǎo)致程序退出)
  • "error"2 - 開啟規(guī)則,使用錯(cuò)誤級(jí)別的錯(cuò)誤:error (當(dāng)被觸發(fā)的時(shí)候,程序會(huì)退出)

為了在文件注釋里配置規(guī)則,使用以下格式的注釋:

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

在這個(gè)例子里,eqeqeq 規(guī)則被關(guān)閉,curly 規(guī)則被打開,定義為錯(cuò)誤級(jí)別。你也可以使用對(duì)應(yīng)的數(shù)字定義規(guī)則嚴(yán)重程度:

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

這個(gè)例子和上個(gè)例子是一樣的,只不過它是用的數(shù)字而不是字符串。eqeqeq 規(guī)則是關(guān)閉的,curly 規(guī)則被設(shè)置為錯(cuò)誤級(jí)別。

如果一個(gè)規(guī)則有額外的選項(xiàng),你可以使用數(shù)組字面量指定它們,比如:

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

這條注釋為規(guī)則 quotes 指定了 “double”選項(xiàng)。數(shù)組的第一項(xiàng)總是規(guī)則的嚴(yán)重程度(數(shù)字或字符串)。

還可以使用 rules 連同錯(cuò)誤級(jí)別和任何你想使用的選項(xiàng),在配置文件中進(jìn)行規(guī)則配置。例如:

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

在 YAML 中:

---
rules:
  eqeqeq: off
  curly: error
  quotes:
    - error
    - double

配置定義在插件中的一個(gè)規(guī)則的時(shí)候,你必須使用 插件名/規(guī)則ID 的形式。比如:

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

在 YAML 中:

---
plugins:
  - plugin1
rules:
  eqeqeq: 0
  curly: error
  quotes:
    - error
    - "double"
  plugin1/rule1: error

在這些配置文件中,規(guī)則 plugin1/rule1 表示來自插件 plugin1rule1 規(guī)則。你也可以使用這種格式的注釋配置,比如:

/* eslint "plugin1/rule1": "error" */

注意:當(dāng)指定來自插件的規(guī)則時(shí),確保刪除 eslint-plugin- 前綴。ESLint 在內(nèi)部只使用沒有前綴的名稱去定位規(guī)則。

使用行注釋禁用規(guī)則

可以在你的文件中使用以下格式的塊注釋來臨時(shí)禁止規(guī)則出現(xiàn)警告:

/* eslint-disable */

alert('foo');

/* eslint-enable */

你也可以對(duì)指定的規(guī)則啟用或禁用警告:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */


如果在整個(gè)文件范圍內(nèi)禁止規(guī)則出現(xiàn)警告,將 /* eslint-disable */ 塊注釋放在文件頂部:

/* eslint-disable */

alert('foo');

你也可以對(duì)整個(gè)文件啟用或禁用警告:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert('foo');

可以在你的文件中使用以下格式的行注釋在某一特定的行上禁用所有規(guī)則:

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

在某一特定的行上禁用某個(gè)指定的規(guī)則:

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

在某個(gè)特定的行上禁用多個(gè)規(guī)則:

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

上面的所有方法同樣適用于插件規(guī)則。例如,禁止 eslint-plugin-examplerule-name 規(guī)則,把插件名(example)和規(guī)則名(rule-name)結(jié)合為 example/rule-name

foo(); // eslint-disable-line example/rule-name

注意:為文件的某部分禁用警告的注釋,告訴 ESLint 不要對(duì)禁用的代碼報(bào)告規(guī)則的沖突。ESLint 仍解析整個(gè)文件,然而,禁用的代碼仍需要是有效的 JavaScript 語(yǔ)法。

添加分享配置

ESLint 支持在配置文件添加共享設(shè)置。你可以添加 settings 對(duì)象到配置文件,它將提供給每一個(gè)將被執(zhí)行的規(guī)則。如果你想添加的自定義規(guī)則而且使它們可以訪問到相同的信息,這將會(huì)很有用,并且很容易配置。

在 JSON 中:

{
    "settings": {
        "sharedData": "Hello"
    }
}

在 YAML 中:

---
  settings:
    sharedData: "Hello"

使用配置文件

有兩種方式可以使用配置文件。第一種是將文件保存到你喜歡的地方,然后將它的位置使用 -c 選項(xiàng)傳遞命令行,比如:

eslint -c myconfig.json myfiletotest.js

第二種方式是通過 .eslintrc.*package.json。ESLint 將自動(dòng)在要檢測(cè)的文件目錄里尋找它們,緊接著是父級(jí)目錄,一直到文件系統(tǒng)的根目錄。當(dāng)你想對(duì)一個(gè)項(xiàng)目的不同部分的使用不同配置,或當(dāng)你希望別人能夠直接使用 ESLint,而無需記住要在配置文件中傳遞什么,這種方式就很有用。

每種情況,配置文件都會(huì)覆蓋默認(rèn)設(shè)置。

配置文件文件格式

ESLint 支持幾種格式的配置文件:

  • JavaScript - 使用 .eslintrc.js 然后輸出一個(gè)配置對(duì)象。
  • YAML - 使用 .eslintrc.yaml.eslintrc.yml 去定義配置的結(jié)構(gòu)。
  • JSON - 使用 .eslintrc.json 去定義配置的結(jié)構(gòu),ESLint 的 JSON 文件允許 JavaScript 風(fēng)格的注釋。
  • (不推薦) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 里創(chuàng)建一個(gè) eslintConfig屬性,在那里定義你的配置。

如果同一個(gè)目錄下有多個(gè)配置文件,ESLint 只會(huì)使用一個(gè)。優(yōu)先級(jí)順序如下:

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

配置的層級(jí)和繼承

當(dāng)使用 .eslintrc.*package.json文件的配置時(shí),你可以利用層疊配置。例如,假如你有以下結(jié)構(gòu):

your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

層疊配置使用離要檢測(cè)的文件最近的 .eslintrc文件作為最高優(yōu)先級(jí),然后才是父目錄里的配置文件,等等。當(dāng)你在這個(gè)項(xiàng)目中允許 ESLint 時(shí),lib/下面的所有文件將使用項(xiàng)目根目錄里的 .eslintrc 文件作為它的配置文件。當(dāng) ESLint 遍歷到 test/ 目錄,your-project/.eslintrc 之外,它還會(huì)用到 your-project/tests/.eslintrc。所以 your-project/tests/test.js 是基于它的目錄層次結(jié)構(gòu)中的兩個(gè).eslintrc 文件的組合,并且離的最近的一個(gè)優(yōu)先。通過這種方式,你可以有項(xiàng)目級(jí) ESLint 設(shè)置,也有覆蓋特定目錄的 ESLint 設(shè)置。

同樣的,如果在根目錄的 package.json 文件中有一個(gè) eslintConfig 字段,其中的配置將使用于所有子目錄,但是當(dāng) tests 目錄下的 .eslintrc 文件中的規(guī)則與之發(fā)生沖突時(shí),就會(huì)覆蓋它。

your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

如果同一目錄下 .eslintrcpackage.json 同時(shí)存在,.eslintrc 優(yōu)先級(jí)高會(huì)被使用,package.json 文件將不會(huì)被使用。

注意:如果在你的主目錄下有一個(gè)自定義的配置文件 (~/.eslintrc) ,如果沒有其它配置文件時(shí)它才會(huì)被使用。因?yàn)閭€(gè)人配置將適用于用戶目錄下的所有目錄和文件,包括第三方的代碼,當(dāng) ESLint 運(yùn)行時(shí)可能會(huì)導(dǎo)致問題。

默認(rèn)情況下,ESLint 會(huì)在所有父級(jí)目錄里尋找配置文件,一直到根目錄。如果你想要你所有項(xiàng)目都遵循一個(gè)特定的約定時(shí),這將會(huì)很有用,但有時(shí)候會(huì)導(dǎo)致意想不到的結(jié)果。為了將 ESLint 限制到一個(gè)特定的項(xiàng)目,在你項(xiàng)目根目錄下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下設(shè)置 "root": true。ESLint 一旦發(fā)現(xiàn)配置文件中有 "root": true,它就會(huì)停止在父級(jí)目錄中尋找。

{
    "root": true
}

在 YAML 中:

---
  root: true

例如,projectAlib/ 目錄下的 .eslintrc 文件中設(shè)置了 "root": true。這種情況下,當(dāng)檢測(cè) main.js 時(shí),lib/ 下的配置將會(huì)被使用,projectA/ 下的 .eslintrc 將不會(huì)被使用。

home
└── user
    ├── .eslintrc <- Always skipped if other configs present
    └── projectA
        ├── .eslintrc  <- Not used
        └── lib
            ├── .eslintrc  <- { "root": true }
            └── main.js

完整的配置層次結(jié)構(gòu),從最高優(yōu)先級(jí)最低的優(yōu)先級(jí),如下:

  1. 行內(nèi)配置
    1. /*eslint-disable*//*eslint-enable*/
    2. /*global*/
    3. /*eslint*/
    4. /*eslint-env*/
  2. 命令行選項(xiàng):
    1. --global
    2. --rule
    3. --env
    4. -c、--config
  3. 項(xiàng)目級(jí)配置:
    1. 與要檢測(cè)的文件在同一目錄下的 .eslintrc.*package.json 文件
    2. 繼續(xù)在父級(jí)目錄尋找 .eslintrcpackage.json文件,直到根目錄(包括根目錄)或直到發(fā)現(xiàn)一個(gè)有"root": true的配置。
    3. 如果不是(1)到(3)中的任何一種情況,退回到 ~/.eslintrc 中自定義的默認(rèn)配置。

擴(kuò)展配置文件

一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承。

extends 屬性值可以是:

  • 在配置中指定的一個(gè)字符串
  • 字符串?dāng)?shù)組:每個(gè)配置繼承它前面的配置

ESLint 遞歸地進(jìn)行擴(kuò)展配置,所以一個(gè)基礎(chǔ)的配置也可以有一個(gè) extends 屬性。

rules 屬性可以做下面的任何事情以擴(kuò)展(或覆蓋)規(guī)則:

  • 啟用額外的規(guī)則
  • 改變繼承的規(guī)則級(jí)別而不改變它的選項(xiàng):
    • 基礎(chǔ)配置:"eqeqeq": ["error", "allow-null"]
    • 派生的配置:"eqeqeq": "warn"
    • 最后生成的配置:"eqeqeq": ["warn", "allow-null"]
  • 覆蓋基礎(chǔ)配置中的規(guī)則的選項(xiàng)
    • 基礎(chǔ)配置:"quotes": ["error", "single", "avoid-escape"]
    • 派生的配置:"quotes": ["error", "single"]
    • 最后生成的配置:"quotes": ["error", "single"]

使用 eslint:recommended

值為 "eslint:recommended"extends 屬性啟用一系列核心規(guī)則,這些規(guī)則報(bào)告一些常見問題,在 規(guī)則頁(yè)面 中被標(biāo)記為 。這個(gè)推薦的子集只能在 ESLint 主要版本進(jìn)行更新。

如果你的配置集成了推薦的規(guī)則:在你升級(jí)到 ESLint 新的主版本之后,在你使用命令行--fix 選項(xiàng)之前,檢查一下報(bào)告的問題,這樣你就知道一個(gè)新的可修復(fù)的推薦的規(guī)則將更改代碼。

eslint --init 命令可以創(chuàng)建一個(gè)配置,這樣你就可以繼承推薦的規(guī)則。

JavaScript 格式的一個(gè)配置文件的例子:

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
        "no-console": "off",
    }
}

使用可共享的配置包

可共享的配置 是一個(gè) npm 包,它輸出一個(gè)配置對(duì)象。要確保這個(gè)包安裝在 ESLint 能請(qǐng)求到的目錄下。

extends 屬性值可以省略包名的前綴 eslint-config-

eslint --init 命令可以創(chuàng)建一個(gè)配置,這樣你就可以擴(kuò)展一個(gè)流行的風(fēng)格指南(比如,eslint-config-standard)。

YAML 格式的一個(gè)配置文件的例子:

extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn

使用插件中的配置

插件 是一個(gè) npm 包,通常輸出規(guī)則。一些插件也可以輸出一個(gè)或多個(gè)命名的 配置。要確保這個(gè)包安裝在 ESLint 能請(qǐng)求到的目錄下。

plugins 屬性值 可以省略包名的前綴 eslint-plugin-。

extends 屬性值可以由以下組成:

  • plugin:
  • 包名 (省略了前綴,比如,react)
  • /
  • 配置名稱 (比如 recommended)

JSON 格式的一個(gè)配置文件的例子:

{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

使用一個(gè)配置文件

extends 屬性值可以是基本配置文件的絕對(duì)路徑或相對(duì)路徑。

ESLint 解析基本配置文件的相對(duì)路徑相對(duì)你你使用的配置文件,除非那個(gè)文件在你的主目錄或非 ESLint 安裝目錄的父級(jí)目錄。在這些情況下,ESLint 解析基本配合文件的相對(duì)路徑相對(duì)于被檢測(cè)的 項(xiàng)目目錄(尤其是當(dāng)前工作目錄)。

JSON 格式的一個(gè)配置文件的例子:

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}

使用 eslint:all

extends 屬性值可以是 "eslint:all",啟用當(dāng)前安裝的 ESLint 中所有的核心規(guī)則。這些規(guī)則可以在 ESLint 的任何版本進(jìn)行更改。

重要:這些配置 不推薦在產(chǎn)品中使用,因?yàn)樗S著 ESLint 版本進(jìn)行更改。使用的話,請(qǐng)自己承擔(dān)風(fēng)險(xiǎn)。

如果你配置 ESLint 升級(jí)時(shí)自動(dòng)地啟用新規(guī)則,當(dāng)源碼沒有任何改變時(shí),ESLint 可以報(bào)告新問題,因此任何 ESLint 的新的小版本好像有破壞性的更改。

當(dāng)你決定在一個(gè)項(xiàng)目上使用的規(guī)則和選項(xiàng),尤其是如果你很少覆蓋選項(xiàng)或禁用規(guī)則,你可能啟用所有核心規(guī)則作為一種快捷方式使用。規(guī)則的默認(rèn)選項(xiàng)并不是 ESLint 推薦的(例如,quotes 規(guī)則的默認(rèn)選項(xiàng)并不意味著雙引號(hào)要比單引號(hào)好)。

如果你的配置擴(kuò)展了所有的核心規(guī)則:在你升級(jí)到一個(gè)新的大或小的 ESLint 版本,在你使用命令行--fix 選項(xiàng)之前,檢查一下報(bào)告的問題,這樣你就知道一個(gè)新的可修復(fù)的規(guī)則將更改代碼。

JavaScript 格式的一個(gè)配置文件的例子:

module.exports = {
    "extends": "eslint:all",
    "rules": {
        // override default options
        "comma-dangle": ["error", "always"],
        "indent": ["error", 2],
        "no-cond-assign": ["error", "always"],

        // disable now, but enable in the future
        "one-var": "off", // ["error", "never"]

        // disable
        "init-declarations": "off",
        "no-console": "off",
        "no-inline-comments": "off",
    }
}

基于 glob 模式的配置

有時(shí),你可能需要更精細(xì)的配置,比如,如果同一個(gè)目錄下的文件需要有不同的配置。因此,你可以在配置中使用 overrides 鍵,它只適用于匹配特定的 glob 模式的文件,使用你在命令行上傳遞的格式 (e.g., app/**/*.test.js)。

怎么工作

  • Glob 模式覆蓋只能在配置文件 (.eslintrc.*package.json) 中進(jìn)行配置。
  • 模式應(yīng)用于相對(duì)于配置文件的目錄的文件路徑。 比如,如果你的配置文件的路徑為 /Users/john/workspace/any-project/.eslintrc.js 而你要檢測(cè)的路徑為 /Users/john/workspace/any-project/lib/util.js,那么你在 .eslintrc.js 中提供的模式是相對(duì)于 lib/util.js 來執(zhí)行的.
  • 在相同的配置文件中,Glob 模式覆蓋比其他常規(guī)配置具有更高的優(yōu)先級(jí)。 同一個(gè)配置中的多個(gè)覆蓋將按順序被應(yīng)用。也就是說,配置文件中的最后一個(gè)覆蓋會(huì)有最高優(yōu)先級(jí)。
  • 一個(gè) glob 特定的配置幾乎與 ESLint 的其他配置相同。覆蓋塊可以包含常規(guī)配置中的除了 extends、overridesroot 之外的其他任何有效配置選項(xiàng),
  • 可以在單個(gè)覆蓋塊中提供多個(gè) glob 模式。一個(gè)文件必須匹配至少一個(gè)配置中提供的模式。
  • 覆蓋塊也可以指定從匹配中排除的模式。如果一個(gè)文件匹配了任何一個(gè)排除模式,該配置將不再被應(yīng)用。

相對(duì) glob 模式

project-root
├── app
│   ├── lib
│   │   ├── foo.js
│   │   ├── fooSpec.js
│   ├── components
│   │   ├── bar.js
│   │   ├── barSpec.js
│   ├── .eslintrc.json
├── server
│   ├── server.js
│   ├── serverSpec.js
├── .eslintrc.json

app/.eslintrc.json 文件中的配置定義了 glob 模式 **/*Spec.js。該模式是相對(duì) app/.eslintrc.json 的基本目錄的。因此,該模式將匹配 app/lib/fooSpec.jsapp/components/barSpec.js不匹配 server/serverSpec.js。如果你在項(xiàng)目根目錄下的 .eslintrc.json 文件中定義了同樣的模式,它將匹配這三個(gè) *Spec 文件。

配置示例

在你的 .eslintrc.json 文件中:

{
  "rules": {
    "quotes": [ 2, "double" ]
  },

  "overrides": [
    {
      "files": [ "bin/*.js", "lib/*.js" ],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": [ 2, "single" ]
      }
    }
  ]
}

在配置文件中注釋

JSON 和 YAML 配置文件格式都支持注釋 ( package.json 文件不應(yīng)該包括注釋)。你可以在其他類型的文件中使用 JavaScript 風(fēng)格的注釋或使用 YAML 風(fēng)格的注釋,ESLint 會(huì)忽略它們。這允許你的配置更加人性化。例如:

{
    "env": {
        "browser": true
    },
    "rules": {
        // Override our default settings just for this directory
        "eqeqeq": "warn",
        "strict": "off"
    }
}

指定需要檢查的文件擴(kuò)展名

目前,告訴 ESLint 哪個(gè)文件擴(kuò)展名要檢測(cè)的唯一方法是使用 --ext 命令行選項(xiàng)指定一個(gè)逗號(hào)分隔的擴(kuò)展名列表。注意,該標(biāo)記只在與目錄一起使用時(shí)有效,如果使用文件名或 glob 模式,它將會(huì)被忽略。

忽略文件和目錄

你可以通過在項(xiàng)目根目錄創(chuàng)建一個(gè) .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。.eslintignore 文件是一個(gè)純文本文件,其中的每一行都是一個(gè) glob 模式表明哪些路徑應(yīng)該忽略檢測(cè)。例如,以下將忽略所有的 JavaScript 文件:

**/*.js

當(dāng) ESLint 運(yùn)行時(shí),在確定哪些文件要檢測(cè)之前,它會(huì)在當(dāng)前工作目錄中查找一個(gè) .eslintignore 文件。如果發(fā)現(xiàn)了這個(gè)文件,當(dāng)遍歷目錄時(shí),將會(huì)應(yīng)用這些偏好設(shè)置。一次只有一個(gè) .eslintignore 文件會(huì)被使用,所以,不是當(dāng)前工作目錄下的 .eslintignore 文件將不會(huì)被用到。

Globs 匹配使用 node-ignore,所以大量可用的特性有:

  • # 開頭的行被當(dāng)作注釋,不影響忽略模式。
  • 路徑是相對(duì)于 .eslintignore 的位置或當(dāng)前工作目錄。這也會(huì)影響通過 --ignore-pattern傳遞的路徑。
  • 忽略模式同 .gitignore 規(guī)范
  • ! 開頭的行是否定模式,它將會(huì)重新包含一個(gè)之前被忽略的模式。

除了 .eslintignore 文件中的模式,ESLint總是忽略 /node_modules/*/bower_components/* 中的文件。

例如:把下面 .eslintignore 文件放到當(dāng)前工作目錄里,將忽略 node_modules,bower_components 以及 build/ 目錄下除了 build/index.js 的所有文件。

# /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

使用備用文件

如果相比于當(dāng)前工作目錄下 .eslintignore 文件,你更想使用一個(gè)不同的文件,你可以在命令行使用 --ignore-path 選項(xiàng)指定它。例如,你可以使用 .jshintignore 文件,因?yàn)樗邢嗤母袷剑?/p>

eslint --ignore-path .jshintignore file.js

你也可以使用你的 .gitignore 文件:

eslint --ignore-path .gitignore file.js

任何文件只要滿足標(biāo)準(zhǔn)忽略文件格式都可以用。記住,指定 --ignore-path 意味著任何現(xiàn)有的 .eslintignore 文件將不被使用。請(qǐng)注意,.eslintignore 中的匹配規(guī)則比 .gitignore 中的更嚴(yán)格。

在 package.json 中使用 eslintConfig

{
  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
      "env": {
          "browser": true,
          "node": true
      }
  },
  "eslintIgnore": ["hello.js", "world.js"]
}

忽略文件告警

當(dāng)您將目錄傳遞給 ESLint 時(shí),文件和目錄將被忽略。如果將特定文件傳遞給ESLint,則會(huì)看到一條警告,指示該文件已被跳過。例如,假設(shè)你有一個(gè) .eslintignore 文件,如下所示:

foo.js

然后,您執(zhí)行:

eslint foo.js

您將會(huì)看到以下告警:

foo.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override.

? 1 problem (0 errors, 1 warning)

發(fā)生此消息是因?yàn)镋SLint不確定是否要檢查該文件。如消息所示,您可以使用 --no-ignore 省略使用忽略規(guī)則。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容