VSCodeでEmmetが使えない原因と対処法まとめ

VSCode

VSCode（Visual Studio Code）を使ってHTMLやCSSのコーディングを始めるとき、誰もが「これを使いこなしたい！」と憧れるのが「Emmet（エマート）」という自動補完機能です。

しかし、いざコードを書こうとして「!」や「html:5」と入力しても、何もポップアップが出ず、Tabキーを押してもただ空白（スペース）が空くだけで展開されない……というトラブルに直面していませんか？

Emmetが動かないと、何十行ものコードをすべて手動でタイピングしなければならず、開発効率が大きく落ちてしまいます。

本記事では、VSCodeでEmmetが動かない・使えないときの原因と、一発で解決するための具体的な対処法を徹底解説します。この記事を読めば、Emmetがサクサク動く快適な開発環境を取り戻せるはずです。

Emmetとは？

トラブルシューティングに入る前に、Emmetがどのような機能なのかを簡単におさらいしておきましょう。

  • HTML/CSSの入力を極限まで効率化できる機能：短い略称を入力するだけで、複雑なタグの構造を一瞬で生成してくれます。
  • 「!」や「html:5」で展開できる：例えば、新しいHTMLファイルに「!」とだけ入力して確定すると、数行にわたるHTMLの基本テンプレート（<!DOCTYPE html>から始まる雛形）が一瞬で完成します。
  • VSCodeに標準搭載されている：以前のエディタのように、わざわざ専用のプラグインや拡張機能をインストールする必要はありません。VSCodeを開いたその日から、誰でもすぐに使える状態になっています。

逆に言えば、標準搭載されているはずの機能が動かないということは、「VSCodeの設定」や「ファイルの開き方」に明確な原因があるということです。

VSCodeでEmmetが使えない主な原因

「昨日までは動いていたのに急に使えなくなった」「特定のファイルだけEmmetが反応しない」という場合、焦ってVSCodeを再インストールする必要はありません。Emmetが効かなくなる原因のほとんどは、以下の4つのいずれかに分類されます。

  1. ファイル拡張子が違う: 編集しているファイルの末尾（.html など）をVSCodeが正しく認識できていない。
  2. 言語モードの問題: VSCodeの画面上で、そのファイルが「HTML」や「CSS」ではない別の言語として判定されている。
  3. Emmet設定の問題: 設定画面（setting.json など）で、Emmetの自動補完機能がオフになっている、あるいは設定が競合している。
  4. 拡張機能との競合: 後から入れた別のプラグインが、Emmetの邪魔をしている。

現場でも、新しくプロジェクトを立ち上げた直後などに「あれ、Emmetが効かないぞ？」と一瞬戸惑うことはよくあります。原因はどれもシンプルな設定ミスですので、一つずつチェックしていきましょう。

ファイル拡張子が正しいか確認する

まず確認すべきは、あなたが今編集している「ファイルの名前」です。ここが間違っていると、VSCodeは「このファイルでEmmetのサポートを起動するべきかどうか」を判断できません。

.htmlファイルになっているか

HTMLのEmmetを使いたい場合、ファイルの末尾に必ず「.html」という拡張子がついていなければなりません。

  • 正しい例：index.html
  • 動かない例：index.htm / index.HTML（大文字）

VSCodeのエクスプローラーで、ファイル名の左側にあるアイコンが「赤色またはオレンジ色の< >マーク（HTMLのロゴ）」になっているか確認してください。

.txtで保存されていないか

初心者に最も多い「あるある」なミスが、パソコン（OS）の仕様によって自動的に「.txt」が後ろにくっついてしまっているパターンです。

新規ファイルを作成して保存する際、ファイル名を手入力でinde.htmlにしたとしても、保存ダイアログの種類によってはindex.html.txtという名前のテキストファイルとして保存されてしまうことがあります。 この状態だと、VSCodeは「ただのメモ帳ファイル（プレーンテキスト）」として読み込むため、HTML用のEmmetは一切起動しません。ファイル名が正確に.htmlだけで終わっているか、必ずVSCodeのエクスプローラー上で再確認してください。

