Zenn
🦁

VSCodeでカスタムショートカットを追加

2022/06/26に公開
VS Code
tech

ショートカットを設定する場所

「Code」→「Peferences」→「Keyboard Shortcuts」を選択

そして設定ページへジャンプできました

ショートカットを追加

まずはHTMLのタグ内にセレクトできるショートカットを追加したいと思います
例えばこういう内容に対して

<div>
	<img src="other.png" />
	<h1>sample text</h1>
	<! -- / Click here -->
</div>

マウスがコメントの部分において、＋何らかのショートカットだけで簡単に<img />と<h1>をまとめてセレクトする状態になるという便利の機能です

設定JSONは以下の通りです
（keyの部分は自分の好きなショートカットを記入すればOKです）

[
    {
        "key": "cmd+shift+a",
        "command": "editor.emmet.action.balanceOut"
    }
]

マニュアル操作はこちらです

まずは検索欄に「editor.emmet.action.balanceOut」を記入

そして、Keybindingの下の部分にクリック

そして、ポップアップができました
cmdとshiftとaのキーを押して、Enterを押す

これで設定完了です
Keybindingの下にショートカットのアイコンがついてきました

Discussion