Node.js專案中如何安裝和使用ESLint

Node.js專案中如何安裝和使用ESLint？本篇文章為大家介紹一下在 Node.js 應用程式中使用 ESLint的方法。

【推薦學習：《nodejs 教學》】

ESLint 是一個開源JavaScript linting 實用程式，它可以幫助我們規範程式碼，克服開發人員的一些意想不到錯誤，因為JavaScript 是弱類型的語言。

Javascript 社群中有很多規範化選項，像是 JSHint 和 JSCS，用於程式碼 linting，包括今天我們要講的 ESLint。

ESLint 旨在使所有規則完全可插入。這是它產生的主要原因之一。它允許開發人員創建自己的 linting 規則。 ESLint 官方指南中提供的每個規則都是獨立的規則，開發人員可以在任何時候決定是否使用特定的規則。

安裝

對於專案目錄的本機安裝：

$ npm i eslint -D

對於工作系統中的全域安裝：

$ npm i eslint -g

安裝好之後，我們就可以透過終端機中的eslint 指令使用ESLint。

設定

最簡單的設定方法是設定一個 .eslintrc JSON 文件，其中可以描述所有的 linting 規則。

.eslintrc 的一個範例：

{
  "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 — 指定解析器選項
• #env — 指定腳本的執行環境
• root — 為true 時，停止向上尋找父級目錄中的設定檔
• globals — 腳本在執行期間存取的額外的全域變數
• rules — 在此處新增您的自訂規則

如果全域安裝了eslint，我們也可以使用下列命令產生設定檔：

$ eslint --init

在其他情況下，如果您已在本機將其安裝到專案中，則需要在終端機中輸入：

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

在這兩種情況下，都會提示您產生

. eslintrc 檔案的一組基本規則。

上述提示後產生的文件範例：

{
  "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"
    ]
  }
}

有關配置的詳細信息，請閱讀：

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

為了方便運行，我們可以在專案的

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 後將出現以下資訊：

#ESLint 提示已經很明顯了：3 個錯誤。第一行和第二行的最後又額外的分號錯誤，

a 被賦值但從未使用。

並且提示使用

--fix 選項修復錯誤和警告，有 2 個錯誤是可以修復的。現在，使用 npm run lint-fix 修復它，a 的去留就看自己手動更改。

你也可以執行

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

規則

ESLintint中的規則是單獨新增的。預設不強制執行任何規則。您必須明確指定規則，然後才會為 linting 程序啟用它。

開啟官方文件尋找完整的規則清單：

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

在决定要包含哪些规则之后，您必须设置这些错误级别。每个错误级别可定义如下：

• 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 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。

你还必须使用额外的插件，例如：

• Airbnb 的插件 eslint-config-airbnb-base。
• JavaScript 标准风格 eslint-config-standard
• 一些流行库的插件：Vue | React

团队规范

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 属性
     */
    &#39;react/button-has-type&#39;: &#39;off&#39;,
    /**
     * 一个 defaultProps 必须有对应的 propTypes
     * @reason 类型相关的约束交给 TypeScript
     */
    &#39;react/default-props-match-prop-types&#39;: &#39;off&#39;,
    /**
     * props, state, context 必须用解构赋值
     */
    &#39;react/destructuring-assignment&#39;: &#39;off&#39;,
    /**
     * 组件必须有 displayName 属性
     * @reason 不强制要求写 displayName
     */
    &#39;react/display-name&#39;: &#39;off&#39;,
    // ...
  }
}

您可以参考该团队的一些配置，应用到自己的项目中。

更多编程相关知识，请访问：编程入门！！

以上是Node.js專案中如何安裝和使用ESLint的詳細內容。更多資訊請關注PHP中文網其他相關文章！