どうもこんにちは、暇人です。
今回はVSCodeのスニペットを布教する話をします。
しかし、Qiitaを読むような方はVSCodeを使い、更にスニペットを多用している方が多いように思えます。
まあ、これは私のメモのようなものなので、既に環境を作り終えている方は、ここで読むのを止めてもらって構いません。
スニペットとは
スニペットは入力のショートカットです。
これを導入することでコードや文を簡単に呼び出すことが出来ます。
スニペットの作成方法
設定マーク内のスニペットを開き、登録したい言語を選び、「{}」内に以下のような文を書く。
"スニペット名": {
"prefix": "呼び出すためのショートカット",
"body": [
"出力の1行目",
"出力の2行目",
"..."
],
}
項目ごとの説明は以下の通り。
| 項目名 | 内容 |
|---|---|
| スニペット名 | スニペットの名前 |
| prefix | スニペットを呼び出すためのショートカット |
| body | 展開される文 |
基本的にこれらを駆使してスニペットを作ります。
また、最後の「}」にカンマを付けると、複数のスニペットを1枚にまとめられます。
「$」,「\t」
他にも、スニペットには便利機能があります。
それは「$」と「\t」です。
「$」
「$」は入力箇所の指定ができます。
"Test": {
"prefix": "te",
"body": [
"<div class=\"$1\">",
"\t<h2>",
"\t\t$2",
"\t</h2>",
"\t<p>",
"\t\t$3",
"\t</p>",
"</div>"
]
}
このスニペットを出力し、タブキーを押すと「S1」の箇所から「$2」の箇所へ移行、のようなことができます。
「\t」
「\t」はタブの挿入です。
これを1つ記入すると1個のタブが挿入され、2つ記入すると2個のタブが挿入されます。
スニペットの使い方。
指定のファイルで、そのまま入力するだけで呼び出すことが出来る環境もあるそうなのですが、私の環境では、そのようなことは出来ませんでした。
調べてみると、「Ctrl+Space」で候補を表示できるそうですが、そのショートカットはIMEの切り替えに使っているため、私の環境では使えません。
そのため、「Ctrl+Shift+Q」で呼び出せるようにショートカットを変更しました。
以上です。
関連情報
参考
タグ
#PC #VSCode #スニペット
作成日
2026/08/05
更新日,更新内容
2026/08/05
文章の削除
//ここから