Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

ずっと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

bushi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした