コミット前に Lintチェックしませんか？

npmモジュールを用いて
ESLint(eslint --fix) / Rubocop(rubocop -a)といったコマンドを
コミット前に実行するための方法を紹介

#1 クーコム Tech Meetup 代官山でLT会（初心者歓迎）
https://coocom.connpass.com/event/138471/

Transcript

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

   View Slide

2. ざき
   （やざき ゆうき）
   @zucky_zakizaki
   ● 株式会社ランチェスター
   ● Ruby / Vue.js
   ● TypeScriptに興味がある
   ● ブログ好き
   - はてなブログ
   - note
   

   View Slide

3. みなさん
   Lintチェックしてますか？
   

   View Slide

4. Rubocop
   (rubocop -a)
   ESLint / JSLint
   

   View Slide

5. コミット前に
   Lint走らせるの
   忘れちゃう
   

   View Slide

6. 仕組みで解決
   しちゃいましょう！
   

   View Slide

7. 1. husky
   - git commit時に発生する

   Gitフック「pre-commit」をhuskyでハンドリング
   2. lint-staged
   - Gitのステージに上がっているファイルを対象に

   eslint等のコマンドを実行できる
   npmモジュールの紹介
   

   View Slide

8. package.jsonの設定（eslintの場合）
   

   View Slide

9. package.jsonの設定（eslintの場合）
   huskyでpre-commit検知、
   lint-stagedへハンドリング
   jsファイルに対して、
   eslint＆自動修正実行
   自動修正されたjsファイルを
   git add で再度ステージへ
   対象外のファイルを指定
   

   View Slide

10. 実行例（eslintの場合）
    

    View Slide

11. huskyでpre-commit検知
    package.jsonに記載した
    コマンド実行
    実行例（eslintの場合）
    

    View Slide

12. 1. CI環境がない場合
    - 各開発者の環境下にて、

    Lintやテストし忘れた状態でコミット＆Pushする

    という事故を防げる
    - 「個人開発、CIメンテ時の代替」として使える
    2. コミット数を減らしたい場合
    - 「CIにてLintNG→コミット→Push」

    というサイクルによる無駄なコミットを防げる
    メリット・使える場面
    

    View Slide

13. 細かい手順はこちら
    参考記事
    - コミット前に Lint を強制するなら lint-staged が便利
    - husky + lint-stagedでgitのprecommit時にimageminを行い、
    minifyした画像のみコミットされるようにする
    - 【JavaScript】コミットする前にlint-stagedでeslintのチェックを
    する
    - 【Ruby】コミットする前に husky+lint-staged で、Rubocopの自
    動整形＆チェックを行う
    

    View Slide

14. coocom
    

    View Slide