VSCodeやCursorなどのコードエディタで「Emmet」(エメット)を使おうとしたところ、Tabを押してもコードを展開してくれすただ空白スペースが出来てしまう時の対処方法です。

EmmetはHTMLやCSSのコードを自動補完してくれ、マークアップ(コーディング)の時間を短縮できるツール。
例えば「p.text」と入力してタブを押すと「<p class="txt"></p>」と出力してくれます。

それでは対処方法、2つご覧ください。

htmlや各種コードのファイルでない

HTMLファイルと認識させる方法
HTMLファイルと認識させる方法

リポジトリやhtmlファイルを開くのではなく、新しいタブに「Untitled」を開いた場合はテキストと認識されるためEmmetが使えません。

コンテンツがない空のものでもいいので実際のhtmlファイルを作って開くか、そこに「<html></html>」を記述してもHTMLとして扱われるので使えるようになりますが、上の画像のように右下にあるプレーンテキストから言語モードの選択HTMLを検索して選んでも、VSCodeがコードファイルだと認識してくれEmmetが使えるようになります。
CSSを選べばCSSとして使えます。

Cursorでも右下にプレーンテキストがあるので同じ操作をします。

Trigger Expansion On Tabにチェックを入れる

Trigger Expansion On Tabにチェックを入れる
Trigger Expansion On Tabにチェックを入れる

これは最近のバージョンだとあまり重要ではないですが、また必要になるかもしれないので記載します。

VSCodeの場合は左下の歯車マークから設定に行き、検索窓にTrigger Expansion On Tabと入力、Emmet:Trigger Expansion On Tabの項目にチェックを入れ、VSCodeを一度閉じて再起動します。

Cursorの場合は左上のファイルユーザ設定設定で検索窓が出てきますので、あとはVSCodeと同じ手順になります。

以前はここにチェックがないと入力してもEmmetが展開されませんでしたが、最近のバージョンではチェックなしでも動きます。

Pocket

   

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です