這篇文章將解釋如何設定一個讓 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