vscodeで独自スニペットを作成して快適にする方法

2018.10.12

はじめに

vscodeにもスニペット機能があります。 この機能を使うことで毎回同じような定型文を簡単に挿入できるようになります。 ファイルのタイプごとに設定する事ができるので、スニペットをたくさん作っても、ごちゃごちゃになることが無いです。

スニペットとは

予め定型文などをスニペットとして登録しておくことで、毎回入力する必要もないですし、コピーアンドペーストで貼り付ける必要もなく、同じ文章やコードを挿入することが出来ます。

スニペット設定の開き方

開き方は、

ファイル>基本設定>ユーザースニペット

で「スニペットファイルの選択もしくはスニペットの作成」というテキストボックスとリストが表示されますので、任意のファイルタイプを選択してください。

例えば、markdownを選択すると、markdown.jsonが作成され、スニペットを記述できる状態になります。 すでに作成済みの場合は、リストの中に、markdown.jsonが表示されていますので、選択すると編集できる状態になります。

スニペットの挿入

markdown.jsonに記載したスニペットを呼び出したいときは、.mdファイルを開いて、[Ctrl + スペース]をタイプすることで、使用可能なスニペットと作成したスニペットが一覧で表示されます。

hugoの記事を書くとき用

hugo用の記事を作成するときは、hugoコマンドではなくvscodeのスニペットを使用しています。

"hugo": {
    "prefix": "hugo",
    "body": [
        "+++",
        "title = \"$1\"",
        "date = \"\"",
        "lastmod = \"\"",
        "description = \"\"",
        "img = \"\"",
        "+++"
    ],
    "description": "hugo new"
},

$1はスニペットを挿入したときの最初のカーソル位置になります。 入力する箇所に、$2$3と順番に割り当てておくと、カーソルキーでカーソルを移動しなくても、TABキーで移動できるようになります。

hugoイメージリンク用

はじめからマークダウンのimage用スニペットが入っていますが、自分が普段使うように下記のようなスニペットを登録しています。

"img": {
    "prefix": "hugo",
    "body": [
        "![$1](http://mokuzine.net/$2.jpg)"
    ],
},