CSSense
CSSense は、HTMLファイルからクラス名・ID・要素名を自動抽出し、CSS/SCSS/Less 編集時のセレクタ補完を強化する VS Code 拡張機能です。
機能
1. HTMLと連携したセレクタ補完
CSS/SCSS/Less ファイルを編集中、CSSense はリンクされた HTML ファイルをスキャンしてクラス名・ID・要素名を補完候補として提示します。
| 入力 |
表示される候補 |
.nav |
.nav-list、.nav-item、.nav-link … |
# |
#main-content、#sidebar … |
bu |
button、b … |
| (何も入力しない) |
すべてのクラス・ID・要素 |
候補を選択すると、カーソルを中に配置したルールセットが自動挿入されるため、そのままプロパティを書き始められます。
.nav-item {
/* ← ここにカーソルが来る */
}
HTML ファイルの検索ロジック
まず <link href="...対象CSS"> で読み込んでいる HTML ファイルを優先して検索します。見つからない場合は設定 cssense.searchAllHtmlFiles: true でワークスペース全体の HTML を対象にできます。
2. 重複セレクタの検出
同じセレクタをルートレベルで複数回定義すると、2回目以降に警告の波線が表示されます。
"#main-content" はすでに 82 行目に定義されています。F12 (Go to Definition) で移動できます。
@media や @supports の内部で同じセレクタを書くのは上書き定義として有効なため、警告の対象外です。
3. 定義へ移動（F12 / Ctrl+Click）
すでに定義済みのセレクタにカーソルを置いて F12（または Ctrl+Click）を押すと、同ファイル内の最初の定義箇所へジャンプします。.class・#id・要素セレクタに対応しています。
動作要件
- VS Code 1.74.0 以降
- 追加のランタイム依存なし
設定
| 設定キー |
デフォルト |
説明 |
cssense.searchAllHtmlFiles |
false |
リンクされた HTML が見つからない場合にワークスペース全体を検索する |
cssense.maxHtmlFiles |
300 |
スキャン対象の HTML ファイル最大数 |
マーケットプレイスへの公開（メンテナ向け）
- CLI をインストール:
npm install -g @vscode/vsce
- Azure DevOps で Marketplace → Manage スコープの Personal Access Token を取得
- ログイン:
vsce login antigravity
- 公開:
vsce publish
リリースノート
0.2.0
- 拡張機能名を CSSense に変更
- 補完確定時にルールセット
{ … } を自動挿入し、カーソルを内部に配置するよう変更
- 補完確定時に
. / # プレフィックスが消える不具合を修正
- セレクタの前にコメントがある場合に重複検出が動作しない不具合を修正
@media 内のセレクタが誤って重複警告される不具合を修正
0.1.0
- 初回リリース：HTMLと連携したセレクタ補完・重複検出・定義へ移動
| |
