HTML
CSS
scss
emmet
VSCode

vscodeでEmmetがTab(ショートカットキー)で動かない人へ

ずっとTabキーでEmmetの展開をしていた私が最近vscodeに移行して困ったのでメモ。


Emmetは2.0で提案・自動補完に変更された

vscodeの公式でEmmet2.0の仕様について説明がありますが、提案型に変更されてました。

そのため、初期設定では今までのようにTabキーで展開ができないものがあり、代わりに候補として展開後が表示されるようになりました。

しかし、その候補で全て補完できれば良いのですが、できないものも多くあります。

ただ、以下のように設定を変更すると以前のような入力方法も可能です。


バージョン1.27 以上の設定


  1. 画面左下の「歯車アイコン」 から「設定」、もしくは 「Ctrl(MacはCmd) + ,(カンマ)」 をクリックして「Settings」ファイルを開く

  2. 左側のカテゴリメニューにある「拡張機能」をクリックしてメニューを展開

  3. 「Emmet」の項目があるのでクリックして右側にEmmetの設定内容が表示される

  4. 「Trigger Expansion On Tab」の項目にある「有効にすると、TABキーを押したときにEemmet省略記法が展開されます。」と記述があるのでクリックしてチェックボックスにチェックを入れる
    (※Eemmetは多分誤字だと思うけど記載されている通りに記述しています。)


バージョン1.26以下の設定 & settings.jsonファイルを直接編集する場合


  1. 画面左下の「歯車アイコン」 から「設定」、もしくは 「Ctrl(MacはCmd) + ,(カンマ)」 をクリックして設定ファイルを開く

  2. 2分割画面の左側にある各種設定項目をスクロールしてEmmetの項目をクリックして展開

  3. Emmetの項目の中にある "emmet.triggerExpansionOnTab": false を見つけ、左側のペンアイコンをクリック

  4. クリックしたらtrueとfalseが表示されるので、ここをtrueにする

以上でTabキーでも展開が可能になります。

ちなみにEmmet2.0の仕様については以下の公式に掲載されてますのでそちらからご確認ください。

Emmet 2.0 in Visual Studio Code