VScodeで「選択範囲を指定のタグで囲う」をショートカット登録したい

Question

テキスト

という文字があるとして、
それをドラッグした後、特定のコマンドを押すと

<span class="hoge">テキスト</span>

となるようにしたいと考えています。

#要件
・<span class="hoge">～</span>の部分はこちらで作成したもの
・emmetは使わない（毎回class名の入力が必要になり手間な為）
・具体的に、「選択範囲のテキスト」の残し方が分からない（これさえ分かれば解決します）

#余談
sublime textの場合、キーバインド設定に

{ "keys": ["ctrl+shift+b"], "command": "insert_snippet", "args": {"contents": "<span class=\"bold$1\">${0:$SELECTION}</span>"} },

と書くことで理想の挙動になります。
これと同じことをvs codeで実現したいと考えています。

sublimeで言う「${0:$SELECTION}」の部分を、vs codeでは何になるか、が解決の糸口かと思っております。

ちなみに「${0:$SELECTION}」はvsコードではそのまま「${0:$SELECTION}」として出力されました。

ニッチな悩みかと思いますが、
もしご存じの方いましたら、
ご教示いただけますと幸いです。

Answer 1

具体的に、「選択範囲のテキスト」の残し方が分からない（これさえ分かれば解決します）

$TM_SELECTED_TEXTか${TM_SELECTED_TEXT}と書きます。

VSCodeでも、ショートカットキーにスニペットの挿入を割り当てれば、Sublime Textと同じことができます。

スニペットをショートカットキーに割り当てるには、メニューの[ユーザー設定]-[キーボードショートカット]で、ショートカットキーの一覧を表示後、エディター右上の「回転矢印付きの????」アイコンをクリックして、設定ファイルkeybindings.jsonを表示します。

すでにいくつかのキーバインド設定が表示されていると思うので、末尾(の]の手前)に挿入する部分だけを示します。加えて、直前のキーバインド設定の}の後に,を付けるのを忘れずに。

    {
        "key": "ctrl+shift+b",
        "command": "editor.action.insertSnippet",
        "args": {
            "snippet": "<span class=\"hoge$2\">$TM_SELECTED_TEXT$1</span>"
        }
    }

内容は見ればわかると思いますが、keyがキーバインド、commandがスニペットの挿入指示、argsのsnippetが挿入するスニペットの直接設定です。

スニペット文字列のうち、$TM_SELECTED_TEXTが選択テキストの挿入位置、$1と$2が挿入後にTabキーでカーソル移動する位置を示します。カーソル位置が気になる(あるいは不要)なら内容を適当に修正してください。

このほか、言語モードごとのユーザースニペットとして登録してから、キーボードショートカットでそれを指定することもできますが、ここでは触れません。

Snippets in Visual Studio Code

Comments

[nanigasi]

ありがとうございます！
頂いたソースコードをコピーし、完璧に実現できました！

ニッチな内容であったにも関わらずご教示いただき本当にありがとうございました。
本当に助かりました。