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

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

安裝

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

npm init @eslint/config

執(zhí)行后，它有一個(gè)命令行的交互，根據(jù)提問需要選擇即可。

然后你會(huì)得到一個(gè) .eslintrc.json 或者 .eslintrc.js 或 .eslintrc.yaml 文件（根據(jù)你的選擇）。

我沒有使用一些流行的默認(rèn) eslint 配置包，選擇了自定義規(guī)則。我的 .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 還支持 配置注釋。如果一個(gè)文件的某行代碼或所有代碼的某個(gè)規(guī)則要做特殊處理，我們可以在文件上加上注釋。?

比如整個(gè)文件關(guān)閉 semi（分號）規(guī)則：

/* eslint-disable semi */

下一行關(guān)閉 semi（分號）規(guī)則：

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

檢驗(yàn)和修復(fù)文件規(guī)則

可以通過下面命令來檢查一個(gè)文件是否符合規(guī)則：

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

每次寫完代碼都要執(zhí)行命令的話，不免開發(fā)體驗(yàn)差。

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

修復(fù)指定文件的規(guī)則，在原來命令的基礎(chǔ)上加上 --fix 即可。

npx eslint src/index.js --fix

VSCode 則可以通過智能提示的 Quick Fix 自動(dòng)修復(fù)。

需要注意的是，并不是所有的規(guī)則錯(cuò)誤都可以 auto fix。

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

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

配置項(xiàng) rules

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

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

"indent": ["error", 4]

注釋配置寫法：

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

表示我們希望縮進(jìn)為 4 個(gè)空格。

數(shù)組的第一個(gè)元素是錯(cuò)誤等級。分為

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

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

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

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

配置項(xiàng) plugins

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

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

但注意它只是聲明，而不會(huì)應(yīng)用這些規(guī)則，你需要在 rules 上應(yīng)用，或使用 extends。

配置項(xiàng) extends

extends 是集成好的一套完整方案，里面會(huì)預(yù)先設(shè)好 plugins、rules 等配置。你可以認(rèn)為它是另一個(gè) eslintrc 文件。

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

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

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

每次開發(fā)一個(gè)新的項(xiàng)目，如果一個(gè)個(gè)配置 rule 未免繁瑣，通常我們會(huì)選擇一個(gè)比較流行的去 extends，然后再在上面修改。

當(dāng)然你也可以自己開發(fā)一個(gè)。

配置項(xiàng) env

設(shè)置腳本環(huán)境。比如

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

注釋配置寫法：

/* eslint-env browser, es2021 */

env 可以指定多個(gè)環(huán)境。

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

提供了 env 后，ESLint 就能有一個(gè)環(huán)境變量的白名單，看到這些變量就跳過 no-undef 規(guī)則。

可選的環(huán)境值：

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

配置項(xiàng) global

設(shè)置全局變量。

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

• writable：表示可修改。
• readonly：表示只讀，不能修改。
• off：關(guān)閉

配置注釋寫法：

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

配置項(xiàng) root

設(shè)置應(yīng)用配置文件的根目錄。

"root": true

對項(xiàng)目中的某個(gè)文件的 ESLint 應(yīng)用邏輯是，從它所在目錄往上遞歸，找到所有的 ESLintrc 文件，直到根目錄 /。

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

這時(shí)候我們就可以用 “root” 進(jìn)行標(biāo)明，表示到這里就是根目錄了。

配置項(xiàng) parserOptions

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

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

子配置項(xiàng)有：

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

配置項(xiàng) parser

ESLint 默認(rèn)的 parser 只支持 js，且僅支持最終的 ES 標(biāo)準(zhǔn)，不支持實(shí)驗(yàn)性質(zhì)的特性。

有時(shí)候我們想用實(shí)驗(yàn)性質(zhì)的 ES 特性，或是使用另一種語言，比如 TypeScript，那就要更換 parser 了。

對于實(shí)驗(yàn)性質(zhì)特性，我們可以使用 babel：

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

對于 TypeScript：

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

保存時(shí)自動(dòng)格式化

這個(gè)需要借助編輯器的插件，在保存的時(shí)候調(diào)用 ESLint 的 fix API。

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

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

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

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

.eslintignore

有些文件我們不希望做 eslint 檢驗(yàn)，因?yàn)樗鼈兛赡苁峭ㄟ^腳本生成的文件。

我們可以在項(xiàng)目根目錄創(chuàng)建一個(gè) .eslintignore 文件。

dist/*
lang/zh_ch.js

結(jié)尾

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