Zenn
🌟

huskyを利用してgit hooksを作る

2022/11/04に公開
ESLint
Prettier
husky
tech

プロジェクトにはESLintやPrettierなどのツールをインストールしていますが、共同作業の相手が、VSCodeやプラグインを使っていなかったらそれらのツールには効果が出ません

なので、git pre-commit hookという「コミットする前に必ずすること」というルールを強制的に追加して、プロジェクトのフォーマットを守りましょう

ESLintをインストール

まずは以下のコマンドを使ってESLintをインストールしましょう

npm i -D eslint

次は、ESLintのコンフィグファイルを作ります、.eslintrcというファイルを作成します

.eslintrc
{
	"env": {
		"es6": true,
		"browser": true
	},
	"extends": [],
	"rules": {
	}
}

AirbnbのESLintプラグインをインストールします

npm i -D eslint-config-airbnb-base

プラグインを.eslintrcに追加します

.eslintrc
{
	"env": {
		"es6": true,
		"browser": true
	},
-	"extends": [],
+	"extends": ["airbnb-base"],
	"rules": {
	}
}

VSCodeのプラグインESLintはインストールされているなら、ここでJSコードのLintが出るようになりました

.eslintignoreというファイルを作成しましょう

.eslintignore
node_modules
dist
.github

Prettierをインストール

prettierをインストールします

npm i -D prettier

prettierのコンフィグファイル：.prettierrcを作成します

.prettierrc
{
	"singleQuote": true
}

次はVSCodeのセーブフォーマット機能を追加します
.vscode/settings.jsonというファイルを作ります

settings.json
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

これでファイルをセーブすれば自動的にフォーマットできるようになりました

prettierに無視してほしいファイルを定義します
.prettierignoreというファイルを作成しましょう

.prettierignore
dist
.github

lint-stagedをインストール

フォマットのコミット検査の時間を短縮するため、lint-stagedをインストールしましょう

npm i -D lint-staged

コンフィグファイル.lintstagedrcを作成しましょう

.lintstagedrc
{
	"*.js": [
		"npx eslint . --fix",
		"npx prettier --write ."
	]
}

git add .でファイルをステージに加えてから、npm lint-staged -vというコマンドを打ったら、ステージ内の全てのJSファイルに対して、"npx eslint . --fix"、"npx prettier --write ."の二つのコマンドを自動的に実行されます

huskyをインストール

npm i -D husky

huksyのコンフィグファイル：.huskyrcを作成します

.huskyrc
{
	"hooks": {
		"pre-commit": "lint-staged",
		"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
	}
}

huksyの初期化コマンドを実行します

npx husky-init && npm install

.huskyフォルダが生成されました、.husky/pre-commitというファイルを編集します

.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

-npm test
+npm run lint-staged

package.jsonのscriptsにlint-stagedコマンドを追加します

package.json
{
	"scripts": {
		...
		"lint-staged": "lint-staged"
	}
}

これで変なコードを入れて、コミットしてみたら阻止されることができました

Discussion