huskyとlint-stagedを使ってlint errorが発生していたらcommitできないようにしよう
パーソンリンクアドベントカレンダー6日目の記事です!
前提
- eslintは導入済み
以下のようなディレクトリ構成で行いました。
.
├── front
└── server
手順
まずfront
配下でライブラリのインストール
yarn add -D husky lint-staged
huskyの初期化コマンドの実行
npx husky-init && yarn
package.json
をカスタマイズ
{
"scripts": {
...
"lint": "eslint . --ext ts --ext vue --ext js",
"prepare": "cd .. && husky install front/.husky",
"lint-staged": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.@(ts|tsx|vue)": [
"yarn lint"
]
}
}
下記コマンドを実行
yarn prepare
自動生成された.husky
ディレクトリ配下にpre-commit
というファイルを作成する
下記の様に記述
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
cd front
yarn lint-staged
最後に下記を実行
cp -r ./front/.husky .
ポイント
package.json
と.git
のディレクトリが同階層にいないと正常に実行されない為、度々cd front
が挟まれていました。
実際にpre-commit
を実行しないと行けないため、最終的にroot階層に.husky
をcp
しました。
動作確認
MacBook-Pro:front $ git commit -m "test"
yarn run v1.22.17
$ lint-staged
✔ Preparing...
⚠ Running tasks...
❯ Running tasks for *.@(ts|tsx|vue)
✖ yarn lint [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up...
✖ yarn lint:
error Command failed with exit code 1.
$ eslint . --ext ts --ext vue --ext js /Users/user_name/project/example-project/front/components/common/Container.vue
/Users/user_name/project/example-project/front/components/common/Container.vue
1:1 error Component name "Container" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-commit hook exited with code 1 (error)
MacBook-Pro:front $ git commit -m "test"
yarn run v1.22.17
$ lint-staged
✔ Preparing...
⚠ Running tasks...
❯ Running tasks for *.@(ts|tsx|vue)
✖ yarn lint [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up...
✖ yarn lint:
error Command failed with exit code 1.
$ eslint . --ext ts --ext vue --ext js /Users/user_name/project/example-project/front/components/common/Container.vue
/Users/user_name/project/example-project/front/components/common/Container.vue
1:1 error Component name "Container" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-commit hook exited with code 1 (error)
commit前にyarn lint-staged
が実行されており、lint errorが発生している為、commitできないのが確認取れました。
VSCodeでも実際にエラーが出ていることが確認取れました。
これでコードレビュー時にlint errorに怯えなくて済みます。。。
参考
https://typicode.github.io/husky/#/
https://zenn.dev/seya/articles/c908d88df0a587
https://kic-yuuki.hatenablog.com/entry/2019/05/27/090515
Author And Source
この問題について(huskyとlint-stagedを使ってlint errorが発生していたらcommitできないようにしよう), 我々は、より多くの情報をここで見つけました https://qiita.com/tommy0218/items/4491faa0b56d88944db6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .