huskyを使ってeslintとprettierを強制する
今まで手動でeslintとprettierをやっていたんですが漏れたり、
そもそも手動というのが辛すぎるのでコミット時に自動で実行してほしいなーと思ったのでやってみました。
eslintやprettierをコミット時に実行するモジュールとして「lint-staged」を使いました。
つまり、huskyを使ってlint-stagedをコミット時に実行するようにして、eslintとprettierを強制するわけですね！
huskyとは？
huskyはGit hooksが簡単にできるパッケージです。
Git hooks とはコミットやプッシュなどの特定のアクションが発生したときにスクリプトを実行する仕組みになります。
lint-stagedとは？
lint-stagedはステージングしたファイルに対し、特定のコマンドが実行できるパッケージです。 例えば、Node.jsのnpmスクリプトに定義しているスクリプトを実行できるのでとても便利です！
設定してみる
環境
- WIndows11
huskyの設定
husky のインストール
npm i -D husky
husky の初期化
npx husky install
lint-stagedの設定
lint-stagedのインストール
npm i -D lint-staged
package.jsonにスクリプト設定を追加する
"scripts": {
...,
"lint-staged": "lint-staged"
},
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"npx eslint . --fix",
"npx prettier --write ."
]
},
}
hooks の登録
コミット時に動くスクリプトの設定
npx husky add .husky/pre-commit "lint-staged"
実行してみた
git commit > husky-sample@1.0.0 lint-staged > lint-staged [STARTED] Preparing lint-staged... [SUCCESS] Preparing lint-staged... [STARTED] Running tasks for staged files... [STARTED] package.json — 23 files [STARTED] *.{js,ts,jsx,tsx} — 5 files [STARTED] npx eslint . --fix [SUCCESS] npx eslint . --fix [STARTED] npx prettier --write . [SUCCESS] npx prettier --write . [SUCCESS] *.{js,ts,jsx,tsx} — 5 files [SUCCESS] package.json — 23 files [SUCCESS] Running tasks for staged files... [STARTED] Applying modifications from tasks... [FAILED] The following paths are ignored by one of your .gitignore files: [FAILED] node_modules [FAILED] Use -f if you really want to add them. [STARTED] Cleaning up temporary files... [SUCCESS] Cleaning up temporary files... Aborting commit due to empty commit message.
PS D:\git\husky-sample>
PS D:\git\husky-sample>
PS D:\git\husky-sample> git commit -m "test: husky"
> husky-sample@1.0.0 lint-staged
> lint-staged
[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 23 files
[STARTED] *.{js,ts,jsx,tsx} — 5 files
[STARTED] npx eslint . --fix
[SUCCESS] npx eslint . --fix
[STARTED] npx prettier --write .
[SUCCESS] npx prettier --write .
[SUCCESS] *.{js,ts,jsx,tsx} — 5 files
[SUCCESS] package.json — 23 files
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[FAILED] The following paths are ignored by one of your .gitignore files:
[FAILED] node_modules
[FAILED] Use -f if you really want to add them.
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...
[main 1b63285] test: husky
23 files changed, 8548 insertions(+), 1 deletion(-)