言語モードを確認する

ファイルの拡張子が正しくても、VSCode側がそのファイルを「別の種類のファイルだ」と勘違いしていると、Emmetは動作しません。これを確認するのが「言語モード」です。

右下の言語モード確認

VSCodeの画面の右下（ステータスバー）をじっくり見てみましょう。そこには、現在開いているファイルをVSCodeが何語として認識しているかが表示されています。

HTMLモードになっているか

もし、ここが「Plain Text」や「Django HTML」「PHP」などの表示になっていませんか？ HTML用のEmmetを動かすには、この部分が完全に「HTML」という表示になっている必要があります。

手動で変更する方法

もし「HTML」以外の表示になっていた場合は、手動で一発で直すことができます。

  1. 画面右下の言語モードの文字（例：「Plain Text」）をクリックします。（または、ショートカットキー Ctrl + K を押した後に M を押します。Macは Cmd + K ＞ M）
  2. 画面上部に検索窓（コマンドパレット）が出てくるので、半角で「html」と入力します。
  3. 候補に出てきた「HTML」を選択します。

これで右下の表示が「HTML」に切り替わり、その瞬間にEmmetが有効化されます。「!」を入力して、展開されるか試してみてください。

Emmetの設定を確認する

ファイルも言語モードも問題ないのに動かない場合、VSCodeの内部設定（システム設定）でEmmetに制限がかかっている可能性があります。

Emmetが無効化されていないか

意図せずEmmetの機能自体がオフになっていないか設定画面を確認します。

  1. Ctrl + ,（MacはCmd + , ）を押して、VSCodeの「設定」画面を確認します。
  2. 上部の検索バーに「emmet」と入力します。
  3. 「Emmet: Show Expanded Abbreviation」という項目を探し、これが「always」または「inMarkupAndStylesheetFilesOnly」になっているか確認します。ここが「never」になっていると、Emmetの予測候補が一切画面に出なくなります。

setting.jsonの設定確認

VSCodeの設定をコード（JSON形式）で直接管理している場合、記述のミスでEmmetが動かなくなっていることがあります。設定画面の右上にある「ファイルを開くようなアイコン（設定 JSON を開く）」をクリックして、setting.json の中身を確認してみましょう。

もし、以下のような記述が混ざっていたら注意が必要です。

"emmet.showExpandedAbbreviation": "never"

これが含まれている場合は、この行を削除するか、値を“always”や“true”に書き換えて保存してください。

「！」や「html:5」が展開されない場合の対処法

Emmetの入力方法や、キーボードのショートカット設定が原因で展開できないケースの対処法です。

Tabキーで展開する

デフォルトのVSCodeでは、「!」と入力した後に「Tabキー」を押すことでEmmetが展開されます（Enterキーでも展開できる場合があります）。 もし、文字を打っただけで待っていても何も起きない場合は、入力直後にキーボードの左側にある Tab キーをポンと押してみてください。

補完候補が表示されているか

「!」を打ったときに、そのすぐ下に「Emmet省略記法」と書かれた小さなポップアップ（吹き出し）が出ているかどうかが極めて重要です。 このポップアップが出ている状態であれば、VSCodeはEmmetを認識しています。もしポップアップが消えてしまった場合は、Ctrl + Space（MacはCmd + Space）を押すと、もう一度補完候補のポップアップを強制的に表示させることができます。

ショートカット競合確認

「Tabキーを押しても展開されず、ただの空白が入るだけ」という場合、あなたがインストールした他の拡張機能やキーバインド（ショートカット）の設定によって、Tabキーの役割が上書きされて奪われている可能性があります。

設定画面で「emmet trigger」と検索し、「Emmet: Trigger Expansion On Tab」という項目にチェック（オン）を入れてみてください。これにより、「Tabキーを押したときは、何よりも最優先でEmmetを展開する」という強制ルールを敷くことができます。

拡張機能が原因の場合もある

VSCodeの魅力はたくさんのプラグイン（拡張機能）を入れられることですが、これが原因でEmmetがへそを曲げてしまうことがあります。

