怎么在項(xiàng)目中使用ESLint

這篇文章主要講解了“怎么在項(xiàng)目中使用ESLint”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么在項(xiàng)目中使用ESLint”吧！

為什么要對(duì) JavaScript 進(jìn)行 lint？

運(yùn)行良好的項(xiàng)目具有清晰、一致的編碼約定，并具有自動(dòng)執(zhí)行功能。當(dāng)我審查一個(gè)項(xiàng)目時(shí)，它的代碼看起來像一個(gè)孩子用斧頭和房子的圖片建造的房子，它并沒有激發(fā)代碼功能的信心。

沒有編碼約定也是吸引貢獻(xiàn)的障礙。依賴于一個(gè)不歡迎貢獻(xiàn)的項(xiàng)目本身就是一種風(fēng)險(xiǎn)。

除了檢查樣式之外，linter 也是查找某些類型錯(cuò)誤（例如與變量范圍相關(guān)的錯(cuò)誤）的絕佳工具。分配給未聲明的變量（這些會(huì)泄漏到全局范圍，污染它并可能導(dǎo)致很難找到錯(cuò)誤）和使用未定義的變量是在 lint 時(shí)可檢測(cè)到的錯(cuò)誤示例。

如何配置 ESLint

ESLint 是用于 linting Node.js 包的主要工具，可以配置為強(qiáng)制執(zhí)行多種編碼風(fēng)格?？梢远x自己的樣式定義，但在這里我將展示如何使用 StrongLoop 樣式。還有其他的，但是StrongLoop的風(fēng)格平淡無奇（好東西，編碼風(fēng)格不應(yīng)該引起注意），和很多開源Node.js項(xiàng)目中使用的類似。

1. 安裝并保存軟件包依賴項(xiàng)：npm install --save-dev eslint eslint-config-strongloop.

2. 通過運(yùn)行設(shè)置 ESLint 以使用 StrongLoop 配置echo '{"extends": "strongloop"}' > .eslintrc.json。

3. 確保你有一個(gè).gitignore文件（因此派生文件不會(huì)被 linted，只有原始源文件）。如果你沒有，你可以用最少的努力創(chuàng)建一個(gè)：echo node_modules/ >> .gitignore.請(qǐng)注意，也可以使用特定于 ESLint 的.eslintignore文件，該文件與 .gitignore 具有相同的語法，并且可能具有相同的內(nèi)容。為了避免這種維護(hù)負(fù)擔(dān)，大多數(shù)項(xiàng)目只使用 .gitignore。

4. 使用此設(shè)置，通過將 package.json 更改為pretest腳本，將 ESLint 配置為在測(cè)試之前自動(dòng)運(yùn)行。它應(yīng)該類似于： 

{ ... 
    "scripts": 
    { 
        "pretest": "eslint --ignore-path .gitignore ." 
    } ... 
}

package.json 的確切內(nèi)容取決于您的項(xiàng)目。你必須添加預(yù)測(cè)試腳本以使 ESLint 在你的單元測(cè)試之前運(yùn)行。當(dāng)你使用 npm 運(yùn)行測(cè)試腳本時(shí)，它還會(huì)運(yùn)行 pretest 和 posttest 腳本（如果存在）。我更喜歡這個(gè)，因?yàn)?eslint 通常比我的測(cè)試運(yùn)行得快得多，而且 lint 錯(cuò)誤很容易修復(fù)，但有些人更喜歡在 linter 之前運(yùn)行整個(gè)測(cè)試套件，在這種情況下，使用 posttest。

5. 提交 ESLint 自動(dòng)化支持：

git add package.json .gitignore .eslintrc.json 
git commit -m 'Add eslint automation

6. 完成后，運(yùn)行 

linter： npm run pretest

如果你的控制臺(tái)充斥著大量錯(cuò)誤，請(qǐng)不要?dú)怵H！

如何讓現(xiàn)有代碼清理干凈

