ExtractionCssSelector – Visual Studio Marketplace

ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!
こんにちは!Webコーダーのこんかいです!
HTMLタグからCSSセレクターを自動生成するVSCode拡張機能「ExtractionCssSelector」をご存知でしょうか?
HTMLを選択してExtractionCssSelectorを使用すれば、
ワンクリックでCSSセレクターを生成・コピーできる便利なツールです。

私も日常的に愛用している拡張機能の一つなのですが、
普段FLOCSS設計でコーディングを行っている際に、少し不便に感じる点がありました。
本記事では、FLOCSS設計に最適化したExtractionCssSelectorのカスタマイズ方法をご紹介いたします!同じような課題を感じている方の参考になれば幸いです。
この記事の目次
FLOCSS設計で感じていた不便な点
まず、具体的にどのような不便さがあったのかをご説明します。
以下のようなHTMLを例に、
デフォルト設定のExtractionCssSelectorでCSSセレクターを生成してみましょう。
<section class="p-news">
<div class="l-inner">
<div class="p-news__header-wrap">
<hgroup class="p-news__header-group c-header-group">
<p class="p-news__header-group__sub-ttl c-header-group__sub-ttl" lang="en">お知らせ</p>
<h2 class="p-news__header-group__ttl c-header-group__ttl" translate="no">News</h2>
</hgroup>
</div>
<div class="p-news__content js-content">
<div class="p-news__item u-pc"></div>
<div class="p-news__item"></div>
<div class="p-news__item"></div>
<div class="p-news__item"></div>
</div>
</div>
</section>
HTMLこのHTMLから生成されたCSSセレクターを_p-news.scss
ファイルに貼り付けると、以下のような結果になります。
.p-news {
}
.l-inner {
}
.p-news__header-wrap {
}
.p-news__header-group {
}
.c-header-group {
}
.p-news__header-group__sub-ttl {
}
.c-header-group__sub-ttl {
}
.p-news__header-group__ttl {
}
.c-header-group__ttl {
}
.p-news__content {
}
.js-content {
}
.p-news__item {
}
.u-pc {
}
SCSS問題点:不要なセレクターが混在してしまう
ご覧の通り、HTML内のすべてのクラス名がCSSセレクターとして出力されています。
しかし、_p-news.scss
ファイルにはプロジェクト層(p-)のスタイルのみを記述したいため、.l-inner
や.c-header-group
などは不要です。
本来であれば、以下のようにプロジェクト層のセレクターのみが出力されることが理想的です。
.p-news {
}
.p-news__header-wrap {
}
.p-news__header-group {
}
.p-news__header-group__sub-ttl {
}
.p-news__header-group__ttl {
}
.p-news__content {
}
.p-news__item {
}
SCSS毎回手動で不要なセレクターを削除していたのですが、
これが非常に手間で、削除し忘れによるミスも発生していました。

どうにかできないものか…
ExtractionCssSelectorのフィルター機能を活用した解決方法
そこで活用したのが、ExtractionCssSelectorのフィルター機能です。
この機能を使うことで、特定の条件に合致するセレクターのみを出力することができます。
設定方法
まずは、VSCodeの拡張機能タブから「ExtractionCssSelector」を選択し、歯車アイコンをクリックして「拡張機能の設定」を選択

する次のような画面が出てくるかと思います。

こちらの、「Extractioncssselector: Exclude Regex」の項目に、
以下の正規表現パターンを追加してください
パターン1:プロジェクト層(p-)のみ抽出
^(?!.*\.p-).*$
JSONパターン2:レイアウト層(l-)のみ抽出
^(?!.*\.l-).*$
JSONパターン3:コンポーネント層(c-)のみ抽出
^(?!.*\.c-).*$
JSON
settings.jsonでの設定例
settings.jsonファイルで直接設定する場合は、以下のように記述します。
{
"extractioncssselector.excludeRegex": [
"^(?!.*\\.p-).*$",
"^(?!.*\\.l-).*$",
"^(?!.*\\.c-).*$"
]
}
JSON設定後の動作
この設定により、以下のような使い分けが可能になります:
ExtractionCssSelector【filter1】: .p-
から始まるクラス名のみ出力
ExtractionCssSelector【filter2】: .l-
から始まるクラス名のみ出力
ExtractionCssSelector【filter3】: .c-
から始まるクラス名のみ出力
実際に使ってみるとこんな感じ。
これが非常に便利です。逆になんで今までしてこなかったんだ….
余談
私はパターン1のフィルターを以下のような正規表現にカスタマイズして使用しています。
.l-|.c-|.u-|.is-|.js-|.--
JSONわざわざなぜこれにするかというと、FLOCSSを使用していないときには普通に使いたいからです。
この正規表現だと.p-
のみではなく、.l-
.c-
.u-
.is-
.js-
.--
を出力制限しているので、.p-
はもちろん他のCSS設計でも使用できます。
その他のカスタマイズ機能
ExtractionCssSelectorには、今回紹介したフィルター機能以外にも便利なカスタマイズ機能があります。
- ID属性の抽出設定: IDセレクターを含めるかどうかの選択
- 出力フォーマットのカスタマイズ: セレクターの出力形式を調整
これらの機能も組み合わせることで、さらに自分好みの設定にカスタマイズすることができます!
まとめ
今回は、ExtractionCssSelectorをFLOCSS設計に最適化するカスタマイズ方法をご紹介しました。
たった一つの設定を追加するだけで、これまで手動で行っていた煩雑な作業を自動化でき、コーディング効率が大幅に向上します。FLOCSS設計でコーディングを行っている方には、ぜひお試しいただきたい設定です。
皆さんもぜひ、ご自身の開発スタイルに合わせてExtractionCssSelectorをカスタマイズしてみてください!
参考資料

HTMLタグからcssセレクターを生成するVSCode拡張機能を作った
この記事が「いいね!」と思ったら
ハートをタップ!

注目度急上昇中!人気記事!
良ければシェアお願いします!
記事情報
ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!