這篇文章將解釋如何設定一個讓 React 開發容易且簡潔的 VS Code 環境,並且擁有程式碼檢查的提示和保存時自動格式化的功能。
ESLint
首先,我們將安裝 ESLint。ESLint 是一個非常棒的工具,可以幫助您保持程式碼整潔並符合規範。
使用 ESLint 延伸套件 安裝 ESLint 到 VS Code 的擴充套件商店。
然後,在終端機中執行以下 Yarn 命令(如果尚未安裝 Yarn,請參考我的教學鏈接獲取簡短的指南):
yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react
接下來,在專案的根目錄中建立一個 .eslintrc.json
檔案,並添加以下內容以設定適用於 React 開發的基本 ESLint 配置,包括 JSX 支援:
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "jsx-a11y", "import"]
}
Prettier
接下來,我們建議安裝 Prettier。Prettier 是一個 JavaScript 的文風一致性格式化工具。它是一個很棒的工具,可以幫助您統一程式碼風格,即使只有您獨自開發也非常有用。在團隊合作中,它更是非常有用,可以避免程式碼風格的差異。請按照 Prettier 建議的方式來使用。
您可以使用 Prettier 的 VS Code 擴充套件 來安裝 Prettier,使用 npm 命令:
npm install -g prettier-eslint --save-dev
接下來,我們將在 VS Code 的設定中添加幾個規則,以便在每次保存時應用 Prettier,並將其與 ESLint 整合。按下 cmd+,
(在 macOS 上)可打開 VS Code 的設定,然後在最後添加以下內容:
"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true