Stylelintの取扱説明書

6513b6a2923615ac30f516f49956ea8a?s=47 moro
October 03, 2019

 Stylelintの取扱説明書

6513b6a2923615ac30f516f49956ea8a?s=128

moro

October 03, 2019
Tweet

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. 手順1. npmモジュールをインストール または 手順2. プロジェクトのルートディレクトリに .stylelintrc.json を作成 使用前の準備

  16. 手順3. 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