使用 Husky、Commitlint、Prettier 和 Lint-Staging 增強您的開發工作流程

設定自動化工作流程可以大幅提高專案中的程式碼品質和一致性。在本指南中，我們將逐步設定 Husky、Commitlint、Prettier 和 Lint-Staging，以確保您的程式碼庫格式一致、遵循提交訊息約定，並在每次合併後具有最新的依賴項。

設定哈士奇

Husky 可協助您輕鬆管理 Git 掛鉤，允許在每次提交之前執行程式碼品質檢查等自動化任務。

安裝

使用 npm 將 Husky 安裝為開發依賴項（我們將在本文中使用 npm）：

npm install --save-dev husky

初始化

要建立用於儲存 Git 掛鉤的 .husky 目錄，請執行：

npx husky init

接下來，在 package.json 中新增以下腳本以在安裝依賴項時設定 Husky：

"scripts": {
  "prepare": "husky install"
}

配置 Commitlint

Commitlint 確保所有提交訊息遵循一致的格式，維護乾淨的提交歷史記錄。

安裝

安裝 Commitlint 以及常規設定：

npm install --save-dev @commitlint/config-conventional @commitlint/cli

設定

1. 在 .husky 中建立一個 commit-msg 鉤子： 現在在 .husky 目錄中建立一個名為 commit-msg 的新檔案並新增以下行：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"\""

1. 將 commitlint.config.js 檔案加入專案的根目錄，其中包含以下內容：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};

添加 Lint-Staging 和 Prettier

Lint-Staging 允許您在暫存檔案上執行腳本，而 Prettier 在您的程式碼庫中強制執行一致的樣式。

安裝

將兩者安裝為開發相依性：

npm install --save-dev lint-staged prettier

更漂亮的配置

使用您首選的配置在專案根目錄中建立一個 .prettierrc.json 檔案。這是一個例子：

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 120,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5", 
  "semi": true, 
  "singleQuote": true,
  "bracketSpacing": true, 
  "arrowParens": "always",
  "jsxSingleQuote": false, 
  "bracketSameLine": false,
  "endOfLine": "lf"
}

Lint 階段配置

將下列組態加入 lint-staged 下的 package.json 中：

"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": [
      "prettier -w"
    ]
  }

新增預提交掛鉤來運行 Lint-Staging：

npx husky add .husky/pre-commit "npx lint-staged"

為依賴項新增合併後掛鉤

合併後掛鉤可確保每次合併後透過執行 npm install 或任何套件管理器更新您的依賴項。

建立合併後鉤子：

npx husky add .husky/post-merge "npm install"

結論

透過此設置，您的專案將維護標準化的提交訊息格式，自動格式化程式碼，並在合併後保持依賴項最新。這種強大的工作流程將簡化協作並提高程式碼質量，幫助您專注於建立出色的功能。

以上是使用 Husky、Commitlint、Prettier 和 Lint-Staging 增強您的開發工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！