huskyでcommitとpushの前にjestとlint実行

せっかくeslintを導入しているのであれば、共有リポジトリにeslintルールを無視したものマージしたくはないですよね。
それを防ぐためにcommitやpushの前にgithookを簡単に実行するのがhuskyになります。

今回はざっくりですがセットアップを実施していこうと思います。

環境

husky 7.0 以上
node 16
ubuntu 20.04

lint-stagedとjestは設定されている前提でご紹介します。

※jestとlint-stagedのpackage.jsonは以下です。

  "scripts": {
    "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
    ......
    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-
    "test": "jest",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
    "*.json,.{eslintrc,prettierrc}": [
      "prettier --ignore-path .eslintignore --parser json --write"
    ],
    "*.{css,scss}": [
      "prettier --ignore-path .eslintignore --single-quote --write"
    ],
    "*.{html,md,yml}": [
      "prettier --ignore-path .eslintignore --single-quote --write"
    ],
    "*.{js,css,md}": "prettier --write"
  },
  "browserslist": [],
  "prettier": {
    "singleQuote": true,
    "overrides": [
      {
        "files": [
          ".prettierrc",
          ".eslintrc"
        ],
        "options": {
          "parser": "json"
        }
      }
    ]
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "release/app/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx",
      "json"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "./.erb/scripts/check-build-exists.ts"
    ],
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "url": "http://localhost/"
    },
    "testPathIgnorePatterns": [
      "release/app/dist"
    ],
    "transform": {
      "\\.(ts|tsx|js|jsx)$": "ts-jest"
    }
  },

インストール

以下のコマンドを実行する

# For Yarn
 yarn add husky@7 --dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-7 --remove-v4-config

上記を実行したことで、.huskyフォルダ配下にgit hooksが作成されていることを確認

pre-commit

pre-push

husky v4ではpackage.jsonにスクリプトを記載するのですが、v7から外だしが可能になったようです。

実行確認

git commit

正常にeslintが実行されていることを確認！

※lint-stagedはstagingに上がっているファイルが対象です

git push

yarn test(jest)が実行されていることを確認！

トラブルシューティング

huskyをインストールするだけで.git/hooksが作成される記事が散策されていましたが、自分はインストールだけでは作られませんでした。

pre-commitのフォルダが作成されてあり、pre-commitなどに読み取り権限が付いていることをご確認いただけたらと思います。

公式 husky