VSCodeやCursorのようなコードエディタで「Emmet」が使えない時の対処方法です。
通常はEmmetの記法で書いてタブを押すとコードに変換されて表示されますが、いくらタブを押しても空白が出来るだけでEmmetが機能してくれない事がありますので、下記の方法をお試しください。
Emmet(エメット)はHTMLやCSSなどのコードを大幅に省略した記法で、それを実際のコードに展開してくれるツールです。
例えば「!」と「タブ」でhtmlのheadからbodyまでのひな型を生成してくれたり、「a:link」とタブで「<a href="http://"></a>」と出力してくれます。
それでは対処方法、2パターンあるのでご覧ください。
HTML/CSSと認識させる（テキスト扱いになっている）
リポジトリやコードファイルなどで開かず、新しいタブ「Untitled」で開いた場合、コードとは認識されず普通のテキスト扱いになっています。
これだとEmmetが使用できないので、HTMLファイルを開くか、「<html></html>」を記述するとHTMLファイル扱いになり使えます。
または上の画像のように、右下に表示されているプレーンテキストをクリックして言語モードの選択からHTMLを検索して選びます。
CSSにしたい場合はCSSを選びます。
Cursorもプレーンテキストが同じ位置にあるので操作は一緒です。
これでコードと認識されるのでEmmetが有効になり使える状態にできます。
Trigger Expansion On Tabを有効にする
最近のバージョンだと必要ないかもしれませんが、変わるかもしれないので記載します。
VSCodeの場合は左下の歯車マークから設定に行き、検索窓にTrigger Expansion On Tabと入力、Emmet:Trigger Expansion On Tabの項目、『有効にすると、入力候補が表示されない場合でもTabキーを押すとEmmet省略記法が展開されます。無効にして場合でも、TABキーを押すと、表示される入力候補を受けられます。』と書かれているところにチェックを入れ、VSCodeを一度閉じて再起動します。
Cursorの場合は左上のファイル、ユーザ設定、設定で検索窓が出てきますので、あとはVSCodeと同じ手順になります。
以前はここにチェックがないとEmmetが展開しませんでしたが、今のバージョンではこの作業なしで使用できるかと思います。
