VSCode のスニペットを使ってみる

女性が喜んでジャンプするイメージ画像

スニペットがあるじゃないか。

完全に頭から抜け落ちていました。
今使っているエディタ Visual Studio Code(以下、VSCode)には スニペット が機能として搭載されています。

スニペット(英語: snippet)とは、「断片」という意味である。情報処理の分野ではよく使う短いプログラムコードを統合開発環境から呼び出す機能の事である。また、呼び出される短いコードの事をスニペットと呼ぶ場合もある。 Wikipediaより。

こんな感じのものです。

snipet の例をアニメーションで

Markdown でスニペットを使いたい

なんか初期状態ではスニペットが有効になっていないんですよね。
設定の中に沢山項目があって、そのどれかを有効にすれば良いのかもと思いつつ、面倒なので設定ファイル settings.json に直接書き込んでいます。

settings.json に有効化のための記述を追加

設定ファイルの保存先が、環境(OS)によって違うので、下記の方法が一番楽チンな気がする。

ファイル → 基本設定 → 設定 → 拡張機能 → settings.json で編集 を選択。

拡張機能のところは選ばなくても良いんですが、これを選ぶとすぐに settings.json が沢山出てくるのでそうしています。

ファイルを開いたら、以下を追加しています。
元々 {} があるので、その中に入れるようにすると正しく認識してくれます。

[settings.json]

{

"[markdown]":  {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true,
    "editor.snippetSuggestions": "top"
    }

}

スニペットを登録する

Markdown用のスニペットを登録します。

設定用ファイル Markdown.json を開く

Markdown.json というファイルに追記していきます。

ファイル → 基本設定 → ユーザースニペット → Markdown.json を選択。

ファイルが開かれるとこんな感じで、サンプルがコメントアウトした状態になっています。

[Markdown.json]

{

// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }

}

サンプルは残しても消しても結構ですが、最初と最後の {} は、残してください。
尚、ここに書かれているサンプルの意味が理解できなくて、ちょっと迷いました。(英語にとことん弱い人)

標準的なスニペットの登録方法

"スニペット名": {
    "prefix": "キーになる文字列",
    "body":[ "呼び出される文字列" ],
    "description": "このスニペットの説明文"
    }

例えば、下記のように登録したとします。

"insart image":{
    "prefix": "img",
    "body": [ "![hoge のイメージ画像](/images/hoge.webp)" ],
    "description: "画像を挿入する"
    }

そうすると、Markdown での記述の際に
img と打った時点(もしくは i を入れた時点)で、上記のスニペットが画面に登場し、Enter or TAB を押すことで置き換わります。

snipet の例をアニメーションで

候補が複数出て、2行目以降を選択したいときは、カーソルキーで選択してください。
日本語の変換候補と似た感じです。

一歩進んだスニペットの登録方法

先程の登録だと、ベタ打ちというか決め打ちというか、登録したものを呼び出して終わりでした。いつも使うバナーを呼び出すとかなら OK ですね。

ただ、実際にコードを書いていくにあたっては、呼び出したものを修正したいという場面が多々あります。

そんなときは $1$2 を使用します。
先程と違うのは、"body" の中だけです。

"insart image":{
    "prefix": "img",
    "body": [ "![$1 のイメージ画像](/images/$2.webp)" ],
    "description: "画像を挿入する"
    }

こんな感じになります。

snipet の例をアニメーションで

”のイメージ画像” は固定ですが、その前は毎回違うという場合。
上記のように $1 を入れてあげると、呼び出し後に $1 の部分にカーソルが挿入されるため、そのまま文字列の入力が可能です。

さらに、TAB を押すことで $2 にカーソルが移動するので、画像のファイル名を入れることができると。

便利になってきましたね。

もう一歩進んだスニペットの登録方法

先程のにちょっと工夫をすると、分かりやすさをプラスすることができます。
私のように Markdown が頭に入っていない人向け・・・かもしれません。

こちらも "body" の中だけが変わっています。

"insart image":{
    "prefix": "img",
    "body": [ "![${1:画像のタイトル} のイメージ画像](/images/${2:ファイル名}.webp)" ],
    "description: "画像を挿入する"
    }

はい、少しややこしくなりました(笑)

動作そのものは先程と同じですが、表示の仕方が変わります。
とりあえず、画面をみていただきましょう。

snipet の例をアニメーションで

お分かりになりましたか。

${1:hoge} という書き方をすると、$1 としてカーソルが入る部分に、hoge という文字列を仮表示してくれます。

上記の場合は、${1:画像のタイトル} ですので、$1 のところに 画像のタイトル という文字列が仮表示されていて、何かしらの文字を入力すると消えてくれます。

こうしておけば、そこに何を書けば良いのかが一目瞭然。しかも、勝手に消えてくれるので、自分で削除する手間も要りません。

一番最初の標準的なスニペットから、少しだけ手を入れる必要がありますが、それ以上に見返りは大きいので、是非お試しください。

スニペットの使い方

すでにここまでのところで書いてしまったので、省略(笑)

Markdown の形式が選択されている状態(ウィンドウの右下に出ています)で、登録したスニペットのキーとなる文字列を入力して、候補から選択してください。

注意点

ちょっとした注意点を書いておきます。

スニペットの複数登録

スニペットを複数登録する際は、1スニペット毎に最後の }}, としてください。
1スニペット毎にカンマで区切る必要があります。

ダブルクォーテーション( “)の使用

HTML で記述する際に、" を使う場面が多々あります。
class="" とか style="" とか。

スニペットの body 部分で " は、文字列の範囲を決めるという特殊な意味を持ち、そのまま記述すると、そちらの意味に取られちゃって、意図した動作となりません。

HTML の中で使いたい場合は " の前に \ を付けて下さい。そうすることで、特殊な意味を持ったものではないと否定できます。

実際に書くと class=\"\" みたいな感じです。

body が複数行になる場合 & タブを入れたい場合[2019-03-04]

複数行の場合は、1行ごと最後に , を入れます。
但し、最終行は不要で、] の後に , を入れます。

"comment":{
	"prefix": "comment",
	"body":[
		"/* ========================================",
		"\t\t${1:comment}",
		"======================================== */"
	],
	"description": "コメントアウト タイトル"
}

また、タブは \t で表します。
上記例の場合は、タブが2つ入る形です。


Posted / Update 2019-03-04

coding #vscode #snippet