VSCodeで、id・class属性値へ入力するセレクターを補完する拡張機能 HTML CSS Support


Visural Studio Codeで、htmlファイルの id・class属性値 へ入力するときのセレクターを、cssファイルや<style></style>に記載されているセレクターから、入力補完をしてくれるのが、拡張機能 HTML CSS Support です。

特徴・使い方

拡張機能 HTML CSS Supportを利用すると、htmlファイルの id・class属性値 へ入力するときのセレクターを、cssファイルや<style></style>に記載されているセレクターから、入力補完します。

操作方法は、以下のとおりです。

  • 何も入力していないときに、Ctrl + space を入力すると、すべてのセレクターを、入力候補として表示
  • 文字を入力すると、その文字にマッチするセレクターを、入力候補として表示

またid属性値 & class属性値のセレクターは、以下のスタイルシートから読み込まれ、入力候補として表示されます。

  • リンクされたcssファイル(<link rel=”stylesheet” type=”text/css” href=”../xxx.css”>)
  • htmlファイル内の<style></style>

インストール方法

拡張機能 HTML CSS Support のインストール & 設定方法は、以下のとおりです。

  1. 画面左にあるアクティビティーバーより、[機能拡張]ビューをクリックし、
  2. 検索欄に html css support と入力し、
  3. 表示された機能拡張の[インストール]ボタンをクリック。

コメント

タイトルとURLをコピーしました