Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

zaki
July 31, 2019

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

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

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

zaki

July 31, 2019
Tweet

More Decks by zaki

Other Decks in Programming

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