版本

設定檔 (已棄用)

您可以將您的 ESLint 專案設定放在設定檔中。您可以包含內建規則、您希望如何強制執行這些規則、具有自訂規則的外掛程式、可分享的設定、您希望規則套用的檔案等等。

設定檔格式

ESLint 支援多種格式的設定檔

  • JavaScript - 使用 .eslintrc.js 並匯出包含您的設定的物件。
  • JavaScript (ESM) - 當在 JavaScript 套件中執行 ESLint 時,若該套件在其 package.json 中指定 "type":"module",則使用 .eslintrc.cjs。請注意,ESLint 目前不支援 ESM 設定。
  • YAML - 使用 .eslintrc.yaml.eslintrc.yml 來定義設定結構。
  • JSON - 使用 .eslintrc.json 來定義設定結構。ESLint 的 JSON 檔案也允許 JavaScript 樣式的註解。
  • package.json - 在您的 package.json 檔案中建立一個 eslintConfig 屬性,並在那裡定義您的設定。

如果同一目錄中有多個設定檔,ESLint 只會使用一個。優先順序如下:

  1. .eslintrc.js
  2. .eslintrc.cjs
  3. .eslintrc.yaml
  4. .eslintrc.yml
  5. .eslintrc.json
  6. package.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

設定級聯的工作方式基於要進行靜態程式碼分析的檔案位置。如果與要進行靜態程式碼分析的檔案位於同一目錄中,則該設定的優先順序較高。然後,ESLint 會搜尋目錄結構,合併它沿途找到的任何 .eslintrc 檔案,直到找到 root: true.eslintrc 檔案或根目錄。

同樣地,如果根目錄中有一個 package.json 檔案,其中包含 eslintConfig 欄位,則它所描述的設定會套用至其下的所有子目錄。但是,tests/ 目錄中 .eslintrc 檔案描述的設定會覆寫衝突的規格。

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

如果在同一個目錄中找到 .eslintrcpackage.json 檔案,則 .eslintrc 的優先順序較高,並且不會使用 package.json 檔案。

預設情況下,ESLint 會在所有父資料夾中搜尋設定檔,直到根目錄。如果您希望所有專案都遵循某個慣例,這可能會很有用,但有時可能會導致意想不到的結果。若要將 ESLint 限制為特定專案,請將 "root": true 放在 .eslintrc.* 檔案中,或放在 package.json 檔案的 eslintConfig 欄位中,或放在專案根層級的 .eslintrc.* 檔案中。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

完整的設定階層結構 (從最高到最低優先順序) 如下:

  1. 內嵌設定
    1. /*eslint-disable*//*eslint-enable*/
    2. /*global*/
    3. /*eslint*/
    4. /*eslint-env*/
  2. 命令列選項 (或 CLIEngine 等效選項)
    1. --global
    2. --rule
    3. --env
    4. -c--config
  3. 專案層級設定
    1. 與要進行靜態程式碼分析的檔案位於同一目錄中的 .eslintrc.*package.json 檔案
    2. 繼續在祖先目錄中搜尋 .eslintrc.*package.json 檔案,直到根目錄或找到具有 "root": true 的設定為止。

請注意,您偏好的作業系統上目前使用者的主目錄 (~/) 在此內容中也被視為根目錄,並且搜尋設定檔也會在那裡停止。而且隨著 從 8.0.0 版本開始移除對個人設定檔的支援,該目錄中的設定檔會被忽略。

擴充設定檔

設定檔一旦擴充,就可以繼承另一個設定檔的所有特性 (包括規則、外掛程式和語言選項),並修改所有選項。因此,有三個設定,如下所定義

  • 基本設定:擴充的設定。
  • 衍生設定:擴充基本設定的設定。
  • 產生的實際設定:將衍生設定合併到基本設定中的結果。

extends 屬性值為下列其中一項:

  • 一個字串,指定設定 (設定檔的路徑、可分享設定的名稱、eslint:recommendedeslint: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 }] 其中 skipBlankLinesskipComments 預設為 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 屬性值可以包含

  • 外掛程式
  • 套件名稱(您可以從中省略前綴,例如,reacteslint-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 配置相同。覆寫區塊可以包含常規配置中有效的任何配置選項,但 rootignorePatterns 除外。
    • Glob 特定配置可以有 extends 設定,但已擴展配置中的 root 屬性會被忽略。已擴展配置中的 ignorePatterns 屬性僅用於 glob 特定配置符合的檔案。
    • 只有在父配置和子配置的 glob 模式都符合時,才會套用巢狀 overrides 設定。當擴展配置具有 overrides 設定時,也是如此。
  • 可以在單一覆寫區塊中提供多個 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.jsapp/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 28RFC 32

~/ 指的是 您慣用作業系統上目前使用者的主目錄。這裡所指的個人配置檔是 ~/.eslintrc.* 檔案,目前與其他配置檔的處理方式不同。

ESLint 如何尋找個人設定檔?

如果 eslint 在專案中找不到任何配置檔,則 eslint 會載入 ~/.eslintrc.* 檔案。

如果 eslint 在專案中找到配置檔,則 eslint 會忽略 ~/.eslintrc.* 檔案,即使它位於專案目錄的祖先目錄中也是如此。

個人設定檔如何運作?

~/.eslintrc.* 檔案的行為與常規配置檔類似,但有一些例外情況

~/.eslintrc.* 檔案會從 ~/node_modules/ 載入可共享配置和自訂剖析器 – 類似於 require() – 在使用者的主目錄中。請注意,它不會載入全域安裝的套件。

~/.eslintrc.* 檔案預設會從 $CWD/node_modules 載入外掛程式,以便唯一識別外掛程式。如果您想要將外掛程式與 ~/.eslintrc.* 檔案搭配使用,則外掛程式必須在每個專案中本機安裝。或者,您可以使用 --resolve-plugins-relative-to CLI 選項來變更 ESLint 載入外掛程式的位置。

變更語言