ブログ執筆効率化のためのスニペット作成

スニペットとは

スニペットとは切れ端とか断片とかいう意味があるそうです。主にプログラミングの分野では切り貼りして再使用できるパターンという意味でつかわれます。ブログ執筆中によく出てくるパターンをスニペットとして登録しておくとブログの執筆が効率的になります。

Visual Studio Codeのスニペット作成方法

Visual Studio Codeを起動し、F1ボタンを押します。snippetと入力し、基本設定: ユーザスニペットの構成をクリックします。
ユーザースニペットの構成を選択
ここでスニペットを作成するグループが選べます。グローバルはこのパソコンでVisual Studio Codeを使うときいつも出てくるスニペット、フォルダ名のスニペットとなっているものは現在のワークスペースでのみ有効なもの(フォルダを開く操作をしていないと出てきません)、その他に言語ごとのスニペットも設定できます。今回はブログ執筆用のスニペットなので、Markdownを選びます。
何用のスニペットかを選択する
マークダウンに決定
jsonファイルが新規タブで開きます。少し仰々しいですが、そんなに難しいことはありません。普通のスニペットを作成するうえで覚えることは少ないです。
jsonファイル

スニペットの文法

以下の だけ覚えればあとはコピペでどんどん作れると思います。

  • "prefix"で名前設定
  • $でプレイスホルダー
  • \でエスケープ("\そのものなどの特殊記号を記述したいとき、手前に\を付ける。)

以下のようなスニペットを入れたと想定します。

{
    "snippet_name": {
        "prefix": "snippet_prefix",
        "body": [
            "スニペットの本文です。$1これがプレイスホルダーです",
            "${2:ラベル}を付けることもできます。",
            "す $3 $3 $3 $3 $3 $3 $3 $3 の う ち",
        ],
        "description": "sample snippet"
    },
}

"snippet_name"のところにわかりやすい名前を付けます。"snippet_prefix"のところにスニペットの接頭辞を書きます。この接頭辞はスニペットを呼び出すときに使います。"body"の後の[]の中にスニペットの本文を書きます。$1$2となっているところはプレイスホルダーと呼ばれ、スニペットを呼び出したときにカーソルがそこにあわされます。タブを押すと1から順番にカーソルがあっていきます。同じ番号のところには一度に同じ文字が入力されます。
スニペット使用のデモ

スニペットの使い方

スニペットの呼び出しはCtrl + Spaceで行います。接頭辞を入れてからCtrl + Spaceで候補が出てきます。Ctrl + Spaceは全般的な自動補完機能なので、スニペット以外のものも出てきます。先ほどの例はsnippet_prefixという接頭辞でしたが、sniCtrl + Spacepre等とかなり適当に入力しても予測してくれます。
スニペット挿入の際の候補予想が結構かしこい
あとは前述のとおりタブを使って次々と入力していくだけです。

作成したスニペット

マーカー用スニペットを作成しました。

{
    "marker_red": {
        "prefix": "marker_red",
        "body": [
            "<span class=\"marker_R\">$1</span>"
        ],
        "description": "red marker for wordpress blog"
    },
    "marker_red_full": {
        "prefix": "marker_red_full",
        "body": [
            "<span class=\"marker_R_full\">$1</span>"
        ],
        "description": "full red marker for wordpress blog"
    },
}

赤いマーカー

コメント

タイトルとURLをコピーしました