Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Stylelintの取扱説明書
moro
October 03, 2019
Programming
1
430
Stylelintの取扱説明書
moro
October 03, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
段階的な技術的負債の解消方法.pdf
ko2ic
2
960
Git Rebase
bkuhlmann
7
1.1k
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.7k
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
350
How to start contributing to Kubernetes Projects
ydfu
0
150
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
140
AWS Config Custom Rule、ノーコードでできるかな?
watany
0
250
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
310
Pluggable Storage in PostgreSQL
sira
1
200
FullStack eXchange, July 2022
brucel
0
200
Getting Started With Data Structures
adoranwodo
1
270
Featured
See All Featured
Producing Creativity
orderedlist
PRO
334
37k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
Bootstrapping a Software Product
garrettdimon
296
110k
Rails Girls Zürich Keynote
gr2m
87
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Side Projects
sachag
450
37k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Designing the Hi-DPI Web
ddemaree
272
32k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Transcript
Stylelintの 取扱説明書 2019年10月3日 Meguro.css@ラクスル 電気通信大学 実質4年 moro
自己紹介 名 前 moro 出 身 埼玉県 職 業 学生
年 齢 (才) 22 ツ イ ッ タ ー @mo__ro__ ス キ ル React, CSS • 大学2年の終わりに大学を休学。 • 紆余曲折あり現在休学2年目に突入。 • 大学に戻る気はもうなさそう。
もくじ • 概要紹介 • 使用前の準備 • 動作確認 • 上手な使い方
概要紹介
そもそも、Stylelintって? 概要紹介
潜在的なエラーを発見し スタイルに一貫性を持たせるのを 助けてくれるツール 概要紹介
簡単な例 概要紹介
潜在的なエラー 概要紹介
潜在的なエラー “collorなんてプロパティ知らないぞっ” stylelintより 概要紹介
スタイルの統一 概要紹介
スタイルの統一 “オマエのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより 概要紹介
使用前の準備
使用前の準備 必要なもの Stylelint Config
だけ
手順1. npmモジュールをインストール または 手順2. プロジェクトのルートディレクトリに .stylelintrc.json を作成 使用前の準備
手順3. configファイルを編集 今回は勝手におすすめの設定をしてくれる stylelint-config-standard を使用 詳細はこちら: https://github.com/stylelint/stylelint-config-standard または 使用前の準備
.stylelintrc.json 使用前の準備
だけ
動作確認
上手な使い方
上手な使い方 1. メッセージのカスタマイズ
上手な使い方 Stylelint導入後のある日...
上手な使い方 アンチCSSの Kさん 仕方ねえ、 仕事だしCSS書くかあ
アンチCSSの Kさん 上手な使い方 “オマエのチームだと’#FFF’じゃなくて’#fff’らしいぜ” stylelintより
上手な使い方 アンチCSSの Kさん 誰だ こんなツール入れたの
上手な使い方 Q. Kさんはなぜイラついた?
上手な使い方 A. メッセージがあまりにも無機質だったから
上手な使い方 .stylelintrc.json 解決策
上手な使い方 仕方ねえ、 直すか。。。。
上手な使い方 2. husky & lit-staged
huskyとは commitやpushの前に タスクを走らせてくれる
lit-stagedとは stagingファイルに対して lintを走らせてくれる
上手な使い方 つまり
上手な使い方 lintがかかっていないファイルの commitを防ぐことができる
上手な使い方 package.json
上手な使い方 lintエラーを含んだCSSファイルをコミットしようとすると...
上手な使い方 ただし
上手な使い方 気をつけましょう
おまけ
おまけ インターン先 / 就職先 大募集中でございます。 Twitter: @mo__ro__
None