因為我的項目是基于 Electron 平臺的 Web 應用，使用 Vue 3 實現，而且用了 TypeScript，所以，在引入 ESLint 的時候，要考慮好幾種規范的問題。

零、簡介

ESLint 是一個可配置的 JavaScript 代碼檢查工具。它幫助你發現并修復 JavaScript 代碼中的問題。這些問題可能包括潛在的運行時錯誤、未遵循最佳實踐或風格問題等。

1. 規則

規則是 ESLint 的核心構建模塊。規則用于驗證你的代碼是否符合某種特定的期望，以及如果不符合期望應該采取什么措施。規則還可以包含特定于該規則的額外配置選項。

例如，分號規則（semi）允許你指定 JavaScript 語句是否應該以分號（;）結束。你可以設置規則，始終要求使用分號，或者要求語句永遠不要以分號結束。

ESLint 包含數百個內置規則供你使用。你也可以創建自定義規則，或者通過插件使用其他人創建的規則。

2. 配置文件

ESLint 配置文件是一個地方，你可以在這里為你的項目設置 ESLint 的配置。你可以在配置文件中包含內置規則、指定你希望如何執行這些規則、帶有自定義規則的插件、可共享的配置，以及你希望規則應用到哪些文件等等。

3. 共享配置

可共享配置（Shareable Configurations）是通過 npm 分享的 ESLint 配置。

通常，可共享配置用于使用 ESLint 的內置規則來強制執行風格指南。例如，可共享配置 eslint-config-airbnb-base 實現了流行的 Airbnb JavaScript 風格指南。

4. 插件

ESLint 插件是一個 npm 模塊，它可以包含一組 ESLint 規則、配置、處理器和環境。通常，插件會包含自定義規則。插件可以用來強制執行風格指南，并支持 JavaScript 擴展（如 TypeScript）、庫（如 React）和框架（如 Angular）。

插件的一個流行用例是強制執行框架的最佳實踐。例如，@angular-eslint/eslint-plugin 包含了使用 Angular 框架的最佳實踐。

5. 解析器

ESLint 解析器的作用是將代碼轉換成抽象語法樹（AST），這樣 ESLint 就可以對其進行評估。默認情況下，ESLint 使用內置的 Espree 解析器，它與標準的 JavaScript 運行時和版本兼容。

自定義解析器允許 ESLint 解析非標準的 JavaScript 語法。通常，自定義解析器作為可共享配置或插件的一部分包含在內，因此你不需要直接使用它們。

例如，@typescript-eslint/parser 是 typescript-eslint 項目中包含的一個自定義解析器，它允許 ESLint 解析 TypeScript 代碼。這種解析器使得 ESLint 能夠處理 TypeScript 特有的語法結構，從而在 TypeScript 項目中提供有效的代碼檢查和風格指導。

6. 自定義處理器

處理器的作用是從其他類型的文件中提取 JavaScript 代碼，然后讓 ESLint 對這些提取出來的 JavaScript 代碼進行語法檢查。此外，處理器還可以在 ESLint 解析 JavaScript 代碼之前對其進行操作，比如轉換或者預處理。

例如，eslint-plugin-markdown 插件包含了一個自定義的處理器，它允許你在 Markdown 文件的代碼塊內對 JavaScript 代碼進行 lint 檢查。這意味著，即使 JavaScript 代碼嵌入在 Markdown 文件中，你也可以使用 ESLint 來檢查這些代碼的質量和風格，確保它們遵循你設定的規則。

這種處理器的使用擴展了 ESLint 的應用范圍，使其不僅能夠檢查傳統的 .js文件，還能夠處理其他格式文件中的 JavaScript 代碼，從而為開發者提供了更全面的代碼質量保障。

一、在項目引入 ESLint

假設你的項目已經有了 package.json 文件（一般都有），在項目里首次引入 ESLint 使用：

npm init @eslint/config

在項目的根目錄里，有 ESLint 的配置文件，可以是三種格式的，js，yml，json，我推薦使用 json，因為如果你使用 js 的話，可能有模塊標準的問題，比如你是 CommonJS 還是 ES Module 呢？跟項目自身的標準是否兼容？不如用 yml 或者 json 這種純數據的格式。

ESLint 規則大概是這樣的：

{"rules": {"semi": ["error", "always"],"quotes": ["error", "double"]}
}

上面的配置里面，有兩條規則，第一條是關于分號（;）的，error 是報錯的級別，可選的值還有 warn 和 off 分別是警告和關閉。后面的 always 的意思是，總是使用分號的意思，就是這條規則的設定值。第二條規則是 quotes 關于引號的，后面寫著 double 的意思是總是使用雙引號。

