VSCodeのユーザースニペットを使って選択範囲をタグで囲む

VSCodeでHTMLやマークダウンを書いていると、選択範囲を特定のタグで囲みたいといことが生じると思います。
いつも同じようなタグを書くのは面倒…
それを解決する方法を今回は紹介します。
これができれば、テキストの編集速度をかなり高速化できます。
実際に私はブログ記事をマークダウンで書いていますが、今回紹介する設定を行うことで、編集を高速化させています。

選択範囲をタグで囲む方法はプラグインを使ってもできますが、より手軽に今回は、ユーザースニペットを使います。

<span class="red">赤字</span> で囲むユーザースニペットを作成し、それに Ctrl+R のショートカットキーを設定する例を使いながら説明していきます。

スニペットの作成
1. 設定変更
2. キーボードショートカットの設定

スニペットの作成

VSCodeを開きます。
ユーザースニペットファイルを開きます。
– メニューバーから「File」 > 「Preferences」> 「Configure User Snippets」を選択します。

– 次のような入力画面になるので、スニペットを適用したい拡張子のファイルを選択します。

– 今回は、markdownを選びました。すると「markdown.json」が開きます。他のファイルタイプで使用する場合は、その言語のJSONファイルを選択してください。
スニペットを追加します。
jsonを開くと次のようなファイルになっています。

– JSONファイルが開いたら、以下のスニペットを追加します：

{
  "Wrap with red span": {
    "prefix": "wrapred",
    "body": [
      "<span class=\"red\">$TM_SELECTED_TEXT</span>"
    ],
    "description": "Wrap selected text with <span class=\"red\">"
  }
}

上記のスニペットでは、wrapred というトリガーワードでスニペットを呼び出すことができます。選択したテキストが <span class="red"> で囲まれます。

ファイルを保存します。
– Ctrl+S（または Cmd+S）でファイルを保存します。

HTMLなどの場合はこれだけで設定できますが、マークダウンの場合は、別途以下の処理が必要になります。

設定変更

settings.jsonに設定を追加する
– 左下の歯車マークから「Settings」を選択して先ほど同様にアイコンクリックでjsonを開きます。
– 開いたsettings.jsonファイルに以下の設定を追記します。

 ```json
 "[markdown]": {
   "editor.wordWrap": "on",
   "editor.quickSuggestions": {
     "comments": "on",
     "strings": "on",
     "other": "on"
   },
   "editor.snippetSuggestions": "top"
 }
 ```
 ![settings.json](../../images/IT・プログラミング/VSCode/4017218015608433.png)

 `settings.json`には既に拡張機能の設定などが記述されていることがありますので、既存の設定と競合しないように注意してください。
 これで使えるようになりました。

キーボードショートカットの設定

キーボードショートカットを開きます。
– メニューバーから「File」 > 「Preferences」 > 「keyboard shortcuts」を選択します。

– または、Ctrl+K、Ctrl+S（または Cmd+K、Cmd+S）のショートカットを使って開くこともできます。
keybindings.json を開きます。
– 右上のアイコンをクリックして、keybindings.json ファイルを直接編集できるビューに切り替えます。
ショートカットキーを追加します。
– keybindings.json に以下の設定を追加します：

[
  {
    "key": "ctrl+r",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "langId": "markdown",
      "name": "Wrap with red span"
    }
  }
]

key の値を ctrl+r に設定し、command にはスニペットを挿入するコマンドを指定します。
args には、スニペットの langId と name を指定します。ここでは markdownファイルにユーザースニペットを登録したので、markdown とスニペットの名前 Wrap with red span を使います。