vue3にlint-staged,huskyを導入して自動整形を実施するメモ

やりたいこと

  • git commitする前にファイルをeslintとかして整形したい

huskyとlint-stagedについて

  • huskyはGit hooksが簡単にできるソフトウェア
    • これだけを使えばおそらくやりたいことが実現できるが、これだけでは、すべてのファイルに対してeslintしちゃう(重い)
  • lint-stagedというソフトウェアも組み合わせる
    • これでgitでstageされているファイルのみが対象になる(はず)

注意点

  • huskyはv6以降で大きく記載が変わっているようです。
    • 今回はv6以降でいきます
    • また、node 12以上が要求されましたので、今回nodeあげました

環境

$ node -v
v14.18.0
$ npm -v
6.14.15

参考

以下のサイト参考にさせていただきました。ありがとうございます。

fwywd.com

husky, lint-stagedをインストールする

$ npm install -D husky lint-staged

package.jsonにlint-stagedで実施する処理を記載する(今回はeslintとprettierしたい)

  "lint-staged": {
    "*.{ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  },

これでts,vueに対してeslint,prettierしてくれる

また、今回はlint-stagedというコマンドを使ってlint-stagedを起動するようにするので、以下も追加

  "scripts": {
    "lint-staged": "lint-staged",
  },

huskyつかっての設定ファイルの作成

  • husky v6以降はhusky installコマンドを使って設定ファイルを作成する

github.com

$ npx husky install

上記コマンドを.gitディレクトリが存在するディレクトリで実行する。
ただし、.gitディレクトリにpackage.jsonがない場合(今回がそうだった)、インストール用のディレクトリを別途指定してやる必要がある

$ npx husky install src/.husky

このような感じで。(これでsrc/.huskyディレクトリに設定ファイルが作成される)

zenn.dev

これでhuskyの初期設定は完了

pre-commit時に実行したいコマンドの設定

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

これで準備完了

実際にコミットする

git commitコマンドを実施したときに、コミットメッセージを書く前にpre-commitが動く

f:id:y-ni-shi:20211010215815p:plain