VS CodeでEmmetが効かない?よくある原因と解決策
コーディング中、こんな経験はありませんか?
a.btn
と入力して Tab キーを押せば、本来は
<a href=”” class=”btn”></a>
に自動変換されるはずなのに、何も起こらない。
「あれ、Emmetって使えなくなった?」と焦ってしまう瞬間です。
結論から言うと、原因のほとんどは設定が1つオフになっているだけです。
この記事では、初心者の方がつまずきやすいこの症状の直し方を紹介します。
原因:Tabキーでの展開設定がオフになっている
VS Codeには「EmmetをTabキーで展開する」ための設定があります。
これがOFFになっていると、Emmetの記法自体は認識されていても、Tabを押しても展開されません。
解決策
- VS Codeの設定を開く(Mac: Cmd + , / Windows: Ctrl + ,)
- 検索バーに「Emmet: Trigger Expansion On Tab」と入力
- 表示された項目のチェックボックスをONにする
これだけで、a.btn + Tab → <a href=”” class=”btn”></a> の変換が正常に動くようになります。
補足:それでも直らないときは
上記の設定がすでにONになっているのに直らない場合は、以下もチェックしてみてください。
- ファイルの言語モードが正しいか(右下に「HTML」「CSS」などと表示されているか。プレーンテキスト扱いになっているとEmmetは効きません)
- 他の拡張機能とキー操作が競合していないか(タブ補完系の拡張機能を入れている場合、Tabキーの挙動を奪われていることがあります)
まとめ
Emmetが効かないと「壊れた?」と不安になりますが、多くの場合は設定を1つONにするだけで解決します。
設定 → 「Emmet: Trigger Expansion On Tab」→ ON
まずはここを確認してみてください！
