大家好，我是前端西瓜哥，今天帶大家了解 ESLint 的配置項。

ESLint 是一款檢查 JavaScript 程序是否符合特定的規則的工具。比如字符串用單引號還是雙引號，tab 縮進用 2 個空格還是 4 個空格還是其他，這些都可以用 ESLint 來規定。

安裝

你可以通過下面命令來安裝以及生成默認的 ESLint 配置

npm init @eslint/config

執行后，它有一個命令行的交互，根據提問需要選擇即可。

然后你會得到一個 .eslintrc.json 或者 .eslintrc.js 或 .eslintrc.yaml 文件（根據你的選擇）。

我沒有使用一些流行的默認 eslint 配置包，選擇了自定義規則。我的 .eslintrc.json 文件是這樣的：

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

?除了有專門的 ESLintrc 文件，我們 還可以在 package.json 加配置，字段名為 "eslintConfig"。

此外，ESLint 還支持 配置注釋。如果一個文件的某行代碼或所有代碼的某個規則要做特殊處理，我們可以在文件上加上注釋。?

比如整個文件關閉 semi（分號）規則：

/* eslint-disable semi */

下一行關閉 semi（分號）規則：

// eslint-disable-next-line semi
const a = '前端西瓜哥'

檢驗和修復文件規則

可以通過下面命令來檢查一個文件是否符合規則：

npx eslint src/index.js
# 或者
yarn run eslint src

每次寫完代碼都要執行命令的話，不免開發體驗差。

強烈建議在編輯器中裝上插件，它可以直接在代碼的位置上提示錯誤并提供信息。如果你使用的是 VSCode，可以安裝 ESlint 插件。

修復指定文件的規則，在原來命令的基礎上加上 --fix 即可。

npx eslint src/index.js --fix

VSCode 則可以通過智能提示的 Quick Fix 自動修復。

需要注意的是，并不是所有的規則錯誤都可以 auto fix。

像是雙引號變成單引號 ESLint 可以幫你 fix，但對于函數的內容為空，你需要加上內容的情況，ESLint 沒辦法幫你寫出來，它也不知道你想寫啥。

此外，還有存在多個可選修復方案的情況，你需要在編輯器的 quick fix 中選擇一種。

配置項 rules

下面我們看看 eslintrc 的一些配置用法。

rules 配置里可以指定一些具體的規則。比如

"indent": ["error", 4]

注釋配置寫法：

/* eslint indent: ["error", 4] */

表示我們希望縮進為 4 個空格。

數組的第一個元素是錯誤等級。分為

1. off / 0：關閉規則；
2. warn / 1：警告等級，配合其他工具時表現為編譯通過，但會出現警告，在 VSCode 使用插件后顯示為黃色波浪線；
3. error / 2：錯誤等級，表現為編譯不通過（exit code 為 1），在 VSCode 使用插件后顯示為紅色波浪線。

第二個元素及以后則是具體的配置值。

indent 是 rules 的一種規則，具體還有其他什么規則你可以看 eslint 官方文檔：

https://eslint.org/docs/latest/rules/?。

配置項 plugins

plugins 可以給 ESLint 新增一些規則。比如 eslint-plugin-react 插件：

"plugins": [
  "react"
],
"rules": {
  // props 不能使用字面量布爾值
  // 比如 disabled={true} 是不允許的，需要用 disabled
  "react/jsx-boolean-value": [
    "error",
    "never"
  ]
}

但注意它只是聲明，而不會應用這些規則，你需要在 rules 上應用，或使用 extends。

配置項 extends

extends 是集成好的一套完整方案，里面會預先設好 plugins、rules 等配置。你可以認為它是另一個 eslintrc 文件。

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended"
]

上面使用了 ESLint 自帶的 eslint:recommended，里面設置了一些默認 rule。源碼地址在這里：

https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js?。

每次開發一個新的項目，如果一個個配置 rule 未免繁瑣，通常我們會選擇一個比較流行的去 extends，然后再在上面修改。

當然你也可以自己開發一個。

配置項 env

設置腳本環境。比如

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

注釋配置寫法：

/* eslint-env browser, es2021 */

env 可以指定多個環境。

env 對一些 rule 是有作用的，比如 no-undef，表示不能使用未定義的變量。但有些變量其實是腳本所在宿主環境提供的全局變量，比如瀏覽器的 window，nodejs 的 process。

提供了 env 后，ESLint 就能有一個環境變量的白名單，看到這些變量就跳過 no-undef 規則。

可選的環境值：

https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments?。

配置項 global

設置全局變量。

"globals": {
  "var1": "writable",
  "var2": "readonly",
  "var3": "off",
}

• writable：表示可修改。
• readonly：表示只讀，不能修改。
• off：關閉

配置注釋寫法：

/* global var1: writable, var2: readonly */

配置項 root

設置應用配置文件的根目錄。

"root": true

對項目中的某個文件的 ESLint 應用邏輯是，從它所在目錄往上遞歸，找到所有的 ESLintrc 文件，直到根目錄 /。

通常我們希望遞歸到項目根目錄就停止了，不要引入項目外的 ESLintrc。

這時候我們就可以用 “root” 進行標明，表示到這里就是根目錄了。

配置項 parserOptions

ESLint 默認使用 ES5 的語法來解析代碼。如果你的代碼 用了高版本的 ES，就要配置 parserOptions，指定轉換 AST 所基于的版本。

"parserOptions": {
  "ecmaVersion": "latest",
  "sourceType": "module",
  "ecmaFeatures": {
    "jsx": true
  }
},

子配置項有：

1. ecmaVersion：ES版本，可以是 3、5（默認）、6（或 2015）、7（或 2016）... "latest"（當前 ESLint 支持的最新版本）。
2. sourceType：可以設置為 "script" （默認） 或 "module"（使用模塊化）。
3. allowReserved：允許使用保留字來作為變量名（如果是 ES3）。
4. ecmaFeatures：添加新的語言特性。它是一個對象，包括 jsx、impliedStrict（啟用全局的 "use strict;"）、globalReturn（全局作用域可以 return，像 commonjs 模塊本質是用函數實現的）。

配置項 parser

ESLint 默認的 parser 只支持 js，且僅支持最終的 ES 標準，不支持實驗性質的特性。

有時候我們想用實驗性質的 ES 特性，或是使用另一種語言，比如 TypeScript，那就要更換 parser 了。

對于實驗性質特性，我們可以使用 babel：

"parser": "@babel/eslint-parser"

對于 TypeScript：

"parser": "@typescript-eslint/parser"

保存時自動格式化

這個需要借助編輯器的插件，在保存的時候調用 ESLint 的 fix API。

比如在 VSCode 中，我們只需要在 .vscode/settings.json 配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

更多的用法可查閱插件的官方文檔：

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint?。

.eslintignore

有些文件我們不希望做 eslint 檢驗，因為它們可能是通過腳本生成的文件。

我們可以在項目根目錄創建一個 .eslintignore 文件。

dist/*
lang/zh_ch.js

結尾

之后我會開一篇文章寫如何編寫自定義 ESLint 規則，敬請期待。