摘要

• 這篇文章的目的是 ?
• React 18 + TypeScript 基本專案範例
• 連結

這篇文章的目的是 ?

導入這 5 個套件有助於確保程式碼的品質、一致性和可維護性。它們幫助你在開發過程中捕捉錯誤、維護一致的程式碼風格、強制執行提交訊息規範，並確保樣式表的一致性。這些工具使團隊更容易合作，並提高了代碼庫的整體品質。

React 18 + TypeScript 基本專案範例

ESLint (程式碼靜態分析工具)

• 什麼是 ESLint？：ESLint 是一個 JavaScript 和 TypeScript 的程式碼靜態分析工具，可用於檢查和強制執行程式碼風格和最佳實踐。
• 為什麼要導入 ESLint？：ESLint 可幫助你在開發過程中捕捉潛在的錯誤、強制執行一致的程式碼風格，並提供即時的反饋。這有助於提高程式碼的品質、可讀性和可維護性。

2. Prettier (程式碼格式化工具)

• 什麼是 Prettier？：Prettier 是一個程式碼格式化工具，它可以自動調整程式碼的排版、縮排、換行等，以符合統一的風格規範。
• 為什麼要導入 Prettier？：Prettier 確保你的程式碼風格一致，減少了開發者之間的風格爭議，並節省了時間。它可以與 ESLint 整合，自動修復 ESLint 檢查中的格式問題。

3. husky (Git 鉤子工具)

• 什麼是 husky？：husky 是一個 Git 鉤子工具，可以在 Git 操作（如 commit 或 push）之前執行指定的腳本。
• 為什麼要導入 husky？：husky 可以確保在提交代碼之前執行必要的檢查，如格式化程式碼、運行測試等。這有助於防止低質量或錯誤的代碼進入代碼庫。

4. commit-lint (提交訊息檢查工具)

• 什麼是 commit-lint？：commit-lint 是一個用於檢查提交訊息的工具，它可確保提交訊息符合指定的格式和規範。
• 為什麼要導入 commit-lint？：良好的提交訊息規範有助於維護代碼庫的可讀性和可維護性。commit-lint 確保提交訊息清晰、一致，並提供有用的歷史記錄。

5. stylelint (CSS/SCSS 靜態分析工具)

• 什麼是 stylelint？：stylelint 是一個用於檢查 CSS 和 SCSS 檔案的程式碼靜態分析工具，可幫助確保一致的樣式撰寫風格。
• 為什麼要導入 stylelint？：stylelint 有助於維護一致的樣式風格，減少潛在的錯誤和網頁渲染問題。這對於大型專案或多人協作特別有用，確保樣式表的一致性。

步驟 1: 建立 React 18 專案
首先，使用 Create React App 或其他你喜歡的方式建立 React 18 專案。如果你已經建立了專案，請確保它是基於 React 18 和 TypeScript。

步驟 2: 安裝 ESLint 和相關套件
在你的專案根目錄下，執行以下命令來安裝 ESLint 和相關套件：

bashCopy code
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

步驟 3: 配置 ESLint
在專案根目錄下，建立一個名為 .eslintrc.js 的 ESLint 配置文件，並添加以下基本配置：

javascriptCopy code
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  rules: {
    // 在這裡添加你的自訂規則
  },
};

步驟 4: 安裝 Prettier
在你的專案根目錄下，執行以下命令來安裝 Prettier：

bashCopy code
npm install prettier --save-dev

步驟 5: 配置 Prettier
建立一個名為 .prettierrc.js 的 Prettier 配置文件，並配置你的偏好選項，例如：

javascriptCopy code
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  semi: true,
  trailingComma: 'all',
};

步驟 6: 安裝 husky 和 lint-staged
在專案根目錄下，執行以下命令來安裝 husky 和 lint-staged：

bashCopy code
npm install husky lint-staged --save-dev

步驟 7: 配置 husky 和 lint-staged
在 package.json 文件中，添加以下配置，以確保在 commit 時自動執行 lint 和格式化檢查：

jsonCopy code
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

步驟 8: 安裝 commit-lint
在專案根目錄下，執行以下命令來安裝 commit-lint：

bashCopy code
npm install @commitlint/{config-conventional,cli} --save-dev

步驟 9: 配置 commit-lint
建立一個名為 commitlint.config.js 的 commit-lint 配置文件，並配置如下：

javascriptCopy code
module.exports = { extends: ['@commitlint/config-conventional'] };

步驟 10: 安裝 stylelint
如果你需要 stylelint 來檢查 CSS 或 SCSS 檔案，則執行以下命令來安裝 stylelint：

bashCopy code
npm install stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier stylelint-scss --save-dev

步驟 11: 配置 stylelint
建立一個名為 .stylelintrc.js 的 stylelint 配置文件，並配置如下：

javascriptCopy code
module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  plugins: ['stylelint-prettier', 'stylelint-scss'],
  rules: {
    'prettier/prettier': true,
    // 在這裡添加你的自訂規則
  },
};

步驟 12: 執行測試
現在，你已經完成了設定，可以執行測試以確保一切運作正常：

bashCopy code
npm test

這樣就完成了整合 ESLint、Prettier、husky、commit-lint 和 stylelint 到你的 React 18 + TypeScript 專案的步驟。這些工具將協助你保持程式碼的一致性、品質和可讀性，並在提交代碼時進行自動檢查，以確保代碼的品質。

連結

• ESLint：https://eslint.org/
• Prettier：https://prettier.io/
• husky：https://github.com/typicode/husky
• commit-lint：https://github.com/conventional-changelog/commitlint
• stylelint：https://stylelint.io/