VS CodeでHTML補完が動作しない場合の原因と設定確認ガイド

Visual Studio CodeでHTMLの補完が正しく動作しない場合、設定や拡張機能の状態が原因となっていることがあります。本記事では、新しいノートパソコンで起きやすい症状を例に、原因の特定方法と設定変更のポイントを解説します。

現象の確認と症状

症状として、bodyタグの下に何も入力していない状態で<h1>Hello World</h1>が薄く表示される、アルファベットを入力してもタグ候補が表示されないといった問題があります。

これはVS CodeのEmmetやHTML補完の機能が正しく認識されていない場合に発生します。

VS CodeではHTML補完にEmmetが利用されます。まず設定でEmmetが有効になっているか確認します。設定は「File > Preferences > Settings」から検索できます。

特に「Emmet: Include Languages」でHTMLに対して正しく割り当てられているかチェックしてください。例として、HTMLに対して「html」を指定する必要があります。

VS Codeでは一部の拡張機能が補完機能に影響を与える場合があります。新しいパソコンでは拡張機能がデフォルトで少ないため、補完候補が出ないことがあります。

解決策として、一時的に拡張機能を無効化して動作を確認したり、公式のHTML拡張機能を追加することが有効です。

ワークスペースの設定やファイルの言語モードも補完に影響します。右下のステータスバーで言語モードがHTMLになっているか確認してください。

実例として、拡張子が.htmlであるにも関わらず言語モードがPlain Textになっている場合、補完が働きません。

新しい環境でVS CodeのHTML補完が動作しない場合、Emmet設定、拡張機能、ワークスペースの言語モードを順に確認すると解決しやすいです。これらを確認・修正することで、bodyタグ下での補完やタグ候補が正常に表示されるようになります。