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

5c15692e0997b53f1de1627d9fd41f46?s=47 zaki
July 31, 2019

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

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

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

5c15692e0997b53f1de1627d9fd41f46?s=128

zaki

July 31, 2019
Tweet

Transcript

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

    / ざき / @zucky_zakizaki
  2. ざき (やざき ゆうき) @zucky_zakizaki • 株式会社ランチェスター • Ruby / Vue.js

    • TypeScriptに興味がある • ブログ好き - はてなブログ - note
  3. みなさん Lintチェックしてますか?

  4. Rubocop (rubocop -a) ESLint / JSLint

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

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

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


    eslint等のコマンドを実行できる npmモジュールの紹介
  8. package.jsonの設定(eslintの場合)

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

  10. 実行例(eslintの場合)

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

  12. 1. CI環境がない場合 - 各開発者の環境下にて、
 Lintやテストし忘れた状態でコミット&Pushする
 という事故を防げる - 「個人開発、CIメンテ時の代替」として使える 2. コミット数を減らしたい場合

    - 「CIにてLintNG→コミット→Push」
 というサイクルによる無駄なコミットを防げる メリット・使える場面
  13. 細かい手順はこちら 参考記事 - コミット前に Lint を強制するなら lint-staged が便利 - husky

    + lint-stagedでgitのprecommit時にimageminを行い、 minifyした画像のみコミットされるようにする - 【JavaScript】コミットする前にlint-stagedでeslintのチェックを する - 【Ruby】コミットする前に husky+lint-staged で、Rubocopの自 動整形&チェックを行う
  14. coocom