ESLINTをGENTコミットで実行する

どのように、あなたのプロジェクトで構成されたESLINT規則がすべてのあなたのチームメンバーと問題によるコードによってあとに続いているかどうか、あなたはリモートGITリポジトリにプッシュされませんか?
質問への答えは使用Husky package Gitフックで.Git hooks トリガのための最も人気のある方法の一つであり、エスラインルールのようなさまざまな副作用を実施する.ハスキーはGitフックに依存していて、あなたのチームの誰かがコミットすることができて、Gitに新しい変化を押す前に、すべての問題が解決されることを確認します.

仮定

あなたはreactjsの基本的な知識を持って

あなたは以前にeslintで働いていて、あなたのプロジェクトでeslintのために構成ファイルを必要としました

何がgitフックですか？

Gitフックは、Gitが実行するスクリプトのセットです.Gitフックは内蔵機能です-あなたは彼らが働くために何もダウンロードする必要はありません.
プロジェクトでgitを初期化するとgit init , Gitのフックも自動的に追加されます.あなたはフォルダの下に各イベントのサンプルファイルを見つけることができますyour_project_path/.git/hooks .
さまざまな種類のフックのサンプルファイルの一覧を表示するには、次のコマンドを押すことができます.

  $ ls your_project_path/.git/hooks

アットTruemark , 私たちは通常、“git commit”の前にeslintを実行することでコーディング規約とコード品質を実施するのに使います.

ハスキーとは何か

Gitフックに注意する1つの重要なことは、それがバージョン管理されていません、フックフォルダに加えるものは何でもあなたのマシンだけで、Gitで構成されないことを意味します.
それで、あなたのチームの新しいメンバーが倉庫をクローンするとき、何が起こりますか?
何も、私は上記のようなサンプルファイルを取得します.
何?
それから、「我々がチームとしてどのように、フックが誰のためにでも実行されることを確認しますか?」
その答えはHuskyパッケージです.
ハスキーPackageは、あなたとあなたのチームがあなたのプロジェクトでGitフックを管理して、構成するのを援助します.
「ハスキー」をプロジェクトにインストールしましたrepoをクローンした後、あなたはnpm run prepare そして、すべてのフックはあなたのマシンでハスキーによって構成されます.
あなたが手動でフックのためにスクリプトを書く必要がないので、ハスキーはGitフックを非常に扱いやすくします.実行するコマンドを追加することができます.たとえば、ハスキーによって提供された設定ファイル内でコミットする前にeslintを実行します.

インストールハスキー

コマンドラインで次のコマンドを実行します.

  npm install husky -D

これはHuskyパッケージをパッケージに追加します."devendencies "の下のJSON :

  "devDependencies": {
    // other dependencies here,
    "husky": "^7.0.4"
  }

プロジェクトでgitフックを有効にする

Huskyパッケージによって提供されるコマンドを実行することで、プロジェクトのGitフックを有効にすることができます.プロジェクトルートパスで次のコマンドを実行します.

  npm set-script prepare "husky install"
  npm run prepare

上記のコマンドを実行した後、次のパッケージを参照してください.JSON :

  "scripts": {
    // other scripts here,
    "prepare": "husky install"
  }

これはまた、フォルダ内のプロジェクトに必要なフックを追加します.git/hooks/ .
また、フォルダの下にハスキーの設定ファイルを追加します.husky プロジェクトのルートの中.このファイルは、プロジェクトで設定されたすべてのGitフックを制御するために使用されます.また、これは、コミットの前にeslintを実行するための設定を追加する場所です.

ハスキーでプレコミットフックとしてeslintを有効にする

パッケージの下にスクリプトを更新します.JSONを追加してスクリプトを追加します.

  "scripts": {
      // other scripts here,
      "lint": "eslint ."
    }

次のコマンドを実行することによって、ハスキーとESLINTを実行するためにpre - commitフックを加えてください

  npx husky add .husky/pre-commit "npm run lint"

次のコードが表示されます.husky/pre-commit 今すぐファイル

  #!/bin/sh
  . "$(dirname "$0")/_/husky.sh"

  npm run lint

ESPINTをGit commitで実行する

コードを変更したら、コードをコミットしてみてください.

  git add .
  git commit -m "your commit message"

Gitフックはコミット前にeslintを実行し、エラーが発生した場合はスローします.エラーが発生しなかった場合は、手動で問題のある新しいコードを追加し、フックを🙈
これはコードに問題がある場合に表示されるものと似ています.

エラーがない場合、コードはGitにコミットされ、リモートリポジトリにプッシュできます.

リントは何ですか？

ハスキーとは、プロジェクトの中のすべてのファイル上でeslint実行され、それは良いアイデアかどうか私に尋ねる場合私は、それが非常に悪い考えであるとあなたに話します.
なぜ?機能の一部として変更されなかったコードの上でeslintを走らせているので、いろいろな予期せぬバグにつながることができます.
大きなプロジェクトでは、プロジェクト内のすべてのファイルでeslintを実行するのに時間がかかります.また、古いプロジェクトでは、座って、新しい機能を出荷する代わりにすべてのベストプラクティスの問題を修正する意味がありません.
それで、どのように我々は変更されたコードだけでeslintを実行しますか?
答えはlint-staged . これは、現在のコミットで変更されたファイルにのみ事前コミットフックを実行するのに役立ちますパッケージです.

インストールリントステージ

次のコマンドを実行して、プロジェクトに格納されているリントをインストールします.

  npm install lint-staged --save-dev

次のパッケージに表示されます.JSON :

  "devDependencies": {
    // other dependencies here,
    "lint-staged": "^12.3.8",
  }

ハスキーとリントステージで" git commit "を実行する

あなたは別のファイルまたはパッケージ内で段階的にリントを構成することができます.JSON自体は、一つのコマンドしかないので、設定のために別のファイルを持つ価値がないと感じました.
すべてのサポートオプションを表示できますhere .
パッケージに以下を追加します.スクリプトの下のJSON :

  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    // other scripts here,
  },
  "lint-staged": {
    "*.{js,jsx}": "eslint --fix"
  }

これらの拡張子だけを持つファイルがリントを通して実行されるように、我々は{ JS , JSX }を加えました.これはTTSのような他の拡張子をサポートするために更新できます.
LINTを実行して他のコマンドを削除する前コミットファイルを更新します.

  #!/bin/sh
  . "$(dirname "$0")/_/husky.sh"

  npx lint-staged

これにより、リント段階のスクリプトが実行されます.
テストするには、手動で問題を使用して新しいコードを追加することができますし、変更されたファイルだけではなく、プロジェクト内のすべてのファイルの代わりにスローされた問題を参照してください以前に何が起こったかのようにリント段階を構成した.

結論

プロジェクトで構成されているHuskyパッケージでは、開発者のローカルマシンでESLINTによって既に検出されている可能性があるマージ要求の問題についてコメントする必要はありません.この方法では、あなたとあなたのチームは、プロジェクトとメンバーのチームの全体的な成長につながるマージ要求に意味のある議論を持つことに集中することができます.
読書ありがとう.ハッピーコーディング!

イメージクレジット

カバーイメージWOLF Λ R T on Unsplash

参考文献

Git Hooks

Husky - Official Documentation

Lint Staged - Official Documentation