⚙️

HTMLタグからcssセレクターを生成するVSCode拡張機能を作った

1 min read

成果物

※良かったら使ってみてください〜

https://marketplace.visualstudio.com/items?itemName=gonishiduka1985.extractioncssselector
https://github.com/underground0930/extractionCssSelector

なんで作ったか

突然ですが、
htmlのclassを、cssでセレクタにする作業、 ダル辛すぎませんか?
ページ数、要素数が多くなると、「何回同じ作業やるねん、、」 という思いになります。
朝起きたら、「セレクタ抜き出して用意しときましたよ!!」、って誰かにやって欲しいレベルです。

<div class="l-wrapper">
  <div class="p-hoge p-hoge--up js-hoge">aaa</div>
  <div id="test" class="p-huga js-huga">bbb</div>
</div>

↓↓↓↓↓

.l-wrapper{
  ...
}
.p-hoge{
  ...
}
.p-huga{
  ...
}

実は、webサービスでもう作ってくれてる人がいるんですよね。
html貼り付けたら、cssセレクタを作ってくれます。

https://css.miugle.info/

これ、めちゃくちゃ便利で、しかも scssとかless、入れ子構造にも対応しています。
本当に高機能。

ですが、

「ブラウザに毎回htmlを貼っつけるのも、スマートじゃないな〜、、なんとかエディタ内で完結出来ないものか」
「じゃあ、愛用しているvscodeの拡張機能として作ってしまおう!」

という感じで作成を決意しました。

仕様

  • scss派なのですが、 「可読性」や、「検索しやすい」 という理由から入れ子などは考慮せず、プレーンなstylesheetを生成。
  • 抜き出すのは「class」と「className(reactを考慮)」のみで、他は無視。
  • 抽出する範囲は「ドキュメント全体」 or 「選択範囲」から選べる。
  • 生成されたcssはクリップボードにコピーされる
  • 重複したclassは除外、スペースは除く
  • 生成されるセレクター内に、任意の文字列を挿入することが可能(scssのmixinなどあらかじめ入れておきたい時などに使用)

感想

実装自体はそんなに大変じゃなかったですが、我ながら、結構使える拡張機能なんじゃないかなと!ルーチンワークはどんどん自動化した方がいいですね!

ドキュメントが全部英語なので、その辺が若干しんどいですが、また機会があったら作ってみようと思いました。

https://code.visualstudio.com/api/references/vscode-api