[React] husky, lint-staged

ブログシリーズ

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

概要

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

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

プロジェクト準備

Reactのhuskyとlint-stagedを使うため、create-react-appでプロジェクトを生成してみます。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の公式サイト: https://typicode.github.io/husky/

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

npm install --save-dev husky

lint-staged

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

lint-stagedの公式ページ: https://github.com/okonet/lint-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"
    }
  },
  ...
}