スニペットとは
スニペットとは切れ端とか断片とかいう意味があるそうです。主にプログラミングの分野では切り貼りして再使用できるパターンという意味でつかわれます。ブログ執筆中によく出てくるパターンをスニペットとして登録しておくとブログの執筆が効率的になります。
Visual Studio Codeのスニペット作成方法
Visual Studio Codeを起動し、F1ボタンを押します。snippet
と入力し、基本設定: ユーザスニペットの構成
をクリックします。
ここでスニペットを作成するグループが選べます。グローバルはこのパソコンでVisual Studio Codeを使うときいつも出てくるスニペット、フォルダ名
のスニペットとなっているものは現在のワークスペースでのみ有効なもの(フォルダを開く操作をしていないと出てきません)、その他に言語ごとのスニペットも設定できます。今回はブログ執筆用のスニペットなので、Markdownを選びます。
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
という接頭辞でしたが、sni
→Ctrl + Space
→pre
等とかなり適当に入力しても予測してくれます。
あとは前述のとおりタブを使って次々と入力していくだけです。
作成したスニペット
マーカー用スニペットを作成しました。
{
"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"
},
}
赤いマーカー
【PR】
Markdown記法はこちらの参考文献で学びました。基礎からカバーされており、とりあえずこれを読んでおけばMarkdownの基本はばっちりでしょう。
コメント