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__

41. None