Slide 1
Slide 1 text
CSS のルールセットを
高速に出力する
VS Code 拡張を作った
@kubosho_
Slide 2
Slide 2 text
こんな経験はありませんか？
● HTML を書いたあと CSS を書くときにクラス名や ID 名を抽出するのが
とても面倒に思った
● 特に数百行単位の HTML ファイルからクラス名や ID 名を抽出して、
CSS ファイルを作る場合、割と時間がかかって辛い
● ぱぱっとクラス名などを抽出して CSS 書いて定時退勤して酒飲みたい
Slide 3
Slide 3 text
要望を叶える VS Code 拡張を作りました
eCSStractor for VS Code
https://github.com/kubosho/vscode-ecsstractor
Slide 4
Slide 4 text
デモ
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
One more thing...
Slide 8
Slide 8 text
HTML の他に JSX / TSX も対応
Slide 9
Slide 9 text
HTML の他に JSX / TSX も対応
● 自分が仕事で React + TypeScript を使っているので対応した
● classnames という複数のクラスを条件に応じて出し分けする
ライブラリにも対応した
● CSS Modules の styles.foo みたいな記法には対応できてないかも
(需要あったら実装しようかな……)
Slide 10
Slide 10 text
デモ
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
eCSStractor for VS Code の紹介でした
インストール・GitHub の ☆star 登録お願いします！
https://marketplace.visualstudio.com/items?itemName=kubosho.ecs
stractor
https://github.com/kubosho/vscode-ecsstractor
Twitter・GitHub・ブログもやってます
● https://twitter.com/kubosho_
● https://github.com/kubosho
● https://blog.kubosho.com