Save 37% off PRO during our Black Friday Sale! »

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

Cb0e411d88a1bcd1562890c816970a8e?s=47 Shota Kubota
September 15, 2021

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

Cb0e411d88a1bcd1562890c816970a8e?s=128

Shota Kubota

September 15, 2021
Tweet

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. デモ

  5. None
  6. None
  7. One more thing...

  8. HTML の他に JSX / TSX も対応

  9. HTML の他に JSX / TSX も対応 • 自分が仕事で React +

    TypeScript を使っているので対応した • classnames という複数のクラスを条件に応じて出し分けする ライブラリにも対応した • CSS Modules の styles.foo みたいな記法には対応できてないかも (需要あったら実装しようかな……)
  10. デモ

  11. None
  12. None
  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