Node.js專案中如何安裝和使用ESLint？本篇文章為大家介紹一下在 Node.js 應用程式中使用 ESLint的方法。
【推薦學習：《nodejs 教學》】
ESLint 是一個開源JavaScript linting 實用程式，它可以幫助我們規範程式碼，克服開發人員的一些意想不到錯誤，因為JavaScript 是弱類型的語言。
Javascript 社群中有很多規範化選項，像是 JSHint 和 JSCS，用於程式碼 linting，包括今天我們要講的 ESLint。
ESLint 旨在使所有規則完全可插入。這是它產生的主要原因之一。它允許開發人員創建自己的 linting 規則。 ESLint 官方指南中提供的每個規則都是獨立的規則，開發人員可以在任何時候決定是否使用特定的規則。
安裝
對於專案目錄的本機安裝：
對於工作系統中的全域安裝：
安裝好之後，我們就可以透過終端機中的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，我們也可以使用下列命令產生設定檔：
在其他情況下，如果您已在本機將其安裝到專案中，則需要在終端機中輸入：
$ ./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 — 关闭规则，相当于 off1 — 打开规则作为警告，相当于 warn2 — 打开规则作为错误，相当于 error
错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误，eslint 将以 1 退出代码退出，否则将以 0 退出。
如果您在生成步骤中进行 lint，这允许您控制哪些规则应破坏您的生成，哪些规则应视为警告。
环境
您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，并且该应用程序的前端将在 Vue/React 中构建。
两个不同的项目、两个不同的环境，它们都可以在一个文件中具有单独的 eslint 配置，即使客户端和服务器位于一个被视为项目根目录的项目目录下。
它是如何完成的？
通过在 .eslintrc 的 "env" 部分将环境 id 设置为 true。
ESLint CLI
ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。
前面示例中我们已经看到，运行命令后生成的输出将按文件分组，并将指定 line:column 警告/错误、错误原因以及每个故障的规则名称。
将 ESLint 与您喜欢的编码风格结合使用
ESLint 个人并不提倡任何编码风格。您可以设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。
您还可以将 ESLint 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。
你还必须使用额外的插件，例如：
团队规范
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',
// ...
}
}登入後複製
您可以参考该团队的一些配置，应用到自己的项目中。
更多编程相关知识，请访问：编程入门！！
以上是Node.js專案中如何安裝和使用ESLint的詳細內容。更多資訊請關注PHP中文網其他相關文章！
