Node.js項(xiàng)目中如何安裝和使用ESLint？本篇文章給大家介紹一下在 Node.js 應(yīng)用程序中使用 ESLint的方法。

【推薦學(xué)習(xí)：《nodejs 教程》】

ESLint 是一個(gè)開(kāi)源 JavaScript linting 實(shí)用程序，它可以幫助我們規(guī)范代碼，克服開(kāi)發(fā)人員的一些意想不到錯(cuò)誤，因?yàn)?JavaScript 是弱類(lèi)型的語(yǔ)言。

Javascript 社區(qū)中有很多規(guī)范化選項(xiàng)，比如 JSHint 和 JSCS，用于代碼 linting，包括今天我們要講的 ESLint。

ESLint 旨在使所有規(guī)則完全可插入。這是它產(chǎn)生的主要原因之一。它允許開(kāi)發(fā)人員創(chuàng)建自己的 linting 規(guī)則。ESLint 官方指南中提供的每個(gè)規(guī)則都是獨(dú)立的規(guī)則，開(kāi)發(fā)人員可以在任何時(shí)候決定是否使用特定的規(guī)則。

安裝

對(duì)于項(xiàng)目目錄的本地安裝：

$ npm i eslint -D

對(duì)于工作系統(tǒng)中的全局安裝：

$ npm i eslint -g

安裝好后，我們就可以通過(guò)終端中的 eslint 命令使用 ESLint。

配置

最簡(jiǎn)單的配置方法是設(shè)置一個(gè) .eslintrc JSON 文件，其中可以描述所有的 linting 規(guī)則。

.eslintrc 的一個(gè)示例：

{   "env": {     "node": true,     "browser": true   },   "globals": {     "exampleGlobalVariable": true   },   "rules": {     "no-console": 0,     "space-infix-ops": "error",     "quotes": ["error", "single", {       "avoidEscape": true,       "allowTemplateLiterals": true     }],     "space-before-blocks": ["error", "always"],     "semi": ["error", "never"]   },   "plugins": [] }

主要字段：

• parse — 指定解析器
• parserOptions — 指定解析器選項(xiàng)
• env — 指定腳本的運(yùn)行環(huán)境
• root — 為 true 時(shí)，停止向上查找父級(jí)目錄中的配置文件
• globals — 腳本在執(zhí)行期間訪(fǎng)問(wèn)的額外的全局變量
• rules — 在此處添加您的自定義規(guī)則

如果全局安裝了 eslint，我們還可以使用以下命令生成配置文件：

$ eslint --init

在其他情況下，如果您已在本地將其安裝到項(xiàng)目中，則需要在終端中輸入：

$ ./node_modules/.bin/eslint --init

在這兩種情況下，都會(huì)提示您生成 .eslintrc 文件的一組基本規(guī)則。

上述提示后生成的文件示例：

{   "env": {     "browser": true,     "commonjs": true,     "es2021": true   },   "extends": "eslint:recommended",   "parserOptions": {     "ecmaVersion": 12   },   "rules": {     "indent": [       "error",       "tab"     ],     "linebreak-style": [       "error",       "windows"     ],     "quotes": [       "error",       "single"     ],     "semi": [       "error",       "never"     ]   } }

有關(guān)配置的詳細(xì)信息，請(qǐng)閱讀：

http://eslint.org/docs/user-guide/configuring

為了方便運(yùn)行，我們可以在項(xiàng)目的 package.json，在 scripts 字段里面添加以下腳本：

{   "scripts" : {     "lint": "eslint **/*.js",     "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",     "lint-fix": "eslint --fix **/*.js"   } }

我們將該規(guī)則應(yīng)用于以下文件：

var a = 1; console.log(1);

執(zhí)行 npm run lint 后將出現(xiàn)以下信息：

ESLint 提示已經(jīng)很明顯了：3 個(gè)錯(cuò)誤。第一行和第二行的最后又額外的分號(hào)錯(cuò)誤，a 被賦值但從未使用。

并且提示使用 --fix 選項(xiàng)修復(fù)錯(cuò)誤和警告，有 2 個(gè)錯(cuò)誤是可以修復(fù)的?，F(xiàn)在，使用 npm run lint-fix 修復(fù)它，a 的去留就看自己手動(dòng)更改。

你還可以運(yùn)行 npm run lint-html 命令，將檢查結(jié)果寫(xiě)入一個(gè)網(wǎng)頁(yè)文件。

配置文件優(yōu)先級(jí)

如果您按上面的步驟一步步來(lái)，你會(huì)可能已經(jīng)知道，ESLint 支持幾種格式的配置文件。

現(xiàn)在存在一個(gè)問(wèn)題，如果同個(gè)目錄下有多個(gè) ESLint 文件，它們會(huì)如何執(zhí)行，優(yōu)先級(jí)如何？

