Stylelintの取扱説明書

Transcript

1. 1.

   Stylelintの 取扱説明書 2019年10月3日 Meguro.css@ラクスル 電気通信大学 実質4年 moro

2. 2.

   自己紹介 名 前 moro 出 身 埼玉県 職 業 学生

   年 齢 (才) 22 ツ イ ッ タ ー @mo__ro__ ス キ ル React, CSS • 大学2年の終わりに大学を休学。 • 紆余曲折あり現在休学2年目に突入。 • 大学に戻る気はもうなさそう。
3. 3.

   もくじ • 概要紹介 • 使用前の準備 • 動作確認 • 上手な使い方

4. 4.

   概要紹介

5. 5.

   そもそも、Stylelintって？ 概要紹介

6. 6.

   潜在的なエラーを発見し スタイルに一貫性を持たせるのを 助けてくれるツール 概要紹介

7. 7.

   簡単な例 概要紹介

8. 8.

   潜在的なエラー 概要紹介

9. 9.

   潜在的なエラー “collorなんてプロパティ知らないぞっ” stylelintより 概要紹介

10. 10.

    スタイルの統一 概要紹介

11. 11.

    スタイルの統一 “ｵﾏｴのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより 概要紹介

12. 12.

    使用前の準備

13. 13.

    使用前の準備 必要なもの Stylelint Config

14. 14.

    だけ

15. 15.

    手順１. npmモジュールをインストール または 手順２. プロジェクトのルートディレクトリに .stylelintrc.json を作成 使用前の準備

16. 16.

    手順３. configファイルを編集 今回は勝手におすすめの設定をしてくれる stylelint-config-standard を使用 詳細はこちら:　https://github.com/stylelint/stylelint-config-standard または 使用前の準備

17. 17.

    .stylelintrc.json 使用前の準備

18. 18.

    だけ

19. 19.

    動作確認

20. 20.

    上手な使い方

21. 21.

    上手な使い方 1. メッセージのカスタマイズ

22. 22.

    上手な使い方 Stylelint導入後のある日...

23. 23.

    上手な使い方 アンチCSSの Kさん 仕方ねえ、 仕事だしCSS書くかあ

24. 24.

    アンチCSSの Kさん 上手な使い方 “ｵﾏｴのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより

25. 25.

    上手な使い方 アンチCSSの Kさん 誰だ こんなツール入れたの

26. 26.

    上手な使い方 Q. Kさんはなぜイラついた？

27. 27.

    上手な使い方 A. メッセージがあまりにも無機質だったから

28. 28.

    上手な使い方 .stylelintrc.json 解決策

29. 29.

    上手な使い方 仕方ねえ、 直すか。。。。

30. 30.

    上手な使い方 2. husky & lit-staged

31. 31.

    huskyとは commitやpushの前に タスクを走らせてくれる

32. 32.

    lit-stagedとは stagingファイルに対して lintを走らせてくれる

33. 33.

    上手な使い方 つまり

34. 34.

    上手な使い方 lintがかかっていないファイルの commitを防ぐことができる

35. 35.

    上手な使い方 package.json

36. 36.

    上手な使い方 lintエラーを含んだCSSファイルをコミットしようとすると...

37. 37.

    上手な使い方 ただし

38. 38.

    上手な使い方 気をつけましょう

39. 39.

    おまけ

40. 40.

    おまけ インターン先 / 就職先 大募集中でございます。 Twitter: @mo__ro__

41. 41.

    None