[React] husky, lint-staged

2021-06-27 hit count image

Reactでhuskyとlint-stagedと使ってGitにコミットする時、ESLintとPrettierを実行するように設定してみます。

ブログシリーズ

このブログはシリーズで作成されております。次はブログシリーズのリストです。

概要

以前のブログシリーズでcreate-react-appで生成したReactプロジェクトにPrettierとESLintをインストールして設定する方法について説明しました。

今回のブログポストではhuskylint-stagedを使ってPrettierとESLintを活用する方法について説明します。

プロジェクト準備

Reactのhuskyとlint-stagedを使うため、create-react-appでプロジェクトを生成してみます。create-react-appに詳しくない方は下記のリンクを確認してください。

次のコマンドを実行してhuskyとlint-stagedを使うReactプロジェクトを生成します。

npx create-react-app husky_lint_example --template=typescript

私は主にTypeScriptを使ってReactを開発してるので--template=typescriptオプションを使ってプロジェクトを生成しました。このように生成されたReactプロジェクトにPrettierとESLintを設定します。PrettierとESLintを設定する方法については下記のリンクを参考してください。

husky

GitはHookと言う機能があります。Gitで特定なイベント(コミット、プシューなど)を実行する時、そのイベントにHookを設定してHookに設定されたスクリプトを実行することができます。

huskyとはGit Hookを簡単に使えるように助けてくれるツールです。

そしたら、下記のコマンドを実行してhuskyをインストールします。

npm install --save-dev husky

lint-staged

huskyと一緒によく使えてるlint-stagedはGitのStagedされたファイルに特定なコマンドを実行するように助けてくれるツールです。

GitのStagedされた状態とはgit addコマンドで修正されたファイルをコミットするため追加をした状態を意味します。このようにStaged状態のファイルは再び修正をするとgit addをしてまた追加する必要があります。

lint-stagedはStagedされたファイルを修正した後、git addをしなくても問題ないようにするツールです。

そしたらhuskyと一緒にlint-stagedを使うため下記のコマンドを実行してlint-stagedをインストールします。

npm install --save-dev lint-staged

huskyとlint-stagedの設定

今からhuskyとlint-stagedを使ってGitのCommitを使う時、ESLintとPrettierを実行するように設定をしてみます。

huskyとlint-stagedを設定するためpackage.jsonファイルを開いて下記のように修正します。

{
  ...
  "scripts": {
    ...
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --ext .tsx --ext .ts ./src --fix"
    ],
    "./src/**": [
      "prettier --write ."
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  ...
}

このように修正するとGitを使ってCommitをする時、huskyのpre-commitに登録されたlint-stagedが実行され、lint-stagedに登録されたESLintとPrettierのコマンドが実行されます。

完了

これでReactプロジェクトでhuskyとlint-stagedを使ってESLintとPrettierを実行する方法について説明しました。今からhuskyとlint-stagedで自動化されたESLintとPrettierを使ってみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts