スニペットで最速補完していく [VSCode]

スニペットとは

wikiを参照すると

情報処理の分野ではよく使う短いプログラムコードを統合開発環境から呼び出す機能のことである.
また, 呼び出される短いコードのことをスニペットと呼ぶ場合もある.

とのこと.

この機能はVSCodeでも標準で搭載されています.
以下でスニペットの定義と呼び出しの仕方について書いていきます.

VSCodeで自作スニペットを作成する

ユーザー自身でスニペットを定義するためにjsonファイルを開く

言語ごとにjsonファイルが用意されているため, そこにスニペットの定義を書いていくことになります.
jsonファイルの開き方は以下のどちらかです.

jsonファイルの開き方 : パターン1

1. Ctrl + Shift + Pでコマンドパレットを開き, [configure user snippets]と入力します.
2. そうすると言語の一覧がズラッと出てくるので, 設定したい言語を選択してください.

jsonファイルの開き方 : パターン2

1. 上部のタブの[ファイル]->[基本設定]->[ユーザースニペット]を選択します.
2. そうすると言語の一覧がズラッと出てくるので, 設定したい言語を選択してください.

jsonファイルへ定義を書いていく

下記のようなフォーマットでjsonへ書き足していきます.

"スニペットの名前": {
  "prefix": "呼び出す際のキーワード",
  "body": [
    "展開したい内容",
    "",
    "",
  ],
},

正直スニペットの名前は利用しないのでどうでもいいですが, 他のスニペット名と被らないようにしましょう.
"prefix"をコード内で記述し, tabを押すと"body"の内容へと補完されます. (補完候補がいくつかある場合はその一覧がでるため, 適するものを選択することになります)

tabを押してスムーズに入力位置を切り替えるには

$1, $2, …, ${10}, ${11}, …を利用すると補完時にtabで移動する位置を決めることができます.
また$0で終わりの位置を決定できます.
例としては以下のような感じです.

"Add memo box": {
    "prefix": ">@memo_box",
    "body": [
        "<div class=\"memo\">",
        "<div class=\"box-title\">$1</div>",
        "",
        "$2",
        "</div>$0"
    ],
    "description": "add div-tag has class'memo'"
},

実際の挙動はこんな感じです.

タブ補完を有効にする

Ctrl + ,でユーザー設定を開き, Tab Completionの部分を選択し, onかonlySnippetsを選択します.

VSCodeでスニペットを利用する

"prefix"で登録したキーワードを打ち, tabキーを入力すると"body"の内容へと補完されます. (補完候補がいくつかある場合はその一覧がでるため, 適するものを選択することになります)

先ほどにも載せましたが以下のように動作します.