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

URL: https://webrandum.net/vscode-plugin-html-css-support/
公開日: 2022-07-27
更新日: 2022-07-27
カテゴリー: コーディング
タグ: Visual Studio Code, Visual Studio Codeプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

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

ただ、別ページを作成するときにすでにあるclassを使い回したり、過去作成したテンプレートのようなCSSを使いたい場合や、CSSフレームワークを使う場合もあります。

そんなときに、class名を補完してくれるとHTMLを書くのがかなり早くなります。

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

## HTML CSS Support

![HTML CSS Support](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_1-13.png)

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/f26b0cbe884c03249e66d9dd1d985b418a2abf168666e9538e16204b5762c908.webp)HTML CSS Support - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-cssExtension for Visual Studio Code - CSS Intellisense for HTML](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

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の入力時に自動で補完リストが表示されます。

![class名の補完機能](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_2-13.png)

意図して表示させたい場合は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"
  ]
}
```