/

VS Code 設定 React 開發環境

VS Code 設定 React 開發環境

這篇文章將解釋如何設定一個讓 React 開發容易且簡潔的 VS Code 環境，並且擁有程式碼檢查的提示和保存時自動格式化的功能。

ESLint

首先，我們將安裝 ESLint。ESLint 是一個非常棒的工具，可以幫助您保持程式碼整潔並符合規範。

使用 ESLint 延伸套件 安裝 ESLint 到 VS Code 的擴充套件商店。

然後，在終端機中執行以下 Yarn 命令（如果尚未安裝 Yarn，請參考我的教學鏈接獲取簡短的指南）：

1
2
3
4
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 支援：

1
2
3
4
5
{
 "parser": "babel-eslint",
 "extends": "airbnb",
 "plugins": ["react", "jsx-a11y", "import"]
}

Prettier

接下來，我們建議安裝 Prettier。Prettier 是一個 JavaScript 的文風一致性格式化工具。它是一個很棒的工具，可以幫助您統一程式碼風格，即使只有您獨自開發也非常有用。在團隊合作中，它更是非常有用，可以避免程式碼風格的差異。請按照 Prettier 建議的方式來使用。

您可以使用 Prettier 的 VS Code 擴充套件 來安裝 Prettier，使用 npm 命令：

1
npm install -g prettier-eslint --save-dev

接下來，我們將在 VS Code 的設定中添加幾個規則，以便在每次保存時應用 Prettier，並將其與 ESLint 整合。按下 cmd+,（在 macOS 上）可打開 VS Code 的設定，然後在最後添加以下內容：

1
2
3
"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

tags: [“React”, “VS Code”, “ESLint”, “Prettier”]