はじめに
pre-commit&Gitフックでcommit前にフォーマッターと解析ツール、テストを実行させます。
アプリケーションはマイクロサービス(Rails api × Vue)です。開発はDockerを使用します。
環境
MacBook Pro intel 2020
macOS ventura 13.5.1
Docker 20.10.21
Docker Desktop 4.14.0 (91374)
バックエンド
Rails 7.0.7
ruby 3.2.2
フロントエンド
Node.js 18.7.1
Vue 3.3.4
npm 9.8.1
実行するツール
ツール自体の具体的な解説は行いません。
Rails
機能 | ツール |
---|---|
テスト | RSpec |
静的コード解析ツール | rubocop |
Vue
機能 | ツール |
---|---|
テスト | Jest |
静的コード解析ツール | ESlint |
フォーマッター | Prettier |
スクリプト
pre-commitで自動修正は不要です。修正が必要であるコードを検知するスクリプトを追加しました。
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"check-format": "prettier --check 'src/**/*.{js,vue}'",
"format": "prettier --write 'src/**/*.{js,vue}'",
"lint": "eslint --fix 'src/**/*.{js,vue}'",
"fix": "npm run format && npm run lint",
"test": "jest"
},
npm run check-format
pre-commitとGitフックの設定
.git/hooksにpre-commitがあることを確認します。無い場合は作成します。
$ cd .git/hooks/
$ ls
commit-msg pre-commit prepare-commit-msg
実行権限を与えます。
chmod a+x pre-commit
動作確認してみます。pre-commitにechoを記述します。
#!/usr/bin/env bash
echo '呼び出されました'
commit前に実行されていることを確認できました。
$ git commit -m "pre-commitのテスト"
呼び出されました
[develop#1 8ba2d79] pre-commitのテスト
1 file changed, 3 insertions(+)
pre-commitの実行順序
- Prettier
- ESlint
- Jest
- rubocop
- RSpec
ツールで1つでも警告が出たらcommitを中断します。
ツールコマンドの実装
差分が発生した場合、それぞれツールを実行させます。
#!/bin/bash
# フロントエンドのチェック
if git diff --cached --name-only --diff-filter=AM | grep '^frontend/'; then
echo "Running Frontend checks..."
# Prettier
echo "Checking formatting with Prettier..."
docker-compose exec -T frontend npm run check-format
if [ $? -ne 0 ]; then
echo "Prettier found formatting inconsistencies!"
exit 1
fi
# eslint
echo "Linting with ESLint..."
docker-compose exec -T frontend npm run lint
if [ $? -ne 0 ]; then
echo "ESLint found issues!"
exit 1
fi
# frontend tests
echo "Running Frontend tests..."
docker-compose exec -T frontend npm run test
if [ $? -ne 0 ]; then
echo "Frontend tests failed!"
exit 1
fi
fi
# バックエンドのチェック
if git diff --cached --name-only --diff-filter=AM | grep '^backend/'; then
echo "Running Backend checks..."
# rubocop
echo "Linting with RuboCop..."
docker-compose exec -T backend bundle exec rubocop
if [ $? -ne 0 ]; then
echo "RuboCop found issues!"
exit 1
fi
# rspec
echo "Running RSpec tests..."
docker-compose exec -T backend bundle exec rspec
if [ $? -ne 0 ]; then
echo "RSpec tests failed!"
exit 1
fi
fi
echo "All checks passed!"
exit 0
tree -L 1
.
├── README.md
├── backend
├── docker-compose.yml
├── frontend
└── web
あとがき
無事実装ができました!これで無駄なGit操作やCI/CDのやり直しが減り、開発に注力できると思います。手動でもcommit前にきちんとツールは実行しましょう!
今回省いたESlintとPrettierの導入について記事を書いています。是非読んでみてください!
参考