More than 3 years have passed since last update.

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

Last updated at 2021-10-16Posted at 2021-10-16

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 のキーボードショートカットの変更方法

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

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

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

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

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

役割	キーバインド	いつ
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

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

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

Ctrl + U

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

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

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

Ctrl + Shift + W

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

Ctrl + Shift + Y