npmモジュールを用いて ESLint(eslint --fix) / Rubocop(rubocop -a)といったコマンドを コミット前に実行するための方法を紹介
#1 クーコム Tech Meetup 代官山でLT会(初心者歓迎) https://coocom.connpass.com/event/138471/
コミット前にLintチェックしませんか?#1 クーコム Tech Meetup 代官山でLT会2019/07/31(水)矢崎 祐樹 / ざき / @zucky_zakizaki
View Slide
ざき(やざき ゆうき)@zucky_zakizaki● 株式会社ランチェスター● Ruby / Vue.js● TypeScriptに興味がある● ブログ好き- はてなブログ- note
みなさんLintチェックしてますか?
Rubocop(rubocop -a)ESLint / JSLint
コミット前にLint走らせるの忘れちゃう
仕組みで解決しちゃいましょう!
1. husky- git commit時に発生する Gitフック「pre-commit」をhuskyでハンドリング2. lint-staged- Gitのステージに上がっているファイルを対象に eslint等のコマンドを実行できるnpmモジュールの紹介
package.jsonの設定(eslintの場合)
package.jsonの設定(eslintの場合)huskyでpre-commit検知、lint-stagedへハンドリングjsファイルに対して、eslint&自動修正実行自動修正されたjsファイルをgit add で再度ステージへ対象外のファイルを指定
実行例(eslintの場合)
huskyでpre-commit検知package.jsonに記載したコマンド実行実行例(eslintの場合)
1. CI環境がない場合- 各開発者の環境下にて、 Lintやテストし忘れた状態でコミット&Pushする という事故を防げる- 「個人開発、CIメンテ時の代替」として使える2. コミット数を減らしたい場合- 「CIにてLintNG→コミット→Push」 というサイクルによる無駄なコミットを防げるメリット・使える場面
細かい手順はこちら参考記事- コミット前に Lint を強制するなら lint-staged が便利- husky + lint-stagedでgitのprecommit時にimageminを行い、minifyした画像のみコミットされるようにする- 【JavaScript】コミットする前にlint-stagedでeslintのチェックをする- 【Ruby】コミットする前に husky+lint-staged で、Rubocopの自動整形&チェックを行う
coocom