HTML補完系拡張機能との競合

「HTML Snippets」や「Auto Close Tag」「Auto Rename Tag」など、HTMLの入力をサポートする外部の拡張機能をたくさん入れすぎていると、VSCodeが「どの機能の補完を画面に出せばいいんだ？」と大混乱を起こし、結果として標準のEmmetが無視されてしまう現象が発生します。

一時的に無効化して確認する

私の実体験として、以前「便利そうだから」と深く考えずにHTML関連の拡張機能を5個ほど同時に有効化していた際、Emmetが全く反応しなくなったことがありました。

原因を特定するために、VSCodeの拡張機能タブ（Ctrl + Shift + X）を開き、HTML関連の外部プラグインを一度すべて「無効（Disable）にしてみてください。その状態でVSCodeを一度再起動し、Emmetが復活するかどうかを試します。もし復活したら、犯人はその拡張機能です。VSCodeは標準のEmmetだけでも十分に強力ですので、競合する外部プラグインは思い切ってアンインストールすることをおすすめします。

Emmetを快適に使うおすすめ設定

Emmetのトラブルが解決したら、さらにコーティングの速度を爆上げするための「おすすめのカスタマイズ設定」を導入しましょう。これを setting.json に追記するだけで、開発効率が劇的に変わります。

自動保管設定（他言語での有効化）

標準ではHTMLやCSSでしか動かないEmmetを、JavaScript（ReactのJSXなど）やVue、PHPのファイル内でも動くようにする設定です。

setting.jsonに以下を追記します。

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue": "html",
    "php": "html"
}

これを入れるだけで、モダンなフロントエンド開発の現場でもEmmetの恩恵をフルに受けられるようになります。

おすすめショートカット

Emmetには「コードを展開する」以外にも、便利な隠れたショートカット命令があります。

  • Emmet: Wrap with Abbreviation（ラップ変換）：すでに書かれているコードの塊を、後から別のタグ（<div>など）で一発で囲む機能。

コマンドパレット（Shift + Cmd + P）を開き、「ラップ」と検索すると出てきます。非常によく使うので、好みのキーバインドに登録しておくとプロっぽいコーディングが可能になります。

HTML/CSS開発で便利な使い方

トラブル対応が終わったあなたの環境なら、以下の入力がすべて一瞬で展開できるようになっているはうずです。ぜひ試してみてください。

  • ul>li*5 ＞ <ul> の中に <li> が5行入った構造が完成
  • div.container ＞ <div class=”container”>が完成
  • link:css ＞ <link rel=”stylesheet” href=”style.css”>が完成

Emmetを使うメリット

最後に、なぜ私たちがここまでしてEmmetを有効化すべきなのか、その圧倒的なメリットを3つに整理しておきます。

  • 入力速度が5倍以上アップ：100文字以上ある複雑な入れ子構造のHTMLを、わずか15文字程度の打ち込みで自動生成できます。
  • タイプミス（文法エラー）の激減：タグの閉じ忘れ、不等号（< >）の打ち忘れ、クォーテーションのペアミスなど、初心者がやりがちな記述ミスをエディタ側が完璧に防いでくれます。
  • HTML作成効率の向上：「構造を考えること」に脳のリソースを集中できるようになるため、コーディング作業そのものが圧倒的に楽しくなります。

まとめ

VSCodeでEmmetが使えなくなったときは、まず以下のチェックリストを上から順番に確認してください。

  • 拡張子確認：ファイル名の末尾が正確に.htmlになっているか？（.txtが隠れていないか）
  • 言語モード確認：画面右下の表示が「HTML」になっているか？
  • 設定確認：setting.jsonで補完機能がneverやfalseになっていないか？
  • 競合確認：新しく入れたHTML系の拡張機能が、Emmetの邪魔をしていないか？

Emmetは、一度その快適さを知ると二度と手動タイピングには戻れなくなるほど強力な、エンジニアの必須相棒です。エラーや設定の不具合は、エディタの仕組みを深く知るための素晴らしいチャンスでもあります。

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