設定檔 (已棄用)
您可以將 ESLint 專案設定放在設定檔中。您可以包含內建規則、您希望如何強制執行這些規則、具有自訂規則的外掛程式、可分享的設定、您希望規則套用至哪些檔案等等。
設定檔格式
ESLint 支援多種格式的設定檔
- JavaScript - 使用
.eslintrc.js並匯出包含您的設定的物件。 - JavaScript (ESM) - 當在 JavaScript 套件中執行 ESLint 時，請使用
.eslintrc.cjs，這些套件在其package.json中指定"type":"module"。請注意，ESLint 目前不支援 ESM 設定。 - YAML - 使用
.eslintrc.yaml或.eslintrc.yml來定義設定結構。 - JSON - 使用
.eslintrc.json來定義設定結構。ESLint 的 JSON 檔案也允許 JavaScript 樣式的註解。 - package.json - 在您的
package.json檔案中建立eslintConfig屬性，並在那裡定義您的設定。
如果同一個目錄中有多個設定檔，ESLint 只會使用一個。優先順序如下
.eslintrc.js.eslintrc.cjs.eslintrc.yaml.eslintrc.yml.eslintrc.jsonpackage.json
使用設定檔
有兩種方式可以使用設定檔。
第一種使用設定檔的方式是透過 .eslintrc.* 和 package.json 檔案。ESLint 會自動在要檢查的檔案的目錄中尋找它們，並在連續的父目錄中向上搜尋，直到檔案系統的根目錄 (/)、目前使用者的主目錄 (~/)，或指定 root: true 時為止。請參閱下方的階層式疊加和層級以取得更多詳細資訊。當您想要專案的不同部分使用不同的設定，或者當您希望其他人能夠直接使用 ESLint 而無需記住傳入設定檔時，設定檔會很有用。
第二種使用設定檔的方式是將檔案儲存到您想要的任何位置，並使用 --config 選項將其位置傳遞給 CLI，例如
eslint -c myconfig.json myfiletotest.js
如果您使用一個設定檔，並希望 ESLint 忽略任何 .eslintrc.* 檔案，請務必同時使用 --no-eslintrc 和 --config 旗標。
以下是一個 JSON 設定檔範例，它使用 typescript-eslint 解析器來支援 TypeScript 語法
{
"root": true,
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "project": ["./tsconfig.json"] },
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/strict-boolean-expressions": [
2,
{
"allowString" : false,
"allowNumber" : false
}
]
},
"ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}
設定檔中的註解
JSON 和 YAML 設定檔格式都支援註解 (package.json 檔案不應包含註解)。您可以為 JSON 檔案使用 JavaScript 樣式的註解，為 YAML 檔案使用 YAML 樣式的註解。ESLint 會安全地忽略設定檔中的註解。這可讓您的設定檔更人性化。
對於 JavaScript 樣式的註解
{
"env": {
"browser": true
},
"rules": {
// Override our default settings just for this directory
"eqeqeq": "warn",
"strict": "off"
}
}
對於 YAML 樣式的註解
env:
browser: true
rules:
# Override default settings
eqeqeq: warn
strict: off
新增共用設定
ESLint 支援將共用設定新增到設定檔中。外掛程式使用 settings 來指定應在所有規則中共用的資訊。您可以將 settings 物件新增到 ESLint 設定檔中，它會提供給每個執行的規則。如果您要新增自訂規則，並希望它們能夠存取相同的資訊且易於設定，這可能會很有用。
在 JSON 中
{
"settings": {
"sharedData": "Hello"
}
}
在 YAML 中
---
settings:
sharedData: "Hello"
階層式疊加和層級
當使用 .eslintrc.* 和 package.json 檔案進行設定時，您可以利用設定階層式疊加。假設您的專案具有以下結構
your-project
├── .eslintrc.json
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.json
└── test.js
設定階層式疊加根據要檢查的檔案的位置運作。如果與要檢查的檔案位於同一個目錄中有 .eslintrc 檔案，則該設定優先。然後，ESLint 會向上搜尋目錄結構，合併沿途找到的任何 .eslintrc 檔案，直到到達具有 root: true 的 .eslintrc 檔案或根目錄為止。
同樣地，如果根目錄中有一個包含 eslintConfig 欄位的 package.json 檔案，則它描述的設定會套用至其下方的所有子目錄。但是，tests/ 目錄中 .eslintrc 檔案描述的設定會覆寫衝突的規範。
your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.json
└── test.js
如果在同一個目錄中找到 .eslintrc 和 package.json 檔案，則 .eslintrc 優先，並且不會使用 package.json 檔案。
預設情況下，ESLint 會在所有父資料夾中搜尋設定檔，直到根目錄為止。如果您希望所有專案都遵循特定慣例，這可能會很有用，但有時可能會導致意外的結果。若要將 ESLint 限制在特定專案，請在 .eslintrc.* 檔案或 package.json 檔案的 eslintConfig 欄位，或專案根層級的 .eslintrc.* 檔案中放置 "root": true。ESLint 在找到具有 "root": true 的設定後，就會停止在父資料夾中搜尋。
{
"root": true
}
在 YAML 中
---
root: true
例如，考慮 projectA，它在 lib/ 目錄中的 .eslintrc 檔案中設定了 "root": true。在這種情況下，在檢查 main.js 時，會使用 lib/ 內的設定，但不會使用 projectA/ 中的 .eslintrc 檔案。
home
└── user
└── projectA
├── .eslintrc.json <- Not used
└── lib
├── .eslintrc.json <- { "root": true }
└── main.js
完整的設定層級結構，從最高到最低優先順序，如下所示
- 內聯設定
/*eslint-disable*/和/*eslint-enable*//*global*//*eslint*//*eslint-env*/
- 命令列選項 (或 CLIEngine 等效項)
--global--rule--env-c、--config
- 專案層級設定
- 與要檢查的檔案位於同一個目錄中的
.eslintrc.*或package.json檔案 - 繼續在父目錄中搜尋
.eslintrc.*和package.json檔案，直到根目錄或找到具有"root": true的設定為止。
- 與要檢查的檔案位於同一個目錄中的
請注意，您慣用作業系統上目前使用者的主目錄 (~/) 在此情境中也被視為根目錄，並且搜尋設定檔也會在那裡停止。並且隨著從 8.0.0 版本向前移除對個人設定檔的支援，該目錄中存在的設定檔將被忽略。
擴充設定檔
設定檔一旦擴充，就可以繼承另一個設定檔的所有特性 (包括規則、外掛程式和語言選項) 並修改所有選項。因此，有三種設定，定義如下
- 基礎設定：被擴充的設定。
- 衍生設定：擴充基礎設定的設定。
- 產生的實際設定：將衍生設定合併到基礎設定中的結果。
extends 屬性值可以是
- 一個字串，指定一個設定 (設定檔的路徑、可分享設定的名稱、
eslint:recommended或eslint:all)。 - 一個字串陣列，其中每個額外的設定都會擴充前面的設定。
ESLint 會遞迴地擴充設定，因此基礎設定也可以具有 extends 屬性。extends 屬性中的相對路徑和可分享設定名稱會從它們出現的設定檔的位置解析。
可以從設定名稱中省略 eslint-config- 前綴。例如，airbnb 會解析為 eslint-config-airbnb。
rules 屬性可以執行以下任何操作來擴充 (或覆寫) 規則集
- 啟用額外規則
- 變更繼承規則的嚴重性，而不變更其選項
- 基礎設定：
"eqeqeq": ["error", "allow-null"] - 衍生設定：
"eqeqeq": "warn" - 產生的實際設定：
"eqeqeq": ["warn", "allow-null"]
- 基礎設定：
- 覆寫來自基礎設定的規則選項
- 基礎設定：
"quotes": ["error", "single", "avoid-escape"] - 衍生設定：
"quotes": ["error", "single"] - 產生的實際設定：
"quotes": ["error", "single"]
- 基礎設定：
- 覆寫以物件形式給定的來自基礎設定的規則選項
- 基礎設定：
"max-lines": ["error", { "max": 200, "skipBlankLines": true, "skipComments": true }] - 衍生設定：
"max-lines": ["error", { "max": 100 }] - 產生的實際設定：
"max-lines": ["error", { "max": 100 }]，其中skipBlankLines和skipComments預設為false
- 基礎設定：
使用可分享的設定套件
可分享的設定是一個 npm 套件，它匯出設定物件。請確保您已將套件安裝在您的專案根目錄中，以便 ESLint 可以 require 它。
extends 屬性值可以省略套件名稱的 eslint-config- 前綴。
npm init @eslint/config 命令可以建立設定，以便您可以擴充流行的樣式指南 (例如，eslint-config-standard)。
YAML 格式的設定檔範例
extends: standard
rules:
comma-dangle:
- error
- always
no-empty: warn
使用 eslint:recommended
在 extends 屬性中使用 "eslint:recommended" 會啟用核心規則的子集，這些規則會回報常見問題 (這些規則在規則頁面上以勾號 (建議) 標識)。
以下是擴充 eslint:recommended 並覆寫一些設定選項的範例
JavaScript 格式的設定檔範例
module.exports = {
"extends": "eslint:recommended",
"rules": {
// enable additional rules
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
// override configuration set by extending "eslint:recommended"
"no-empty": "warn",
"no-cond-assign": ["error", "always"],
// disable rules from base configurations
"for-direction": "off",
}
}
使用來自外掛程式的設定
外掛程式是一個 npm 套件，可以為 ESLint 新增各種擴充功能。外掛程式可以執行許多功能，包括但不限於新增新規則和匯出可分享的設定。請確保套件已安裝在 ESLint 可以 require 它的目錄中。
plugins 屬性值可以省略套件名稱的 eslint-plugin- 前綴。
extends 屬性值可以包含
外掛程式- 套件名稱 (您可以從中省略前綴，例如，
react是eslint-plugin-react的簡寫) /- 設定名稱 (例如，
recommended)
JSON 格式的設定檔範例
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"react/no-set-state": "off"
}
}
使用設定檔
extends 屬性值可以是基礎設定檔的絕對或相對路徑。ESLint 相對於使用它的設定檔來解析基礎設定檔的相對路徑。
JSON 格式的設定檔範例
{
"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"，以啟用目前安裝的 ESLint 版本中的所有核心規則。核心規則集可能會在 ESLint 的任何次要或主要版本中變更。
重要：此設定不建議用於生產環境，因為它會隨著 ESLint 的每個次要和主要版本而變更。請自行承擔風險使用它。
您可以啟用所有核心規則作為探索規則和選項的捷徑，同時您決定專案的設定，特別是當您很少覆寫選項或停用規則時。規則的預設選項並非 ESLint 的認可 (例如，quotes 規則的預設選項並不表示雙引號優於單引號)。
如果您的設定擴充了 eslint:all，在您升級到較新的 ESLint 主要或次要版本後，請在使用 命令列上的 --fix 選項之前，先檢查回報的問題，以便您知道新的可修復規則是否會對程式碼進行變更。
JavaScript 格式的設定檔範例
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 模式的設定
v4.1.0+。 有時需要更精細控制的設定，例如，如果同一個目錄中檔案的設定必須不同。在這種情況下，您可以提供 overrides 金鑰下的設定，這些設定僅適用於符合特定 glob 模式的檔案，使用與您在命令列上傳遞的格式相同的格式 (例如，app/**/*.test.js)。
覆寫中的 Glob 模式使用 minimatch 語法。
覆寫如何運作？
可以透過使用 overrides 金鑰，在您的設定中根據檔案 glob 模式覆寫設定。使用 overrides 金鑰的範例如下
在您的 .eslintrc.json 中
{
"rules": {
"quotes": ["error", "double"]
},
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
}
]
}
以下是覆寫在設定檔中的運作方式
- 模式會針對相對於設定檔目錄的檔案路徑套用。例如，如果您的設定檔的路徑為
/Users/john/workspace/any-project/.eslintrc.js，而您要檢查的檔案的路徑為/Users/john/workspace/any-project/lib/util.js，則在.eslintrc.js中提供的模式會針對相對路徑lib/util.js執行。 - Glob 模式覆寫的優先順序高於同一個設定檔中的常規設定。同一個設定中的多個覆寫會依序套用。也就是說，設定檔中的最後一個覆寫區塊始終具有最高的優先順序。
- Glob 特定設定的運作方式幾乎與任何其他 ESLint 設定相同。覆寫區塊可以包含在常規設定中有效的任何設定選項，但
root和ignorePatterns除外。- Glob 特定設定可以具有
extends設定，但延伸設定中的root屬性會被忽略。延伸設定中的ignorePatterns屬性僅適用於 glob 特定設定比對的檔案。 - 只有在父設定和子設定的 glob 模式都比對時，才會套用巢狀
overrides設定。當延伸設定具有overrides設定時，情況也是如此。
- Glob 特定設定可以具有
- 可以在單個覆寫區塊中提供多個 glob 模式。檔案必須符合至少一個提供的模式，設定才會套用。
- 覆寫區塊也可以指定要從比對中排除的模式。如果檔案符合任何排除的模式，則不會套用設定。
相對 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。此模式相對於 app/.eslintrc.json 的基礎目錄。因此，此模式會比對 app/lib/fooSpec.js 和 app/components/barSpec.js，但不比對 server/serverSpec.js。如果您在 project-root 資料夾中的 .eslintrc.json 檔案中定義了相同的模式，它將比對所有三個 *Spec 檔案。
如果透過 --config CLI 選項提供設定，則設定中的 glob 模式相對於目前的工作目錄，而不是給定設定的基礎目錄。例如，如果存在 --config configs/.eslintrc.json，則設定中的 glob 模式相對於 . 而不是 ./configs。
指定要檢查的目標檔案
如果您使用 CLI 指定目錄 (例如，eslint lib)，ESLint 會在目錄中搜尋要檢查的目標檔案。目標檔案是 *.js 或符合任何 overrides 條目的檔案 (但排除任何以 files 結尾為 * 的條目)。
如果您指定了 --ext 命令列選項以及目錄，則目標檔案僅是具有指定檔案副檔名的檔案，而與 overrides 條目無關。
個人設定檔 (已棄用)
⚠️ 此功能已棄用。此功能已在 8.0.0 版本中移除。如果您想繼續使用個人設定檔，請使用 --config CLI 選項。有關此決策的更多資訊，請參閱 RFC 28 和 RFC 32。
~/ 指的是 您慣用作業系統上目前使用者的主目錄。此處指的個人設定檔是 ~/.eslintrc.* 檔案，目前它的處理方式與其他設定檔不同。
ESLint 如何尋找個人設定檔？
如果 eslint 在專案中找不到任何設定檔，eslint 會載入 ~/.eslintrc.* 檔案。
如果 eslint 在專案中找到設定檔，即使 ~/.eslintrc.* 檔案位於專案目錄的父目錄中，eslint 也會忽略它。
個人設定檔如何運作？
~/.eslintrc.* 檔案的行為與常規設定檔類似，但有一些例外
~/.eslintrc.* 檔案從 ~/node_modules/ 載入可分享的設定和自訂解析器 – 類似於 require() – 在使用者的主目錄中。請注意，它不會載入全域安裝的套件。
~/.eslintrc.* 檔案預設從 $CWD/node_modules 載入外掛程式，以便唯一識別外掛程式。如果您想將外掛程式與 ~/.eslintrc.* 檔案一起使用，則必須在每個專案中本機安裝外掛程式。或者，您可以使用 --resolve-plugins-relative-to CLI 選項來變更 ESLint 載入外掛程式的位置。