編輯器設定

你的編輯器

VS Code 是現在最受歡迎的編輯器之一。它有一個龐大的擴充功能市集，並與 GitHub 等流行服務很好的整合。下面列出的大多數功能也可以作為擴充功能加入到 VS Code 中，使其具有高度的可性！

其他在 React 社群使用的流行文字編輯器包括：

• WebStorm 是一個專門為 JavaScript 設計的完整開發環境。
• Sublime Text 支援 JSX 和 TypeScript，內建 syntax highlighting 和 autocomplete。
• Vim 是一個高度可配置的文字編輯器，可以非常有效的建立和修改任何類型的文本。它作為「vi」被內建在大多數 UNIX 系統和 Apple OS X 系統中。

推薦的文字編輯器功能

一些編輯器內建了這些功能，但其他編輯器可能需要增加一個擴充功能。檢查一下你所選擇的編輯器提供了哪些支援！

Linting

Code linter 可以在你撰寫程式碼的時候發現問題，幫助你儘早解決這些問題。ESLint是一個流行的、開放原始碼的 JavaScript 的 linter。

• 用 React 推薦的設定安裝 ESLint（請確認你安裝了 Node！）
• 在 VSCode 中用官方擴充功能整合 ESLint

**確認你有在你的專案內啟動所有 eslint-plugin-react-hooks 規則。**它們是不可少的，可以及早發現嚴重的錯誤。推薦的 eslint-config-react-app preset 已經包含了它們。

格式化

當你與另一個貢獻者分享你的程式時，你最不想做的事情就是陷入關於 tabs 與 spaces 的討論中！幸運的是，Prettier 將通過重新格式化來清理你的程式碼，使其符合預設的、可配置的規則。執行 Prettier，你所有的 tab 將被轉換為 space 以及你的縮排、引號等也將全部被改變，以符合設定。在理想的設定中，Prettier 將在你儲存文件時執行，快速的為你進行這些編輯。

你可以透過以下幾個步驟安裝在 VSCode 內安裝 Prettier 擴充套件：

1. 啟動 VS Code
2. 使用快速開啟（按下 CTRL/Cmd + P）
3. 貼上 ext install esbenp.prettier-vscode
4. 按下 enter

儲存時格式化

理想情況下，你應該在每次儲存時對你的程式碼進行格式化。 在 VS Code 可以設定！

1. 在 VS Code 內，按下 CTRL/CMD + SHIFT + P。
2. 輸入「settings」
3. 按下 enter
4. 在搜尋欄中，輸入「format on save」
5. 確認「format on save」選項是打勾的！

如果你的 ESLint 預設有格式規則，它們可能與 Prettier 衝突。我們建議使用 eslint-config-prettier 禁用 ESLint 預設中的所有格式規則，以便 ESLint 僅用於捕獲邏輯錯誤。如果你想強制在 pull request 被合併之前，對程式碼進行格式化，在你的 continuous integration 中使用 prettier --check。