結論
HTML CSS Supportのアプデが原因だと思われます。
バージョン1までは設定を書かなくてもlinkタグとstyleタグから補完してくれましたが、バージョン2からはcss.styleSheetsにスタイルシートを書かないといけなくなりました。
なので、こんな感じで設定を書きましょう。
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
"styles/*.css"
]
}
もしくはバージョンを下げましょう。
はじめに
この度(といっても1ヶ月ほど前)、HTML CSS SupportというVSCodeの拡張機能のメジャーバージョンが上がりました。
仕様変更があったようなので、バージョン1の頃のままだと補完が効かなくなってしまいました。
なので、この際アプデ内容一気にまとめようと考えて記事を書いています。
わかりづらいところや間違っている内容については、ご指摘いただけると幸いです。
きっかけ
久々にHTMLでクラス補完をしようとしたのがきっかけです。
HTML自体は普段から触っていたのですが、なぜかここ最近クラスを使ってませんでした。
そのせいでHTML CSS Supportのアプデに気づくのが遅れ、「あれ!?クラス補完効かない!?」となってアプデを知りました。
バージョンについて
HTML CSS Supportは、2022/7/31に1.13.1をリリースしたきり、全然アプデがありませんでした。
ところが先月(2023/12)、1.14.0がリリースされました。
さらにその後、2.0.0がリリースされました。
そこからは頻繁にパッチバージョンが上がっています。
二日前(2024/1/24)には2.0.7がリリースされたりもしました。
この記事では1.14.1以前のバージョンをバージョン1と、2.0.0以降をバージョン2と呼んでいます。
アプデ内容
というわけでアプデ内容書きます。
スタイルシートの指定が必要に
バージョン2へのアップデートにより、スタイルシートの指定が必要になりました。
バージョン1の頃は自動でスタイルシートを判定してくれたのですが、どうやらそれがなくなった模様です。
また、これが原因で設定を変えないと補完が効かなくなったりもします。
スタイルシートの設定はcss.styleSheetsに書きます。
例えばこんな感じで指定するみたいです(READMEからのコピペ)。
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/**/*.scss",
"src/view/style.ts",
"dist/style.css"
]
}
ちなみに、私のところはこれの設定をしたら補完が復活しました。
css.styleSheets自体はバージョン1からありました。
おまけ：README.mdの変化
もともと、README.mdには以下のような記述がありました。
Linked and Embedded Style Sheets
Linked[<link rel="stylesheet">]and embedded[<style></style>]style sheets are used in completion foridandclassattributes. Links support local and remote files. Absolute local file paths are relative to the workspace folder while others are relative to HTML file:
DeepLによる日本語訳(一部修正)：
リンクされたスタイルシートと埋め込まれたスタイルシート
リンクされた[<link rel="stylesheet">]と埋め込まれた[<style></style>]スタイルシートは、idとclass属性の補完で使われます。リンクはローカルとリモートのファイルをサポートします。絶対的なローカルファイルパスはワークスペースのフォルダからの相対パスで、それ以外はHTMLファイルからの相対パスです：
ですが、今はこの記述は消えています。
このことからも、linkタグとstyleタグは補完の表示に使われなくなったのがわかります。
これ以外のアプデ内容がよくわからなかったので一旦ここまでです。
調べ次第追記します。