Tweet
Tweet

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