Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」

基本的にHTML・CSSを書く場合はHTMLを書いてからそのあと一気にCSSを書くことが多いです。

ただ、別ページを作成するときにすでにあるclassを使い回したり、過去作成したテンプレートのようなCSSを使いたい場合や、CSSフレームワークを使う場合もあります。
そんなときに、class名を補完してくれるとHTMLを書くのがかなり早くなります。

今回は読み込んでいるCSSのclass名を補完してくれるVisual Studio Codeの拡張機能「HTML CSS Support」についてまとめておきます。

HTML CSS Support

marketplace.visualstudio.com

HTML CSS Support - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Extension for Visual Studio Code - CSS Intellisense for HTML

HTML CSS Supportは、HTMLでclassを入力するときに、CSSファイルで定義されているclass名を読み込んで、補完してくれる拡張機能です。

他にも似た拡張機能に「IntelliSense for CSS class names in HTML」というものもありますが、こちらはclass名の補完時に、どのCSSファイルで定義されているclass名なのか表示されません（その代わりに、読み込むファイルパターンの設定ができたりなどのメリットもあります）。

CSSフレームワークのclass名なのか、自分で定義したCSSなのかは確認できた方が良いので、自分の場合はHTML CSS Supportを使っています。

基本的な使い方

idやclassの入力時に自動で補完リストが表示されます。

意図して表示させたい場合はcontrol + spaceでも表示されます。
ここに表示されるclass名は既に定義されていないということですから、class名が被っていないかどうかの確認としても使えます。

設定

読み込むスタイルシートを追加

ワークスペースごとの設定ファイル（.vscode/settings.json）に「css.styleSheets」を追加して、配列でCSSファイルのリンクやパスを追加すると、ワークスペース全体でそのCSSファイルがサポートされるようになります。

{
  "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css",
    "/style.css",
    "style.css",
    "${fileBasenameNoExtension}.css"
  ]
}

ちなみに「${fileBasenameNoExtension}」を入力すると、編集中のファイルのファイル名が拡張子なしで入ります。
「about.html」では「page/about.css」を読み込むなど、ページ専用のCSSを用意している場合に使えます。

使用言語の設定

使用する言語は設定ファイル（settings.json）に「css.enabledLanguages」を追加して設定できます。
デフォルトで「html」は有効になっていますが、例えば他にPHPやEJSでも使いたい場合は下記のように追加します。

{
  "css.enabledLanguages": [
    "html",
    "php",
    "ejs"
  ]
}