為什么以及如何在你的項(xiàng)目中使用 ESLint

一夜奈良山 2021-09-15 10:13:46 瀏覽數(shù) (2719)

反饋

Npmjs.org 有數(shù)十萬個(gè)包，但它們的質(zhì)量不盡相同。檢查直接依賴項(xiàng)的管理情況很重要。如果功能是正確的，那么任何一個(gè)缺失的管理實(shí)踐都不應(yīng)該從您的考慮中排除一個(gè)包，但是當(dāng)你可以選擇包時(shí)，選擇管理良好的包或者準(zhǔn)備好自己維護(hù)包！

我用來評估項(xiàng)目的一種做法是 JavaScript linting。

為什么要對 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ò)誤）的絕佳工具。分配給未聲明的變量（這些會泄漏到全局范圍，污染它并可能導(dǎo)致很難找到錯(cuò)誤）和使用未定義的變量是在 lint 時(shí)可檢測到的錯(cuò)誤示例。

如何配置 ESLint

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

安裝并保存軟件包依賴項(xiàng)：?npm install --save-dev eslint eslint-config-strongloop?.
通過運(yùn)行設(shè)置 ESLint 以使用 StrongLoop 配置?echo '{"extends": "strongloop"}' > .eslintrc.json?。
確保你有一個(gè).gitignore文件（因此派生文件不會被 linted，只有原始源文件）。如果你沒有，你可以用最少的努力創(chuàng)建一個(gè)：?echo node_modules/ >> .gitignore?.請注意，也可以使用特定于 ESLint 的.eslintignore文件，該文件與 .gitignore 具有相同的語法，并且可能具有相同的內(nèi)容。為了避免這種維護(hù)負(fù)擔(dān)，大多數(shù)項(xiàng)目只使用 .gitignore。
使用此設(shè)置，通過將 package.json 更改為pretest腳本，將 ESLint 配置為在測試之前自動(dòng)運(yùn)行。它應(yīng)該類似于：

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

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

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

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

完成后，運(yùn)行

linter： npm run pretest

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

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

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

ESLint 可以自動(dòng)修復(fù)許多語法問題。這應(yīng)該是你用來清理源代碼的第一個(gè)工具：?./node_modules/.bin/eslint --fix --ignore-path .gitignore .?
如果你有 ESLint 預(yù)測試腳本，你還可以執(zhí)行以下操作：?npm run pretest -- --fix?
有一些類的問題，ESLint不會解決，然而，在這種情況下，你可以用做一次性清理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ù)這些問題，請禁用 ESLint 規(guī)則。自動(dòng)強(qiáng)制執(zhí)行某些樣式子集比完全不強(qiáng)制要好得多。您可以為特定項(xiàng)目覆蓋一些 StrongLoop 樣式，然后有時(shí)間回來清理代碼。

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

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

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

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

git commit -a -m 'Project lints clean

自動(dòng)lint

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

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

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

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

?cp .git/hooks/pre-commit.sample .git/hooks/pre-commi?t

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

# 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è)用戶。

JavaScript

0 人點(diǎn)贊