二、使用配置文件

ESLint 配置文件是一個地方，你可以在這里為你的項目設置 ESLint 的配置。你可以在配置文件中包含內置規則、指定你希望如何執行這些規則、帶有自定義規則的插件、可共享的配置，以及你希望規則應用到哪些文件等等。

1. 指定環境

一個環境，提供了預定義的全局變量。例如，咱們的項目里用到了 Electron 和 Vue，而且，原理上是有 Chromium 環境的，所以我們設置：

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

環境并不是互斥的。所以，如果你的代碼里用到了多種環境的話，都可以設上。

2. 層級關系

可以在配置文件里，加一個 root: true 告訴 ESLint，這已經是頂層配置文件了，讓 ESLint 不要再向上級目錄搜尋配置了。

如果我們的某個子目錄使用另外一種規則，我們也可以在子目錄里放置一個 .eslintrc.json 配置文件，并設定這個，這樣就會阻斷 ESLint 使用根目錄的配置規則。

3. 擴展

我們確實可以使用 rules 鍵來指定大量的規則，不過，我們更多還是使用 extends 來擴展。比如：

"extends": ['eslint:recommended','plugin:vue/vue3-essential','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting','.eslintrc-auto-import.json',]

這里擴展了很多東西，一個是官方推薦的規則集，第二個是 Vue 3 的插件，第三、四個可能是“共享配置”，而最后一個則是根目錄里的另一個配置文件，可以說，這個擴展是無所不能。

4. 忽略文件

有時候，我們會在目錄里放一些別的文件，比如我在項目里放入了一個 blog 目錄，這里使用 Hexo 的生成器維護的一個文檔站點，并用 GitHub Actions 自動發布到 GitHub Pages。這里也引用了大量的 js 代碼，但是這些代碼本質上跟我的項目無關，所以，需要忽略掉這個目錄，可以寫成：

{"ignorePatterns" : [ "blog/"]
}

這樣 ESLint 在掃描的時候，就會跳過這個目錄，這個模式的配置，支持 blob 語法，如 src/**/__tests__/* 這種模式。

三、在 Vue + Electron 項目中引入

經過研究，我發現，在 Vue 的項目里，我們還是只能用 js 格式作為 eslint 的配置文件：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,env: {node: true,browser: true,es6: true,},extends: ['eslint:recommended','plugin:@typescript-eslint/eslint-recommended','plugin:vue/vue3-essential','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting','.eslintrc-auto-import.json',],parserOptions: {ecmaVersion: 'latest',},ignorePatterns: ['blog/'],
}

首先看第一行，這個配置文件的第一行 /* eslint-env node */ 是一個 ESLint 的環境指令。它告訴 ESLint 這個文件是在 Node.js 環境中運行的，因此 ESLint 應該預定義所有 Node.js 全局變量，例如 process 和 __dirname 。這樣，當你在代碼中使用這些全局變量時，ESLint 不會報告 “未定義的變量” 錯誤。

第二行 require('@rushstack/eslint-patch/modern-module-resolution') 是在引入一個名為 @rushstack/eslint-patch/modern-module-resolution 的模塊。這個模塊是 Rushstack 的 ESLint 補丁，它改變了 ESLint 的模塊解析機制，使其能夠更好地支持現代的 JavaScript 模塊解析規則，例如 Node.js 的 exports/imports 字段，或者 package.json 中的 exports 字段。這樣可以幫助 ESLint 更準確地找到和解析項目中的模塊。

也就是為了加載這個補丁，如果我們換成 json 格式的話，就沒辦法寫 require 語句了。而且，看了官方的文檔，下一代的配置文件格式，也是 js 格式的。

這里我們用的是官方創建項目的模板里帶的一些推薦規則，都是以插件的形式提供的。我覺得這樣的形式很好，其實編碼規范的事情無所謂好壞，關鍵是每個人都去做。然后真的形成統一的風格，prettier 那個工具也是一樣的，更加極端一點，直接內置很多規則在里面，就是為了節省團隊的時間，大家省得去討論哪種樣式更好，而是用了這個工具后，就立刻接受了一整套規則，并且跟工具強制綁定。

我看有的項目還會配置 husky，在 git 的 commit 環節注入檢查和格式化，使得代碼強制風格一致。讓協作變得更為簡單。

總結

本文介紹了 ESLint 的一般性用法，以及其配置文件的組成部分，最后介紹了在 Vue + Electron 的項目里如何配置 ESLint。