Visual Studio Code の Emmet のキーボードショートカット

Visual Studio Code の Emmet で複数行選択したテキストをタグでラップしてくれる便利機能 `Wrap Individual Lines with Abbreviation` がいつからか利用できなくなっていました。

利用しようとすると以下のようなエラーが発生。

```
'editor.emmet.action.wrapIndividualLinesWithAbbreviation' not found
```

原因がわからず放置していたのですが調査してみたところ、どうやら一行選択用の `Wrap with Abbreviation` が複数行に対応したため `Wrap Individual Lines with Abbreviation` が削除されたようです。

というわけで、Emmet のキーボードショートカットを見直してみました！

## Emmet のキーボードショートカットの変更方法

以下のどちらかの方法でキーボードショートカットの一覧画面を表示します。

* `ファイル` → `ユーザー設定` → `キーボードショートカット`
* `Ctrl + K` `Ctrl + S`

表示した一覧画面上部のテキストボックスに `emmet` と入力し検索します。

## キーボードショートカット一覧

Emmet はタグの展開以外にもたくさんの便利機能がありますが、よく利用する機能だけにキーボードショートカットを割り当てて利用しています。

「いつ」に当たる部分のタイミングがよく理解できてないのですが、 `editorTextFocus && !editorReadonly` を指定しました。

「いつ」に当たる部分の一覧は以下で確認できます。

https://code.visualstudio.com/api/references/when-clause-contexts


| 役割                | キーバインド              | いつ |
|--------------------|--------------------------|----|
| 0.1ずつ減少         | Alt + DownArrow          | editorTextFocus && !editorReadonly |
| 0.1ずつ増加         | Alt + UpArrow            | editorTextFocus && !editorReadonly |
| 1ずつ減少           | Ctrl + Shift + DownArrow | editorTextFocus && !editorReadonly |
| 1ずつ増加           | Ctrl + Shift + UpArrow   | editorTextFocus && !editorReadonly |
| 10ずつ減少          | Shift + Alt + DownArrow  | editorTextFocus && !editorReadonly |
| 10ずつ増加          | Shift + Alt + UpArrow    | editorTextFocus && !editorReadonly |
| イメージサイズの更新 | Ctrl + U                | editorTextFocus && !editorReadonly |
| バランス（外側）     | Ctrl + Shift + A        | editorTextFocus && !editorReadonly |
| バランス（内側）     | Ctrl + Shift + Alt + A  | editorTextFocus && !editorReadonly |
| ラップ変換          | Ctrl + Shift + W         | editorTextFocus && !editorReadonly |
| 数式の評価          | Ctrl + Shift + Y         | editorTextFocus && !editorReadonly |
| 略語の展開          | Tab                      | config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus |

## 減少・増加

数値の変更はこれがないとやってられないぐらい便利っす。

* 0.1ずつ
  * 減少： `Alt` + `DownArrow`
  * 増加： `Alt` + `UpArrow`
* 1ずつ
  * 減少： `Ctrl` + `Shift` + `DownArrow`
  * 増加： `Ctrl` + `Shift` + `UpArrow`
* 10ずつ
  * 減少： `Shift` + `Alt` + `DownArrow`
  * 増加： `Shift` + `Alt` + `UpArrow`

![in-decrement.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8b934927-45b1-d082-dae4-529291aa165f.gif)

## イメージサイズの更新

画像のサイズを自動挿入。
画像のサイズを調べるのって地味に面倒くさいのでほんと便利！

`Ctrl` + `U`

![img.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/eac91422-7b0a-fae7-994f-8934881e41bf.gif)

## バランス（外側・内側）

言葉にすると難しいですが、キャレット位置から外側・内側のタグを選択できます。

* 外側： `Ctrl` + `Shift` + `A`
  * `Ctrl` と `Shift` を押したまま `A` を押すごとに外側のタグを選択してくれます。
* 内側： `Ctrl` + `Shift` + `Alt` + `A`
  * `Ctrl` と `Shift` と `Alt` を押したまま `A` を押すごとに内側のタグを選択してくれます。

![balance.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/d85b3e66-9812-897c-5b34-0f680356baa9.gif)

## ラップ変換

複数行変換がとにかく楽ちん。
規約のコーディング時とか、リストが多い時にほんと助かります。

`Ctrl` + `Shift` + `W`

![wrap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/60311f12-5381-4d7f-9937-1c5fbd68f6e1.gif)

## 数式の評価

私の机から電卓が消えた…

`Ctrl` + `Shift` + `Y`

![math.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/16b4663d-0edf-5910-b927-722c0e636876.gif)