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

次に、依存関係をインストールするときに Husky をセットアップするために、package.json に次のスクリプトを追加します。

"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 はコードベースで一貫したスタイルを強制します。

インストール

両方を開発依存関係としてインストールします:

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 ステージングを実行するためのコミット前フックを追加します:

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 中国語 Web サイトの他の関連記事を参照してください。