⚙️
HTMLタグからcssセレクターを生成するVSCode拡張機能を作った
【2023/3/23 更新】
こちら、使いやすいようにバージョン1.0.0にアップデートして
settings.jsonにオプションを追加出来るようになりました！
正規表現でセレクターのフィルタリングをできたり、
生成するcssセレクター内に挿入するコードを設定しやすくしました。
詳細はgithubのissueをご確認ください。
成果物
※良かったら使ってみてください〜
なんで作ったか
突然ですが、
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セレクタを作ってくれます。
これ、めちゃくちゃ便利で、しかも scssとかless、入れ子構造にも対応しています。
本当に高機能。
ですが、
「ブラウザに毎回htmlを貼っつけるのも、スマートじゃないな〜、、なんとかエディタ内で完結出来ないものか」
「じゃあ、愛用しているvscodeの拡張機能として作ってしまおう!」
という感じで作成を決意しました。
仕様
- scss派なのですが、 「可読性」や、「検索しやすい」 という理由から入れ子などは考慮せず、プレーンなstylesheetを生成。
- 抜き出すのは「class」と「className(reactを考慮)」のみで、他は無視。
- 抽出する範囲は「ドキュメント全体」 or 「選択範囲」から選べる。
- 生成されたcssはクリップボードにコピーされる
- 重複したclassは除外、スペースは除く
- 生成されるセレクター内に、任意の文字列を挿入することが可能(scssのmixinなどあらかじめ入れておきたい時などに使用)
感想
実装自体はそんなに大変じゃなかったですが、我ながら、結構使える拡張機能なんじゃないかなと！ルーチンワークはどんどん自動化した方がいいですね！
ドキュメントが全部英語なので、その辺が若干しんどいですが、また機会があったら作ってみようと思いました。
Discussion