Visual Studio Codeで、ユーザー定義スニペットで楽をする

早く調べておくんだった（血涙

最近typescriptやhtmlを書くことが多いので、なんとなくVisual Studio Codeで作業しているのですが、特にBootstrap関係でやたら同じような文字列を書いていることに気づきました。

以前RailsなプロジェクトにおいてRubymineを使って作業していた時は特にテストコードの定型文を吐くのにLive Templatesを使用しており、まあ同じような機能あるだろうということで調査しました。

ユーザー定義スニペット

特にプラグイン等を追加せずに使用できます。

手順

メニュー > Code > Preferences > User Snippets をクリック

すると言語を聞かれるので、今回はhtmlを選択

html.jsonが開くので、例の通りに作ってみる

html.json

...
	"Add new row": {
        "prefix": "row",
        "body": [
            "<div class=\"row padding-8\">",
            "    <div class=\"col-xs-12\">",
            "        $1",
            "    </div>",
            "</div>"
        ],
        "description": "crate 1row"
    }
...

よくある行を作るやつ

$1は作成後のカーソル位置です。$2を設定するとそこからタブを押した際に更に移動します。

使用法はhtmlファイル編集中に 'row' と打ち、tabを押すだけ。

これで開発効率だいぶ上がりそうですね（ニッコリ