Visual Studio CodeでEmmetが使えないときに確認すること

EmmetはHTML/CSSの入力を補助するプラグインです。省略記法で入力できるため、使いこなすことでコーディングの効率が上がります。様々なエディタで使用可能で、VS Codeにも標準装備されています。デフォルトでは機能がオフになっていたり、ある日突然使用できなくなることがあります。いつも通りTabキーを押しているのに候補がでない！？となると焦ります。その場合の確認すべきことをまとめます。

Visual Studio CodeのEmmetでコーディングを効率化する

入力補完の機能＝Emmet

そもそもこの機能をEmmetと認識していないパターンもあるようです。VS Codeの場合はデフォルトでオンになっていることが普通ですので、予測変換が機能しなくなって解決策を検索しようとするもキーワードがわからない、ということが起こりえます。VScodeとEmmetで調べましょう。

Tabキーで起動する設定になっているかを確認

昨日まで使っていたのに、使えなくなった場合の原因の十中八九はこれです。バージョンアップによるものなのか、他の操作をしていて触ってしまったのか。原因がわからないことがほとんどですが、まずはここを確認しましょう。歯車のアイコンから「設定」を選択します。

検索窓からTrigger Expansion on tabを検索します。インクリメントサーチですので、Trigger exあたりで一番上に「Trigger Expansion on tab」と表示されるはずです。こちらのチェックが外れていたらチェックを入れます。変更後は再起動を忘れずに行ってください。

再起動について

VS Codeのアプリを閉じて再度開いても再起動したことにはならないので注意が必要です。Chromeなどもそうですが、プロセスを一旦終わらせる必要があります。「表示」から「コマンドパレット」を開き（ショートカット：ctrl+shift+p）、コマンド窓に「reload window」で再起動できます。

さきほどの歯車のアイコンに「再起動して更新する」という選択肢が出ていたら、そちらをクリックしても構いません。

拡張子があっているかを確認

焦ってやってしまいがちなことのひとつに、適切な拡張子でないファイルでEmmetを使おうとしていた、というものがあります。予測変換が働かないので新規ファイルを作ってそのまま「html:5」と入力し、候補が表示されないので更に焦るというパターンです。html/css/phpなど相応しい拡張子のファイルで試しましょう。.textや.mdなどはデフォルトでは動作しない点にも注意してください。これらの拡張子でEmmetを使用するには手動で設定する必要があります。

言語モードも念のため確認する

もう一点、見落としがちな要素として「言語モード」があります。ファイルの拡張子がhtmlやcssになっていても、言語モードが「プレーンテキスト」になっていると、VS Codeはプレーンテキストと判断するため、Emmetが使用できないことがあります。テキストエディタなど他のアプリで作成したファイルで稀にこのような捻じれ現象が起きることがあります。

言語モードはVS Codeの右下のステータスバーに表示されています。下記スクショの「{}PHP」と記載された箇所が言語モードにあたります。ファイル拡張子と言語モードが一致しているかを確認してみてください。

プラグインではないので注意

ウェブ上では「Emmetのプラグインが無効になっている場合があるので、無効になっていないか確認する」という情報がありますが、これは過去のバージョンにおいての話ですので注意が必要です。初期バージョン（1.x台の頃）はプラグインとして提供されていましたが、現在では標準機能となっています。インストール済みのプラグインにEmmetがないのはそのためです。

プラグインにEmmetがなくても焦らないようにしましょう。以前は下記のように「制作者：vscode」のEmmetプラグインが存在していました。現在でもEmmetで検索すると大量の類似プラグインが表示されますが、無闇にインストールしないことをおすすめします。標準機能は設定ファイル（settings.json）に集約されていますので、そちらでオン／オフの切り替えを行います。

最終手段は再インストール

以上の項目を全て確認しても使えない場合は、最終手段として再インストールを試しましょう。設定ファイルを残したまま再インストールしても直る場合はあります。再インストールしても状況が変わらない場合は、設定ファイルを全て削除した上で再インストールをしましょう。