環境
- intel Mac
- VSCode
前回記事
- 以下の記事にprettierやeslintの設定を書いてあります。
- まだ読んでいない方はぜひこちらからどうぞ
huskyとは
- git hookと言ってある特定のgitの操作をしたら指定してあったコマンドを実行する
- そのgit hookを手助けしてくれるものがhusky君
lint-stagedの実行
- staging環境(git addされたもの)にあるファイルに対して、commitのタイミングでコマンドを実行できる
- lint-stagedに登録したものがcommitのタイミングで走るようになる
- 今回はformatterとlinterによる整形を行う処理を走らせようにする
ディレクトリ構成
- 以下のようなディレクトリ構成になっている
- SPA構成にしたいのでfrontendとbackendを別々のディレクトリで作成している
- gitのリポジトリがあるディレクトリ(プロジェクトのルートディレクトリ)の直下に
.huskyを作成する
プロジェクトルート
├──.husky
│ ├── _
│ │ └── husky.sh
│ └── pre-commit
├──frontend
├──backend
導入
- huskyとlint-stagedの導入方法
- コンテナ内
$ npm i -D husky lint-staged
- Mac側(プロジェクトルートディレクトリにて)
$ npx husky add .husky/pre-commit "cd frontend && npm run lint-staged"
- これでプロジェクト直下に
.huskyファイルとその下にpre-commitファイルができている状態になる - ネットで調べてみると、古いバージョンなら
package.json内で完結するように書かれている記事もあったが、どうやら最新のバージョンなどはpre-commitファイルを作る形になりそう
package.jsonの中身
"scripts": {
"prepare": "husky install",
"lint-staged": "lint-staged",
},
"devDependencies": {
"husky": "^8.0.0",
"lint-staged": "^13.0.0",
},
// ここに設定したコマンドが実行される
"lint-staged": {
"*.{ts,vue}": [
"eslint --fix"
],
"*": "prettier -w -u"
}
pre-commitファイルの中身
- 一回frontendディレクトリに移動して、
npm run lint-stagedを実行する- 理由としてはpackage.jsonがあるディレクトリがfrontendディレクトリになるため
- ルートディレクトリで
npm run lint-stagedを実行すると、scriptがないと怒られる
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# commitするタイミングでfrontendディレクトリ直下にあるpackage.jsonの"lint-staged"を実行
cd frontend && npm run lint-staged
-
エラーの時に以下のようにエラーが出てくれる
-
成功したら以下のように上手くcommitできるようになる
勘違いしていた点
- docker環境なので、一回コンテナ内に入ってからlist-stagedコマンドを実行するのかと思っていた
- マウントしているから、mac側からもコンテナ側からもpackage.jsonにはアクセスできる
- つまり、
npm run lint-stagedとかはdockerもmacも両方の実行できる
- つまり、
- husky君からすれば、docker環境とかは特に関係ない
- マウントしているから、mac側からもコンテナ側からもpackage.jsonにはアクセスできる
- 以下のように書いてしまい、
current directory is not a git directory!というエラーが出て、2時間くらい時間を取られた- 調べても全然出てこなくて困った
- 仕組みを知っておくのは大事
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# frontendのコンテナ(nodeコンテナ)に入ってからnpm run lint-stagedを実行する必要があるのかと思っていた
docker compose exec node npm run lint-staged
lint-stagedのタイミングでtsかvueの片方しか認識されない
- 以下の書き方を見てください
package.json
"lint-staged": {
"*.{vue, ts}": [
"eslint --fix",
"prettier --write"
]
}
-
特に問題ないかと一見見えますが、これだと
vueファイルのみしか認識されません。
-
この原因としては、
"*.{vue, ts}":の部分で、vueとtsの間にスペースが入ってしまっていることです。- スペースを取り除いてあげるとts側も正常に認識されます。
package.json
"lint-staged": {
"*.{vue,ts}": [
"eslint --fix",
"prettier --write"
]
}
- jsonの書き方を熟知している人ならこういうミスはないのかもしれないですが、個人的には分かりづらいエラーでしたので、どなたかの助けになれば幸いです。