如何通過 Airbnb JavaScript 風格指南使用 ESLint
Airbnb 風格指南是一套用於編寫乾淨一致的代碼的指南。它於 2012 年發布，此後成為 JavaScript 項目最流行的風格指南之一。
它為編寫一致的代碼提供了一組指南，通過在縮進、註釋、最大行長度、變量命名約定、引號和函數定義方面強制執行各種樣式規則，這些代碼易於維護。要在 JavaScript 項目中設置 Airbnb 樣式指南，您需要使用像 ESLint 這樣的 linting 工具。
安裝 ESLint
ESLint 是一種開源 JavaScript linting 工具，可幫助開發人員通過查找和修復問題來編寫乾淨的代碼。它可以檢測代碼中的問題，例如語法錯誤、無效參數和未定義的變量。當您使用-fix標籤運行 ESLint 時，它會自動識別並修復代碼中任何可修復的問題，從而節省您的時間。
您可以使用 ESLint 來強制執行風格指南，例如 Airbnb 風格指南。
首先，在終端中運行以下命令以將 ESLint 安裝為開發依賴項：
npm install --save-dev eslint eslint-config-airbnb
然後初始化 ESLint。
npx eslint --init
系統會提示您有關項目的問題。當出現提示時：
? How would you like to use EsLint?
選擇此選項：
> To check syntax, find problems and enforce code style
根據您的項目回答下一個問題，直到您遇到以下提示。
? How would you like to define a style for your project?
然後回答如下。
> Use a popular style guide
為下一個提示選擇 Airbnb 風格指南。
? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>
最後，在下一個提示中選擇“是”來安裝所需的依賴項。
安裝完成後，您的文件夾根目錄中應該有一個.eslintsrc.json文件。
定制愛彼迎風格指南
Airbnb 風格指南允許定制。您可以在.eslintsrc.json配置文件中添加其他規則或覆蓋現有規則。
例如，要允許每行最多 80 個字符，您可以在規則部分添加此規則。
{
"extends": [
"plugin:react/recommended",
"airbnb"
],
"rules": {
"max-len": ["error", { "code": 80 }]
}
}
在 package.json 中運行 ESLint
在package.json文件中添加一個腳本來運行 ESLint。
"scripts": {
"lint": "eslint"
}
通過執行此命令運行 lint 腳本以檢查是否有任何 linting 錯誤。
npm run lint
您還可以使用–fix標誌添加腳本來修復代碼中的問題。
"scripts": {
"lint": "eslint",
"lint:fix": "npm run lint -- --fix"
},
在終端上運行npm run lint:fix將自動修復 linter 可以修復的任何問題。
在 VS Code 中保存時啟用 Linting
每次要檢查代碼時都運行一個腳本會很乏味。按照以下步驟在 VS Code 中啟用保存時檢查。
- 轉到 VS Code 窗口左側的“擴展”選項卡。
- 搜索ESLint 擴展並安裝它。
- 安裝擴展後，打開 VS Code 設置（文件 > 首選項 > 設置或按 Ctrl +,）。
- 在設置編輯器中，搜索“保存時的代碼操作”。
- 單擊“在 settings.json 中編輯”並將以下設置添加到settings.json文件中。
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
這使 ESLint 擴展能夠在您保存時自動修復您的代碼。
使用風格指南的好處
使用像 Airbnb 風格指南這樣的風格指南的主要好處是它可以幫助您維護一致的代碼庫。這在團隊中很有用，因為開發人員可以輕鬆理解代碼庫並為代碼庫做出貢獻。它還可以幫助您執行最佳實踐並避免常見的編碼錯誤。
發佈留言