Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Shota Kubota

September 15, 2021
Tweet

More Decks by Shota Kubota

Other Decks in Programming

Transcript

  1. CSS のルールセットを
    高速に出力する
    VS Code 拡張を作った
    @kubosho_

    View Slide

  2. こんな経験はありませんか?
    ● HTML を書いたあと CSS を書くときにクラス名や ID 名を抽出するのが
    とても面倒に思った
    ● 特に数百行単位の HTML ファイルからクラス名や ID 名を抽出して、
    CSS ファイルを作る場合、割と時間がかかって辛い
    ● ぱぱっとクラス名などを抽出して CSS 書いて定時退勤して酒飲みたい

    View Slide

  3. 要望を叶える VS Code 拡張を作りました
    eCSStractor for VS Code
    https://github.com/kubosho/vscode-ecsstractor

    View Slide

  4. デモ

    View Slide

  5. View Slide

  6. View Slide

  7. One more thing...

    View Slide

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

    View Slide

  9. HTML の他に JSX / TSX も対応
    ● 自分が仕事で React + TypeScript を使っているので対応した
    ● classnames という複数のクラスを条件に応じて出し分けする
    ライブラリにも対応した
    ● CSS Modules の styles.foo みたいな記法には対応できてないかも
    (需要あったら実装しようかな……)

    View Slide

  10. デモ

    View Slide

  11. View Slide

  12. View Slide

  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

    View Slide