Stylelintの取扱説明書

Transcript

1. Stylelintの 取扱説明書 2019年10月3日 Meguro.css@ラクスル 電気通信大学 実質4年 moro
2. 自己紹介 名 前 moro 出 身 埼玉県 職 業 学生 年 齢 (才) 22 ツ イ ッ タ ー @mo__ro__ ス キ ル React, CSS • 大学2年の終わりに大学を休学。 • 紆余曲折あり現在休学2年目に突入。 • 大学に戻る気はもうなさそう。
3. もくじ • 概要紹介 • 使用前の準備 • 動作確認 • 上手な使い方
4. 概要紹介
5. そもそも、Stylelintって？ 概要紹介
6. 潜在的なエラーを発見し スタイルに一貫性を持たせるのを 助けてくれるツール 概要紹介
7. 簡単な例 概要紹介
8. 潜在的なエラー 概要紹介
9. 潜在的なエラー “collorなんてプロパティ知らないぞっ” stylelintより 概要紹介
10. スタイルの統一 概要紹介
11. スタイルの統一 “ｵﾏｴのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより 概要紹介
12. 使用前の準備
13. 使用前の準備 必要なもの Stylelint Config
14. だけ
15. 手順１. npmモジュールをインストール または 手順２. プロジェクトのルートディレクトリに .stylelintrc.json を作成 使用前の準備
16. 手順３. configファイルを編集 今回は勝手におすすめの設定をしてくれる stylelint-config-standard を使用 詳細はこちら:　https://github.com/stylelint/stylelint-config-standard または 使用前の準備
17. .stylelintrc.json 使用前の準備
18. だけ
19. 動作確認
20. 上手な使い方
21. 上手な使い方 1. メッセージのカスタマイズ
22. 上手な使い方 Stylelint導入後のある日...
23. 上手な使い方 アンチCSSの Kさん 仕方ねえ、 仕事だしCSS書くかあ
24. アンチCSSの Kさん 上手な使い方 “ｵﾏｴのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより
25. 上手な使い方 アンチCSSの Kさん 誰だ こんなツール入れたの
26. 上手な使い方 Q. Kさんはなぜイラついた？
27. 上手な使い方 A. メッセージがあまりにも無機質だったから
28. 上手な使い方 .stylelintrc.json 解決策
29. 上手な使い方 仕方ねえ、 直すか。。。。
30. 上手な使い方 2. husky & lit-staged
31. huskyとは commitやpushの前に タスクを走らせてくれる
32. lit-stagedとは stagingファイルに対して lintを走らせてくれる
33. 上手な使い方 つまり
34. 上手な使い方 lintがかかっていないファイルの commitを防ぐことができる
35. 上手な使い方 package.json
36. 上手な使い方 lintエラーを含んだCSSファイルをコミットしようとすると...
37. 上手な使い方 ただし
38. 上手な使い方 気をつけましょう
39. おまけ
40. おまけ インターン先 / 就職先 大募集中でございます。 Twitter: @mo__ro__