Linting 和漂亮打印的 JavaScript 代碼有助于更早地檢測錯(cuò)誤，使代碼更清晰，并提高整體代碼質(zhì)量。但是，在使用格式化程序進(jìn)行漂亮打印和 linter 時(shí)可能會有一些摩擦。
在本文中，我們將學(xué)習(xí)如何使用 lint-staged 配置 ESLint、Prettier 和 Husky，并將它們一起用于在命令行和 VS Code 中自動(dòng)修復(fù)和格式化代碼。
交易工具??
任何軟件工程師，無論他們的經(jīng)驗(yàn)水平如何，都可能會遇到糟糕的一天，并且無意中引入了導(dǎo)致錯(cuò)誤或根本不適合良好代碼開發(fā)實(shí)踐的更改。
幸運(yùn)的是，有幾種方法可以保護(hù)您的 JavaScript 項(xiàng)目免受此類攻擊。首先想到的是使用各種類型的測試。當(dāng)然，它們是最有效的方法，但我們將在本文后面討論。
我們將專注于代碼本身，而不是測試應(yīng)用程序的功能以保護(hù)您的軟件項(xiàng)目免受無意的開發(fā)人員錯(cuò)誤的影響。
1. 依賴
ESLint 是一種 lint，可以檢測和報(bào)告 ECMAScript/JavaScript 代碼中的模式。Lints，也稱為 linter，是用于標(biāo)記編程錯(cuò)誤、錯(cuò)誤、風(fēng)格錯(cuò)誤和可疑結(jié)構(gòu)的工具，以減少錯(cuò)誤并提高代碼的整體質(zhì)量。在某些情況下，他們可以檢測到這些錯(cuò)誤并為您自動(dòng)更正。
ESLint 是一種流行的開源 lint，最適用于 JavaScript 和 TypeScript，它允許我們通過指定您自己的規(guī)則或擴(kuò)展來自 Google、Airbnb 等公司的標(biāo)準(zhǔn)化規(guī)則來配置和定制它以滿足我們的需求。
Prettier 是一個(gè)固執(zhí)己見的代碼格式化程序，它的代碼樣式一致且更易于使用。它支持 HTML、CSS、Javascript 和它們的大部分庫。
Husky 是一個(gè)讓我們使用 Git 鉤子的工具。Git 鉤子是可以配置為在 Git 生命周期中的特定點(diǎn)運(yùn)行的腳本，我們將使用 Husky 來運(yùn)行 ESlint 和 Prettier 作為我們的預(yù)提交鉤子，以確保如果他們的代碼違反了我們的規(guī)則，則沒有人可以提交。
創(chuàng)建預(yù)提交和配置 Husky 可能很難在團(tuán)隊(duì)中設(shè)置和共享，因此我們將使用 lint-staged，這是一個(gè)安裝 Husky 并為您配置所有內(nèi)容的工具，您只需指定要在每次提交時(shí)運(yùn)行的腳本。
要安裝所有依賴項(xiàng)，請使用以下命令（作為開發(fā)依賴項(xiàng)）：
yarn add -D eslint eslint-plugin-react husky lint-staged prettier
# or
npm i -D eslint eslint-plugin-react husky lint-staged prettier
2. 腳本
將此添加到您的 package.json 中：
{
"scripts": {
"format": "prettier --write .",
"prepare": "husky install"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
}
您現(xiàn)在可以運(yùn)行npm run format來美化您現(xiàn)有的代碼庫。
你在這里做了什么：Husky 添加了一個(gè) git commit 鉤子，以便 lint-staged 只在你在 git 中暫存的新內(nèi)容上運(yùn)行 Prettier。
3.更漂亮的設(shè)置
現(xiàn)在我們將配置我們的格式化程序。為此，我們將使用兩個(gè)文件：.prettierrc.json包含配置以及.prettierignore我們可以在其中列出 Prettier 應(yīng)該跳過的文件和文件夾的位置（此文件的工作方式與 .gitignore 相同）。
使用Prettier Playground來決定您的團(tuán)隊(duì)想要什么設(shè)置。
在根文件夾中創(chuàng)建一個(gè)名為 .prettierrc.json 的文件，該文件將包含您在格式化代碼時(shí)可能希望 prettier 遵循的自定義規(guī)則/選項(xiàng)，在 .prettierrc.json 中輸入以下代碼：
{
"arrowParens": "always",
"bracketSpacing": false,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
}
4. ESLint 配置
創(chuàng)建一個(gè) ESLint 配置并檢查您想要的項(xiàng)目規(guī)范。
npm init @eslint/config
你需要回答一些關(guān)于你想如何使用 ESlint 的問題：
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/prop-types": [0, {}],
"react/no-unescaped-entities": [0, {}],
"no-unused-vars": [1, {}],
}
};
在這里，我將 configplugin:react/recommended用于我最喜歡的工具 - React，但您可以根據(jù)自己的喜好對其進(jìn)行編輯。此外，我建議啟用 ESLint VSCode 插件以在您的編輯器中查看反饋。
5. 自動(dòng)化??
最后，讓我們自動(dòng)使用這兩種工具來改進(jìn)我們的工作流程。這將由赫斯基處理。它是一個(gè)允許與 Git 掛鉤集成的工具。
Git 掛鉤允許您運(yùn)行任何腳本以響應(yīng)各種 Git 版本控制系統(tǒng)操作。為了使事情盡可能簡單，我們將使用 lint-staged 項(xiàng)目，該項(xiàng)目將簡化此過程，同時(shí)還引入了一項(xiàng)更重要的優(yōu)化。
要詳細(xì)了解該工具的工作原理，我鼓勵(lì)您瀏覽該項(xiàng)目的 GitHub頁面。
如果你沒有配置你的package.jsonin scripts 部分，現(xiàn)在安裝 lint-staged 后，我們必須將其配置添加到package.json. 它由 JSON 組成，它使用文件名（或定義一組文件的正則表達(dá)式）作為鍵。它接受包含要執(zhí)行的命令的字符串，或者如果有多個(gè)這樣的命令，則接受字符串?dāng)?shù)組。
如果您通過 CRA 創(chuàng)建了應(yīng)用程序，lint-staged 很可能只為您配置了 Prettier。因此，如下例所示，我們將 linter 添加到 lint-staged 配置中。
...,
"lint-staged":{
"**/*.{js,jsx,ts,tsx}":[
"npx prettier --write",
"npx eslint --fix",
]
}
Bonus
還有另一個(gè)插件可以與 ESLint 一起使用，以幫助您處理 React Hooks 擁有的依賴項(xiàng)數(shù)組。這個(gè)插件將幫助控制 UI 更新。它會讀取您的代碼并指出您是否缺少任何依賴項(xiàng)。
要進(jìn)行設(shè)置，請?jiān)谀捻?xiàng)目中安裝插件：
$ npm install -D eslint-plugin-react-hooks
# or
$ yarn add -D eslint-plugin-react-hooks
文章來源：https://avocadev.hashnode.dev/setting-up-efficient-workflows-with-eslint-prettier-and-husky
