VSCodeやCursorでEmmetが効かない(使えない)時の対処方法
VSCodeやCursorなどのコードエディタで「Emmet」(エメット)を使おうとしたところ、Tabを押してもコードを展開してくれすただ空白スペースが出来てしまう時の対処方法です。
EmmetはHTMLやCSSのコードを自動補完してくれ、マークアップ（コーディング）の時間を短縮できるツール。
例えば「p.text」と入力してタブを押すと「<p class="txt"></p>」と出力してくれます。
それでは対処方法、2つご覧ください。
htmlや各種コードのファイルでない
HTMLファイルと認識させる方法
リポジトリやhtmlファイルを開くのではなく、新しいタブに「Untitled」を開いた場合はテキストと認識されるためEmmetが使えません。
コンテンツがない空のものでもいいので実際のhtmlファイルを作って開くか、そこに「<html></html>」を記述してもHTMLとして扱われるので使えるようになりますが、上の画像のように右下にあるプレーンテキストから言語モードの選択でHTMLを検索して選んでも、VSCodeがコードファイルだと認識してくれEmmetが使えるようになります。
CSSを選べばCSSとして使えます。
Cursorでも右下にプレーンテキストがあるので同じ操作をします。
Trigger Expansion On Tabにチェックを入れる
Trigger Expansion On Tabにチェックを入れる
これは最近のバージョンだとあまり重要ではないですが、また必要になるかもしれないので記載します。
VSCodeの場合は左下の歯車マークから設定に行き、検索窓にTrigger Expansion On Tabと入力、Emmet:Trigger Expansion On Tabの項目にチェックを入れ、VSCodeを一度閉じて再起動します。
Cursorの場合は左上のファイル、ユーザ設定、設定で検索窓が出てきますので、あとはVSCodeと同じ手順になります。
以前はここにチェックがないと入力してもEmmetが展開されませんでしたが、最近のバージョンではチェックなしでも動きます。