ESLint 源碼中給出了我們答案，其優(yōu)先級(jí)配置如下：

const configFilenames = [   ".eslintrc.js",   ".eslintrc.yaml",   ".eslintrc.yml",   ".eslintrc.json",   ".eslintrc",   "package.json" ]

.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

規(guī)則

ESLint 中的規(guī)則是單獨(dú)添加的。默認(rèn)情況下不強(qiáng)制執(zhí)行任何規(guī)則。您必須明確指定規(guī)則，然后才會(huì)為 linting 過(guò)程啟用它。

打開(kāi)官方文檔查找完整的規(guī)則列表：

http://eslint.org/docs/rules/

在決定要包含哪些規(guī)則之后，您必須設(shè)置這些錯(cuò)誤級(jí)別。每個(gè)錯(cuò)誤級(jí)別可定義如下：

• 0 — 關(guān)閉規(guī)則，相當(dāng)于 off
• 1 — 打開(kāi)規(guī)則作為警告，相當(dāng)于 warn
• 2 — 打開(kāi)規(guī)則作為錯(cuò)誤，相當(dāng)于 error

錯(cuò)誤和警告之間的區(qū)別在于 eslint 完成時(shí)將具有的退出代碼。如果發(fā)現(xiàn)任何錯(cuò)誤，eslint 將以 1 退出代碼退出，否則將以 0 退出。

如果您在生成步驟中進(jìn)行 lint，這允許您控制哪些規(guī)則應(yīng)破壞您的生成，哪些規(guī)則應(yīng)視為警告。

環(huán)境

您正在編寫(xiě)的代碼可能適用于特定環(huán)境，例如，您可能正在使用 Express 框架在 Node.js 應(yīng)用程序中編寫(xiě) REST API，并且該應(yīng)用程序的前端將在 Vue/React 中構(gòu)建。

兩個(gè)不同的項(xiàng)目、兩個(gè)不同的環(huán)境，它們都可以在一個(gè)文件中具有單獨(dú)的 eslint 配置，即使客戶(hù)端和服務(wù)器位于一個(gè)被視為項(xiàng)目根目錄的項(xiàng)目目錄下。

它是如何完成的？

通過(guò)在 .eslintrc 的 "env" 部分將環(huán)境 id 設(shè)置為 true。

ESLint CLI

ESLint 附帶一個(gè)命令行界面（CLI），用于 lint 文件或目錄。

$ eslint index.js

前面示例中我們已經(jīng)看到，運(yùn)行命令后生成的輸出將按文件分組，并將指定 line:column 警告/錯(cuò)誤、錯(cuò)誤原因以及每個(gè)故障的規(guī)則名稱(chēng)。

將 ESLint 與您喜歡的編碼風(fēng)格結(jié)合使用

ESLint 個(gè)人并不提倡任何編碼風(fēng)格。您可以設(shè)置 .eslintrc 文件以使用您喜歡的樣式規(guī)則強(qiáng)制編碼樣式。

您還可以將 ESLint 與樣式指南（如 Airbnb、JavaScript 標(biāo)準(zhǔn)風(fēng)格）一起使用。

你還必須使用額外的插件，例如：

• Airbnb 的插件 eslint-config-airbnb-base。
• JavaScript 標(biāo)準(zhǔn)風(fēng)格 eslint-config-standard
• 一些流行庫(kù)的插件：Vue | React

團(tuán)隊(duì)規(guī)范

AlloyTeam 給出的 React/Vue/TypeScript 項(xiàng)目的漸進(jìn)式 ESLint 配置（eslint-config-alloy），以下貼出 React 的一小部分配置：

module.exports = {   parserOptions: {     babelOptions: {       presets: ['@babel/preset-react'],     },   },   plugins: ['react'],   rules: {     /**      * 布爾值類(lèi)型的 propTypes 的 name 必須為 is 或 has 開(kāi)頭      * @reason 類(lèi)型相關(guān)的約束交給 TypeScript      */     'react/boolean-prop-naming': 'off',     /**      * <button> 必須有 type 屬性      */     'react/button-has-type': 'off',     /**      * 一個(gè) defaultProps 必須有對(duì)應(yīng)的 propTypes      * @reason 類(lèi)型相關(guān)的約束交給 TypeScript      */     'react/default-props-match-prop-types': 'off',     /**      * props, state, context 必須用解構(gòu)賦值      */     'react/destructuring-assignment': 'off',     /**      * 組件必須有 displayName 屬性      * @reason 不強(qiáng)制要求寫(xiě) displayName      */     'react/display-name': 'off',     // ...   } }

您可以參考該團(tuán)隊(duì)的一些配置，應(yīng)用到自己的項(xiàng)目中。