Stylelintの取扱説明書 - Speaker Deck

Stylelintの取扱説明書

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介名前 moro 出身埼玉県職業学生年齢 (才) 22 ツイッター @mo__ro__ スキル React, CSS ● 大学2年の終わりに大学を休学。 ● 紆余曲折あり現在休学2年目に突入。 ● 大学に戻る気はもうなさそう。

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

概要紹介

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

簡単な例概要紹介

Slide 8

Slide 8 text

潜在的なエラー概要紹介

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

スタイルの統一概要紹介

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

使用前の準備

Slide 13

Slide 13 text

使用前の準備必要なもの Stylelint Conﬁg

Slide 14

Slide 14 text

だけ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

.stylelintrc.json 使用前の準備

Slide 18

Slide 18 text

だけ

Slide 19

Slide 19 text

動作確認

Slide 20

Slide 20 text

上手な使い方

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

上手な使い方つまり

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

上手な使い方 package.json

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

上手な使い方ただし

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

おまけ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content