【VS Code】爆速！オリジナルのコマンド（スニペット）を使いこなそう！

VS Codeには、毎回書くのが面倒なコードをアシストするオリジナルなコマンドを設定することができる、強力な手段があります。それがユーザースニペットです。

前提

ここで解説する環境は次の通りです。
多少異なっていても問題ないと思います。

• Windows11
• VS Code 1.84

メリット

あらかじめ決めておいたスニペットを入力すると、それに紐づくコードが自動で挿入されます。

さらに、Tabキーを押下するごとに、あらかじめ設定しておいた位置にカーソルを飛ばすことができます。ひな形をまず呼び出し、都度編集する場所にカーソルを飛ばすように設定しておくと便利です。

方法

今回は例として、Markdownファイル（mdファイル）にユーザースニペットを設定します。

手順

1. VS Codeで左下の歯車アイコン⚙「Manage」から「ユーザースニペット」をクリック
2. 上の検索窓から、スニペットを登録したいファイルの種類のJSONファイル（今回の例では「html.json」ファイル）を開く
3. スニペットを記述する

スニペットの登録コード

書式は次の通りです。その先の例とともに見てください。

"スニペット名": {
    "prefix": "呼び出し名",
    "body": [
         // ここにコードを記述
    ],
    "description": "説明書き"
} 

• スニペット名：スニペットを使う際は何も影響しないので、基本的に何でもいいです。特にこだわりがなければ呼び出し名と同じにすることが多いようです。
• 呼び出し名：スニペットを実際に呼び出すときの文字列です。
• ここにコードを記述：挿入したい文字列（コード）を次の記法に従って記述します。
  • コード：""で囲む
  • 改行：,
  • 飛ばすカーソルの位置：$1、$2, ...
• 説明書き：このJSONファイルを見た人が何のスニペットなのかわかるような説明を書けます。省略できます。

説明だけだとよくわからないと思いますが、実際の例を見るとわかりやすいと思います！下のコードをコピペして、HTMLのJSONファイルに貼り付けてください。

例：HTML　divタグ

"div_class": {
    "prefix": "divclass",
    "body": [
        "<div class=\"$1\">",
        "\t$2",
        "</div>",
        "$3"
    ],
    "description": "divタグを挿入"
},

JSONファイルを保存した後、新規のHTMLファイルで「divclass」と入力して「Tab」か「Enter」を押すと、即座にdivタグと閉じタグなどが挿入されます。

ここで、挿入直後のカーソルがclass="と">の間にあると思います。これは、JSONファイルで$1と記述していたためです。１番目のカーソルの位置を$1で指定できます。
class名を入力した後、「Tab」キーを押下すると、次にdivタグの中のインデントされた中身に飛びます。中身を書いた後、さらに「Tab」キーを押すと、divの閉じタグの次の行に飛ぶはずです。このように、カーソルのジャンプする位置を指定することができるのです。

Point

「Tab」キーを押すごとに飛ばしたいカーソルの位置を指定できます。N番目の「Tab」キー押下でジャンプしたい一は、JSONファイル内で$Nと指定しておきます。

次に着目したいのが、特殊文字の入力についてです。JSONファイルの<div class=の直後に\"との記述があります。これは、記号"自体がコードの終始を示す記号のため、単純には文字として出力できないのです。文字として認識させるには、\"とします。つまり、文字としての"＝\"です。

！

特殊文字はエスケープさせる必要があります。一例を示しておきます。なお、円マークとバックスラッシュは同じ文字です。

入力したいモノ	実際に入力するモノ
"	\"
/	\/
「Tab」キー	\t
改行	\n

慣れると作業効率が大幅に向上するので、ぜひ使ってみてください。