如何在 Node.js 應用程序中使用 ESLint

這是我參與8月更文挑戰的第8天,活動詳情查看:8月更文挑戰javascript

ESLint 是一個開源 JavaScript linting 實用程序,它能夠幫助咱們規範代碼,克服開發人員的一些意想不到錯誤,由於 JavaScript 是弱類型的語言。html

Javascript 社區中有不少規範化選項,好比 JSHintJSCS,用於代碼 linting,包括今天咱們要講的 ESLint。前端

ESLint 旨在使全部規則徹底可插入。這是它產生的主要緣由之一。它容許開發人員建立本身的 linting 規則。ESLint 官方指南中提供的每一個規則都是獨立的規則,開發人員能夠在任什麼時候候決定是否使用特定的規則。vue

安裝

對於項目目錄的本地安裝:java

$ npm i eslint -D
複製代碼

對於工做系統中的全局安裝:node

$ npm i eslint -g
複製代碼

安裝好後,咱們就能夠經過終端中的 eslint 命令使用 ESLint。react

配置

最簡單的配置方法是設置一個 .eslintrc JSON 文件,其中能夠描述全部的 linting 規則。git

.eslintrc 的一個示例:github

{
  "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": []
}
複製代碼

主要字段:npm

  • parse — 指定解析器
  • parserOptions — 指定解析器選項
  • env — 指定腳本的運行環境
  • root — 爲 true 時,中止向上查找父級目錄中的配置文件
  • globals — 腳本在執行期間訪問的額外的全局變量
  • rules — 在此處添加您的自定義規則

若是全局安裝了 eslint,咱們還能夠使用如下命令生成配置文件:

$ eslint --init
複製代碼

在其餘狀況下,若是您已在本地將其安裝到項目中,則須要在終端中輸入:

$ ./node_modules/.bin/eslint --init
複製代碼

在這兩種狀況下,都會提示您生成 .eslintrc 文件的一組基本規則。

options

上述提示後生成的文件示例:

{
  "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"
    ]
  }
}
複製代碼

有關配置的詳細信息,請閱讀此處

爲了方便運行,咱們能夠在項目的 package.json,在 scripts 字段裏面添加如下腳本:

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

咱們將該規則應用於如下文件:

var a = 1;
console.log(1);
複製代碼

執行 npm run lint 後將出現如下信息:

npm run lint

ESLint 提示已經很明顯了:3 個錯誤。第一行和第二行的最後又額外的分號錯誤,a 被賦值但從未使用。

而且提示使用 --fix 選項修復錯誤和警告,有 2 個錯誤是能夠修復的。如今,使用 npm run lint-fix 修復它,a 的去留就看本身手動更改。

你還能夠運行 npm run lint-html 命令,將檢查結果寫入一個網頁文件。

npm run lint-html

配置文件優先級

若是您按上面的步驟一步步來,你會可能已經知道,ESLint 支持幾種格式的配置文件。

如今存在一個問題,若是同個目錄下有多個 ESLint 文件,它們會如何執行,優先級如何?

ESLint 源碼中給出了咱們答案,其優先級配置以下:

const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
]
複製代碼

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

規則

ESLint 中的規則是單獨添加的。默認狀況下不強制執行任何規則。您必須明確指定規則,而後纔會爲 linting 過程啓用它。

點擊此處官方文檔查找完整的規則列表。

在決定要包含哪些規則以後,您必須設置這些錯誤級別。每一個錯誤級別可定義以下:

  • 0 — 關閉規則,至關於 off
  • 1 — 打開規則做爲警告,至關於 warn
  • 2 — 打開規則做爲錯誤,至關於 error

錯誤和警告之間的區別在於 eslint 完成時將具備的退出代碼。若是發現任何錯誤,eslint 將以 1 退出代碼退出,不然將以 0 退出。

若是您在生成步驟中進行 lint,這容許您控制哪些規則應破壞您的生成,哪些規則應視爲警告。

環境

您正在編寫的代碼可能適用於特定環境,例如,您可能正在使用 Express 框架在 Node.js 應用程序中編寫 REST API,而且該應用程序的前端將在 Vue/React 中構建。

兩個不一樣的項目、兩個不一樣的環境,它們均可以在一個文件中具備單獨的 eslint 配置,即便客戶端和服務器位於一個被視爲項目根目錄的項目目錄下。

它是如何完成的?

經過在 .eslintrc"env" 部分將環境 id 設置爲 true

ESLint CLI

ESLint 附帶一個命令行界面(CLI),用於 lint 文件或目錄。

$ eslint index.js
複製代碼

前面示例中咱們已經看到,運行命令後生成的輸出將按文件分組,並將指定 line:column 警告/錯誤、錯誤緣由以及每一個故障的規則名稱。

將 ESLint 與您喜歡的編碼風格結合使用

ESLint 我的並不提倡任何編碼風格。您能夠設置 .eslintrc 文件以使用您喜歡的樣式規則強制編碼樣式。

您還能夠將 ESLint 與樣式指南(如 AirbnbJavaScript 標準風格)一塊兒使用。

你還必須使用額外的插件,例如:

團隊規範

AlloyTeam 給出的 React/Vue/TypeScript 項目的漸進式 ESLint 配置(eslint-config-alloy),如下貼出 React 的一小部分配置:

module.exports = {
  parserOptions: {
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  plugins: ['react'],
  rules: {
    /**     * 布爾值類型的 propTypes 的 name 必須爲 is 或 has 開頭     * @reason 類型相關的約束交給 TypeScript     */
    'react/boolean-prop-naming': 'off',
    /**     * <button> 必須有 type 屬性     */
    'react/button-has-type': 'off',
    /**     * 一個 defaultProps 必須有對應的 propTypes     * @reason 類型相關的約束交給 TypeScript     */
    'react/default-props-match-prop-types': 'off',
    /**     * props, state, context 必須用解構賦值     */
    'react/destructuring-assignment': 'off',
    /**     * 組件必須有 displayName 屬性     * @reason 不強制要求寫 displayName     */
    'react/display-name': 'off',
    // ...
  }
}
複製代碼

您能夠參考該團隊的一些配置,應用到本身的項目中。

相關文章
相關標籤/搜索