CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets

フロントエンドLT会 - vol.4 #frontendlt https://rakus.connpass.com/event/220712/ で発表した、HTML / JSX / TSX から CSS のルールセットを抽出してファイルに出力する VS Code 拡張「eCSStractor for VSCode」の紹介スライドです。

* https://marketplace.visualstudio.com/items?itemName=kubosho.ecsstractor
* https://github.com/kubosho/vscode-ecsstractor

Transcript

1. CSS のルールセットを 高速に出力する VS Code 拡張を作った @kubosho_
2. こんな経験はありませんか？ • HTML を書いたあと CSS を書くときにクラス名や ID 名を抽出するのが とても面倒に思った • 特に数百行単位の HTML ファイルからクラス名や ID 名を抽出して、 CSS ファイルを作る場合、割と時間がかかって辛い • ぱぱっとクラス名などを抽出して CSS 書いて定時退勤して酒飲みたい
3. 要望を叶える VS Code 拡張を作りました eCSStractor for VS Code https://github.com/kubosho/vscode-ecsstractor
4. デモ
7. One more thing...
8. HTML の他に JSX / TSX も対応
9. HTML の他に JSX / TSX も対応 • 自分が仕事で React + TypeScript を使っているので対応した • classnames という複数のクラスを条件に応じて出し分けする ライブラリにも対応した • CSS Modules の styles.foo みたいな記法には対応できてないかも (需要あったら実装しようかな……)
10. デモ
13. 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