VSCode の Emmet のキーバインドを変える

Emmet は Zen-Coding の頃から興味はあって、Emmet に名前が変わった頃から本格的に使い始めたため、かれこれ10年くらいの付き合いになります。
ただ、当時使ってたエディタが、デフォルトの Tab キーによる展開がうまく行かず、ずっと Ctrl + E にしていました。¹
なので、VSCode でもそれができるようにしたときのメモです。

なんでいまさら？

VSCode 自体今まで使ってきてなかったわけじゃなくて、普通に使ってました。
ただ、あまりこれで HTML 書くことはなくて、Markdown だったり、単にメモ帳だったり、IDEで編集してるメインのコードとは別に参照用として開くときに使ったりといった感じでした。

なので、別に Emmet 使わなくても困らなかったのです。
ただ、いざちゃんとHTMLを書く機会がきてみると、やっぱり無いと辛いなってことで、ちゃんと設定することにしました。

各種ショートカットキーとかは Mac 用のものなので、他の OS の場合は適宜読み替えてください

設定方法

まずは、何らかの方法でキーボードショートカットの設定を開きます。

• コマンドパレット Cmd + Shift + P を開いて「キーボードショートカット」で検索し、キーボードショートカットを開く
• Cmd + K → Cmd + S と連続で入れても呼び出せます（Keyboard Shortcut）
  • Cmd 押しっぱなしにして K → S と連続で入れるイメージかと思ったら、意外と猶予時間があるっぽい？
• メニューバーから「基本設定」→「キーボードショートカット」

などなど、道順はいろいろあるのでお好きな方法でどうぞ。

そうすると、キーボードショートカットというタブが開くので、上部の検索フィールドで、Emmetと検索し、
Emmet: 略語の展開 という項目を探して、ショートカットキーを自分にあったもの（今回なら Ctrl + E）に変更します。

使いたいキーによっては既に設定がされていて衝突する場合があり、その場合ショートカットキーの記録ウィンドウにメッセージが出ますのでそこをクリックすると既存の設定を参照できます。
そのうえで、どうするかというと

• 新しいショートカットキーを別のものに変える
• 古いショートカットキーを別のものに帰るか、バインディングを剥がす
• あきらめる

のいずれかになると思います。

もちろん、いつ というフィールドで指定された条件を満たしてるときだけなので、うまく動くこともあるかもしれませんが、不意に意図しない挙動をすると面倒なのでやっぱりかぶらないように調整するのが良いと思います。

今回も見事 Ctrl + E はcursorLineEnd とかぶってましたが、使ったこと無いので消しました。

JSON ファイルからも編集できる

キーバインドは keybindings.json を使っても設定できます。
規定値を剥がす場合は command の頭に - をつけるようです。

なので今回は

[
    {
        "key": "ctrl+e",
        "command": "-cursorLineEnd",
        "when": "textInputFocus"
    },
    {
        "key": "ctrl+e",
        "command": "editor.emmet.action.expandAbbreviation",
        "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
    },
    {
        "key": "tab",
        "command": "-editor.emmet.action.expandAbbreviation",
        "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
    }
]

こんなかんじの JSON になりました。

新しいショートカットキーで展開出来ない場合

実はショートカットキーかえただけだと動かなくて、Emmet の展開を実行するためには、設定で
Emmet: Trigger Expansion On Tab（emmet.triggerExpansionOnTab）のチェックを ON にする必要がありました。

あ、キーボードショートカットじゃなくて、アプリの設定です。Cmd + . とかで開くほう。

これ、めっちゃ Tab って設定名にも入ってますが、正確には editor.emmet.action.expandAbbreviation を実行するキーという意味っぽいです。
デフォルトだとオフかもしれないし、頭の回転が良い人は、「あ、Tabで展開はもう要らないかよね」ってなってチェックを外してしまった方もいるかもしれませんが、これは罠です。
このチェックが ON じゃないと、自分で設定したキーで展開されません。

じゃあなんで今までチェック入ってなかったのにうごいてたのか？というと、これは正確には editor.emmet.action.expandAbbreviation が実行されて展開されていたのではなくて、入力中にでてくる補完タグ候補を Tab キーで選んでいただけ というのが真相のようです。

そのため、たとえば Emmet: Show Expanded Abbreviation の値を never とかにすると、候補も出なくなるし、Tabキーでの展開もされなくなるはずです。
ということは逆に言うと補完候補が出ている場合は、キーバインドを剥がしたとしても Tab でもなんとなく展開できちゃいます。

どっちを取るのかは人それぞれですが、特に無害そうなので自分はこのままにしてます。候補が出るのはそれはそれで便利だしね。

1. なんで Ctrl+E　なのかというと、EmmetのEって覚えるためにEにしてたってだけだったのですが、案外押しやすい組み合わせ（USキーボードで CAPS と Ctrl いれかえてると、Aの左が Ctrl になるので左手をほんの少し動かすだけで小指 Ctrl、中指 E にできる。 ↩