VSCodeのショートカットで選択範囲をタグで囲む方法

VSCodeでHTMLやマークダウンを書いているとタグや特定の文字で囲みたいということがあると思います。

今回は、このタグで囲む作業を一発でショートカット使って行うための設定方法を紹介していきます。

タグで囲む方法
keybindings.jsonを開く
keybindings.jsonに設定を追加する

タグで囲む方法

ショートカットでタグで囲む方法は大きく2つあります
1. ユーザースニペットに登録→そのスニペットをショートカットに登録
2. スニペットを直接ショートカットに登録
今回は、2つ目のスニペットを直接ショートカットに登録する方法を紹介します。

keybindings.jsonを開く

まずは、VSCodeのショートカット設定を行うkeybindings.jsonを開きます。
Ctrl+K Ctrl+Sでキーボード設定を開き、右上アイコンをクリックします。
この説明でよくわからない場合は、以下の記事で詳細を画像付きで説明していますので、参考にしてください。

404 NOT FOUND | lifetechia

テクノロジーを活用して人生をより豊かに

keybindings.jsonに設定を追加する

keybindings.jsonに下記の設定を追加します。
今回は、選択した範囲をのコードタグで囲むスニペットをCtrl+Qに登録します。

    {
        "key": "ctrl+q",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "`$TM_SELECTED_TEXT`"
        }

    },

$TM_SELECTED_TEXTが選択したテキストを意味します。この部分を囲むようにsnippetを記述します。
これを保存することで、ショートカットが使えるようになります。