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)"
    ],
},
IT関係関連記事











これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]