本節大綱

• 前言
• 如何在 React、TS 專案設置 ESLint 和 Prettier
• 其它
• 參考資料
• 結論

前言

第九天文章是分享如何在 React 專案設置 ESLint 和 Prettier，這時候一定會說，現在最熱門的 TypeScript 去哪了呢!?別急這不就來了嗎。

現今 TypeScript 的熱門，確實為許多人帶來好處，哪後續會分享一點這方面的使用感想，這裡就主要分享如何在 React、TS 專案設置 ESLint 和 Prettier。

關於 ESLint 和 Prettier 的介紹，我這裡就不再多說，就專門分享在加上 TS 的功能時，ESLint 和 Prettier 要如何去設定。

如何在 React、TS 專案設置 ESLint 和 Prettier

ESLint 介紹

略，請參考 Day 9 | 如何在 React 專案設置 ESLint 和 Prettier。

ESLint 安裝說明

本人喜好使用 Yarn 工具，故後續都會使用 Yarn 來做示範。

• 使用 Create React App (CRA) 建立專案。
  npx create-react-app my-app --template typescript
npm init react-app my-app --template typescript
yarn create react-app my-app --template typescript
• 安裝 ESLint 套件：yarn add -D eslint
• 執行 ESLint 初始化：yarn run eslint --init

以下是在初始化的過程中，會出現以下的詢問選項整理。

# 請選擇第二項，選擇第三項就會有 Airbnb、Google 等規範，要我們選擇。
How would you like to use ESLint?
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

# 請選擇第一項。
What type of modules does your project use?
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 因為是以 React 做示範，故請選擇 React。
Which framework does your project use?
❯ React
  Vue.js
  None of these

# 依照專案來決定是否要使用 TypeScript。
Does your project use TypeScript? › No / Yes

# 因為 React 是執行在瀏覽器上，故請選擇 Browser。
Where does your code run?
✔ Browser
  Node

# 依個人喜好做選擇，我都選擇 JSON。
What format do you want your config file to be in?
  JavaScript
  YAML
❯ JSON

# 這裡會詢問是否要透過 npm 來安裝以下套件。
   eslint-plugin-react@latest
   @typescript-eslint/eslint-plugin@latest
  @typescript-eslint/parser@latest
# 請選擇 No，因為統一使用 yarn 來安裝。
Would you like to install them now with npm? › No / Yes

初始化結束之後，執行此指令，來安裝以下套件。
yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

Prettier 介紹

略，請參考 Day 9 | 如何在 React 專案設置 ESLint 和 Prettier。

Prettier 安裝說明

• 安裝 Prettier 套件：yarn add --dev --exact prettier
• 安裝 eslint-config-prettier 套件，其目的為關閉所有不必要或可能 ESLint 與 Prettier 衝突的規則。
  yarn add -D eslint-config-prettier
• 新增 "prettier" 到 "extends" 的陣列裡在您的 .eslintrc.* 檔案 (這裡是 .eslintrc.json)，並且要放在最後一個位置，來覆蓋其他配置(官網說明)。

// 要把 prettier 放在最後面。
{
  "extends": [
    // ...,
    "prettier"
  ]
}

• 安裝 eslint-plugin-prettier 套件，將 Prettier 作為 ESLint 規則運行，並將差異報告為單個 ESLint 問題。
  yarn add -D eslint-plugin-prettier
• 在 .eslintrc.json 檔案調整 ESLint 與 Prettier的警告顯示。

// ESLint 預設警告是紅色 (danger) 顯示。
// Prettier 預設警告也是紅色 (danger) 顯示，不跟 ESLint 混淆，因此改成黃色 (warning) 顯示。 
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

• 在 .eslintrc.json 檔案，新增 plugin:prettier/recommended 設定。

{
  // ...,
  "extends": ["plugin:prettier/recommended"]
}

• 在您的專案目錄，新增 .prettierrc.* (本人喜好是 .prettierrc.json) 設定檔案，並加上以下格式化的規則。

另外補充說明一點，有些人的 Prettier 配置，會把預設值也寫進去，這時候您會心想，預設值顧名思義就是您不去寫它，這些規則的規範就是已經訂好了，又何必還去把這預設的規則寫出來，經跟資深前輩的詢問啊，二個思考的方向可以去想，第一個您還真的就不用寫，第二個是就是怕官方，突然去改掉這個預設值，屆時整個程式碼的風格就會跑掉，故這點想法。分享給您。

// 其中 jsxSingleQuote，這是指在 jsx 裡也是使用單引號規則。
{
  "printWidth": 100,
  "useTabs": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

• 在您的專案目錄，新增 .prettierignore 排除檔案，並加上以下要排除格式化的目錄。

.github
.husky
dist
node_modules

• 在 package.json 檔案新增 prettier and lint 檢查及格式化指令。

"scripts": {
  // ...,
  // ESLint 檢查指令
  "lint:check": "eslint --ext=ts,tsx src/",
  // ESLint 修正指令，--fix 修正，--ext=.ts,.tsx 修正副檔名為 .ts,.tsx，src/ 底下全部目錄
  "lint": "eslint --fix --ext=ts,tsx src/",
  // prettier 檢查指令
  "format:check": "prettier . --check --ignore-unknown",
  // prettier 格式化指令，. 是全部目錄，--write 是複寫，--ignore-unknown 略過它不認識的檔案
  "format": "prettier . --write --ignore-unknown",
}

其它

安裝 React hooks 相關的 ESLint

• 安裝 react hooks 相關的 ESLint：yarn add -D eslint-plugin-react-hooks
• 在 .eslintrc.json 檔案，新增 plugin:react-hooks/recommended 設定。

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

• 在 .eslintrc.json 檔案，我們來個更詳細的設定。

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

解決不需要強制引用 React library 的問題

在 React 17.0.0 之後的版本，將 React 是否要引用，變成一個可選擇的規則，為了解決這個問題，在您的 .eslintrc.json 加上一個規則即可。

// 這是指不需要強制 import react
"rules": {
  "react/react-in-jsx-scope": "off"
}

參考資料

• eslint-plugin-react-hooks
• [ESLint] Feedback for 'exhaustive-deps' lint rule
• ESLint + Prettier + Typescript and React in 2022

結論

隨著 TS 的功能越來越強大，現在很多團隊，也都在使用 React 跟 TS 來開發，更不用說 Vue 跟 Angular 還把它當作預設的功能。

故在學好怎樣使用 TS 來開發之前，先來了解寫 code 的習慣，讓 ESLint 跟 Prettier 無縫接軌的跟 React 跟 TS 搭配。

在其它這個章節裡，也另外補充一些好用的套件跟設定，都會有助於您，在開發的迅速及便利。