漸進的Stylelint導入のすすめ

@ 2019.11.08 ペパボテックフライデー(社内イベント)

see: Pepabo Tech Friday 始まってます! - ペパボテックブログ

About me

Yusuke Iinuma

(@yinm)

A Web Frontend Engineer
Working at GMO Pepabo, Inc.
A staff of Vue.js Japan User Group

おしながき

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

Stylelint未導入のまま、CSSのコード量が増えてきたプロジェクトで、

Stylelintを導入するぞ！という気持ちになってもらう

話すこと

Stylelintを導入するメリット
導入にあたって障壁になりそうなこと
漸進的導入の方法

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

他の言語の当たり前をCSSにも導入したい！

(e.g. ESLint, RuboCop)

具体的には

コードの書き方を均一化して読みやすくしたい
レビューでは、実現したいことに集中できるようにしたい
- 「.classと{の間に、スペースが欲しいです」みたいな指摘
  (レビュアーにもレビュイーにもつらい指摘)をしないでよくする

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

既存のコードベースが大きいと、
修正対象が膨大になり、ビックバンリリースになりがち

開発からある程度経っているコードは、CSSが適用されている範囲が広くなっている
そこにStylelintを適用すると、diffが膨大になってしまう
→ ビッグバンリリースに 💣

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

行うこと

1) Stylelintを理想的な状態にする
2) .stylelintignoreでLint対象を制御する

1) Stylelintを理想的な状態にする

今回紹介する方法では、後からルールを追加には対応できない
→ 最初に開発メンバーがいいと思えるルールを設定する

どうやって？

今のチームでは、ツールを使って開発するメンバーみんなで決めた
公式でおすすめされている設定を使うのも良さそう

2) .stylelintignoreでLint対象を制御する

まず、.stylelintignoreで自分のCSSコードをすべてLint対象外にする
CI環境で、Stylelintを実行できるようにする
あとは以下を繰り返す(上記の.stylelintignoreの設定がなくなるまで)
- .stylelintignoreの内容を編集して、Lint対象を制御する
- Stylelintを実行した場合に、適用したいファイルでエラーが出ていることを確認
- Stylelintが通るように直す
- マージする

徐々に適用範囲を広げていけるので、
ビッグバンリリースを避けつつ、Stylelintを導入していける 🎊

(実績として、担当サービスでも1つのリポジトリに導入が完了した)

発表のゴール
なぜ導入したいのか？
導入にあたっての障壁は？
漸進的なStylelint導入方法
まとめ

なぜStylelintを導入したいのか？導入にあたっての障壁？になる部分の紹介
漸進的にStylelintを導入する方法
- 1) Stylelintを理想的な状態にする
- 2) .stylelintignoreでLint対象を制御する
今回はStylelintの例だが、ESLintなど同等の機構があるものなら、同じことができそう