設定你的編輯器

Create React App 附帶許多工具，用於改善編輯體驗，只要設定正確。以下是幾個能最大化生產力的秘訣

語法高亮

若要設定你最喜歡的文字編輯器的語法高亮，請前往相關 Babel 文件頁面並遵循說明。其中涵蓋了幾個最受歡迎的編輯器。

在編輯器中顯示程式碼檢查結果

注意：此功能可在 react-scripts@0.2.0 和更高版本中使用。

使用 react-scripts@2.0.3 和更高版本的程式碼檢查結果，可以立即執行。

此功能僅適用於 npm 3 或更高版本。

包括 Sublime Text、Atom 和 Visual Studio Code 在內的一些編輯器，提供 ESLint 外掛程式。

程式碼檢查不需要這些外掛程式。你應該可以在終端機和瀏覽器主控台看到程式碼檢查結果。如果你希望程式碼檢查結果直接顯示在編輯器中，請務必安裝 ESLint的外掛程式或擴充功能。

請注意，即使您自訂了 ESLint 設定，這些變更僅會影響編輯器整合。它們不會影響終端機和瀏覽器中的程式碼檢查輸出。這是因為 Create React App 故意提供一組能找出常見錯誤的最小規則集。

如果您想為專案強制採用程式碼風格，建議使用 Prettier，而不是 ESLint 風格規則。

延伸或取代預設的 ESLint 設定

您可以延伸我們的基本 ESLint 設定，或是在必要時完全取代它。

有幾件事需要記住

我們強烈建議您延伸基本設定，因為移除它可能會引發難以發現的問題。
在使用 TypeScript 時，您需要提供一個 overrides 物件，以使用 僅適用 於 TypeScript 檔案的規則。
請務必注意，設定為 "error" 的任何規則都會停止專案建立。

在以下範例中

基本設定已被共享的 ESLint 設定延伸，
已設定適用於所有 JavaScript 和 TypeScript 檔案的新規則，同時
已設定僅針對 TypeScript 檔案的新規則。

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

在編輯器中除錯

目前，此功能僅由 Visual Studio Code 和 WebStorm 支援。

Visual Studio Code 和 WebStorm 開箱即支援使用 Create React App 除錯。這讓您可以作為開發人員編寫和除錯 React 程式碼，而無需離開編輯器，最重要的是，它讓您能夠擁有一個連續開發的工作流程，在此工作流程中的情境切換減至最少，因為您無需在工具之間切換。

Visual Studio Code

您需要安裝最新版本的 VS Code 和 VS Code Chrome Debugger Extension。

然後將以下區塊加入您的 launch.json 檔案，並將它放在應用程式的根目錄中的 .vscode 資料夾內。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "https://127.0.0.1:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

備註：如果您已透過 HOST 或 PORT 環境變數進行調整，則 URL 可能不同。

透過執行 npm start 來啟動您的應用程式，並透過按 F5 或按一下綠色的除錯圖示來在 VS Code 中開始除錯。您現在可以編寫程式碼、設定中斷點、變更程式碼，並除錯剛修改的程式碼，所有工作都可以在編輯器中完成。

在使用 VS Code Debugger 時遇到問題嗎？請參閱他們的疑難排解指南。

WebStorm

您需要安裝WebStorm和JetBrains IDE SupportChrome 擴充功能。

在 WebStorm 選單執行中選擇編輯組態...。然後按一下+並選擇JavaScript 偵錯。將https://127.0.0.1:3000貼到 URL 欄位並儲存組態。

備註：如果您已透過 HOST 或 PORT 環境變數進行調整，則 URL 可能不同。

執行npm start開始您的應用程式，然後在 macOS 上按^D或在 Windows 和 Linux 上按F9，或按一下綠色的偵錯圖示以在 WebStorm 中開始偵錯。

您也可以用相同的方式在 IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro 和 RubyMine 中偵錯應用程式。

自動格式化程式碼

Prettier 是一個見仁見智的程式碼格式化器，支援 JavaScript、CSS 和 JSON。使用 Prettier，您可以自動格式化所撰寫的程式碼，以確保專案中的程式碼樣式一致。有關更多資訊，請參閱Prettier 的 GitHub 頁面，並參閱此頁面以觀看實際範例。

要在每次在 git 中提交時格式化程式碼，我們需要安裝以下相依項

npm install --save husky lint-staged prettier

您也可以使用yarn

yarn add husky lint-staged prettier

husky可讓您像使用 npm 腳本一樣使用 githook。
lint-staged可讓我們在 git 中的暫存檔案上執行腳本。請參閱此有關 lint-staged 的網誌文章，以瞭解有關它的更多資訊。
prettier是我們在提交之前執行的 JavaScript 格式化器。

現在，我們可以在專案根目錄中的package.json新增幾行文字以確保格式化每個檔案正確無誤。

將下列欄位新增至package.json區段

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

接下來，我們將 'lint-staged' 欄位新增至package.json，例如

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --write"
+   ]
+ },
  "scripts": {

現在，每當您提交時，Prettier 都會自動格式化已變更的檔案。您也可以執行./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"以首次格式化您的整個專案。

接下來，您可能希望將 Prettier 整合至您最愛用的編輯器中。請閱讀 Prettier GitHub 頁面上的編輯器整合區段。

語法高亮​

在編輯器中顯示程式碼檢查結果​

延伸或取代預設的 ESLint 設定​

在編輯器中除錯​

Visual Studio Code​

WebStorm​

自動格式化程式碼​