這是我參與8月更文挑戰的第8天,活動詳情查看:8月更文挑戰javascript
ESLint 是一個開源 JavaScript linting 實用程序,它能夠幫助咱們規範代碼,克服開發人員的一些意想不到錯誤,由於 JavaScript 是弱類型的語言。html
Javascript 社區中有不少規範化選項,好比 JSHint 和 JSCS,用於代碼 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
文件的一組基本規則。
上述提示後生成的文件示例:
{
"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
後將出現如下信息:
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
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),用於 lint 文件或目錄。
$ eslint index.js
複製代碼
前面示例中咱們已經看到,運行命令後生成的輸出將按文件分組,並將指定 line:column
警告/錯誤、錯誤緣由以及每一個故障的規則名稱。
ESLint 我的並不提倡任何編碼風格。您能夠設置 .eslintrc
文件以使用您喜歡的樣式規則強制編碼樣式。
您還能夠將 ESLint 與樣式指南(如 Airbnb、JavaScript 標準風格)一塊兒使用。
你還必須使用額外的插件,例如:
eslint-config-airbnb-base
。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',
// ...
}
}
複製代碼
您能夠參考該團隊的一些配置,應用到本身的項目中。