人們避免使用 ESLint 的一個(gè)原因是清理從未被 lint 的代碼感覺就像清理Augean 馬廄。我建議像 Hercules 那樣做：從工具中獲取幫助。

1. ESLint 可以自動(dòng)修復(fù)許多語法問題。這應(yīng)該是你用來清理源代碼的第一個(gè)工具：./node_modules/.bin/eslint --fix --ignore-path .gitignore .

2. 如果你有 ESLint 預(yù)測(cè)試腳本，你還可以執(zhí)行以下操作：npm run pretest -- --fix

3. 有一些類的問題，ESLint不會(huì)解決，然而，在這種情況下，你可以用做一次性清理prettier。prettier 最常用作 ESLint 和 auto-formats 源在提交之前的替代品。它在引導(dǎo) ESLint 時(shí)也非常有用。像這樣運(yùn)行它： 

npm i prettier ./node_modules/.bin/prettier --single-quote --trailing-comma es5 --print-width 80 --write --no-bracket-spacing **/*.js

運(yùn)行eslint --fixand 后prettier，你應(yīng)該只有很少的剩余警告需要手動(dòng)清理。雖然 prettier 不像 ESLint 那樣常用，但如果需要，它可以用作 ESLint 的補(bǔ)充（prettier 用于自動(dòng)格式化，ESLint 用于格式強(qiáng)制和錯(cuò)誤檢查）。如果由于某種原因您現(xiàn)在沒有時(shí)間修復(fù)這些問題，請(qǐng)禁用 ESLint 規(guī)則。自動(dòng)強(qiáng)制執(zhí)行某些樣式子集比完全不強(qiáng)制要好得多。您可以為特定項(xiàng)目覆蓋一些 StrongLoop 樣式，然后有時(shí)間回來清理代碼。

4. 這是放寬max-len規(guī)則以允許最多 120 個(gè)字符寬的連續(xù)行的示例：

 { 
    "extends": "strongloop", 
    "rules": 
        { 
            "max-len": [2, 120, 8] 
        } 
}

你可能會(huì)發(fā)現(xiàn)你的代碼使用了一致的風(fēng)格，但不是 StrongLoop 的風(fēng)格。如果接近，你可以自定義StrongLoop樣式并發(fā)布為你自己的。如果你的風(fēng)格完全不同，那么編寫和發(fā)布你自己的可重用配置可能是有意義的。

5. 一旦您的代碼干凈利落（使用 npm run pretest 檢查），提交結(jié)果： 

git commit -a -m 'Project lints clean

自動(dòng)lint

有兩個(gè)級(jí)別的自動(dòng)化：項(xiàng)目范圍的策略和您自己的個(gè)人設(shè)置。

就項(xiàng)目范圍的策略而言，因?yàn)?ESLint 被配置為與您的測(cè)試一起運(yùn)行，所以沒有什么可做的。除非你沒有為你的項(xiàng)目自動(dòng)運(yùn)行測(cè)試，在這種情況下是時(shí)候開始了！

就我自己的個(gè)人設(shè)置而言，我更喜歡在我的每個(gè)提交上運(yùn)行 ESLint，因此我引入的任何問題都在我的機(jī)器上被 CI 捕獲之前捕獲。我用一個(gè) git pre-commithook來做這個(gè)。

要進(jìn)行設(shè)置，請(qǐng)使用示例鉤子作為基礎(chǔ)：

cp .git/hooks/pre-commit.sample .git/hooks/pre-commit

文件的最后幾行將如下所示：

# If there are whitespace errors, print the offending file names and fail.
exec git diff-index --check --cached $against --

將其更改為如下所示：

set -e
npm run pretest

# If there are whitespace errors, print the offending file names and fail.
exec git diff-index --check --cached $against --

就是這樣，你現(xiàn)在是 eslint 的另一個(gè)用戶。

感謝各位的閱讀，以上就是“怎么在項(xiàng)目中使用ESLint”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么在項(xiàng)目中使用ESLint這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！