コミット前に Lintチェックしませんか？ #1 クーコム Tech Meetup 代官山でLT会 2019/07/31(水) 矢崎 祐樹 / ざき / @zucky_zakizaki

ざき （やざき ゆうき） @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