VSCodeでスニペットを作成する方法

2026年10月26日

VSCode（Visual Studio Code）には、よく使うコードや定型文を登録して、短いキーワードから呼び出せる「スニペット」という機能があります。

スニペットを活用すると、毎回同じコードを手入力する必要がなくなり、コーディングを効率化できます。

JavaScriptの console.log()、HTMLの定型構造、CSSのメディアクエリ、PHPの条件分岐など、繰り返し入力するコードを登録しておくと便利です。

VSCodeのユーザースニペットは標準機能として用意されているため、基本的には拡張機能を追加しなくても利用できます。

VSCodeのスニペットとは

よく使うコードを登録して再利用できる機能

スニペットとは、あらかじめ登録しておいたコードやテキストを、短い文字列から呼び出して挿入できる機能です。

例えば、JavaScriptで頻繁に使用する次のコードがあるとします。

console.log();

このコードをスニペットとして登録しておけば、

clg

のような短い文字列を入力し、候補からスニペットを選択するだけでコードを挿入できます。

さらに、VSCodeのスニペットでは、単にコードを挿入するだけでなく、カーソルの移動位置や初期値なども設定できます。

例えば、

console.log(${1:value});

のように設定すると、スニペットを展開したあとに value の部分をすぐ編集できます。

VSCodeでスニペットを作成する基本手順

コマンドパレットを開く

まず、VSCodeのコマンドパレットを開きます。

WindowsやLinuxでは、次のショートカットを使用します。

Ctrl + Shift + P

macOSでは、次のショートカットです。

Command + Shift + P

コマンドパレットが開いたら、

Snippets: Configure Snippets

を検索して実行します。

スニペットを作成する対象を選択する

続いて、スニペットを使用する対象を選びます。

例えば、JavaScript用のスニペットを作成したい場合は、JavaScript用のスニペットファイルを選択します。

言語ごとのスニペットファイルを選択すると、その言語を編集しているときに利用できるスニペットを登録できます。

例えば、

javascript
python
html
css
php
typescript

などがあります。

JavaScript用のスニペットを作成する例

console.log用のスニペットを登録する

例えば、clg と入力すると console.log() を挿入できるスニペットは、次のように記述できます。

{
  "Console Log": {
    "prefix": "clg",
    "body": [
      "console.log(${1:value});"
    ],
    "description": "console.logを挿入"
  }
}

保存したあと、JavaScriptファイルで、

clg

と入力すると、スニペット候補として表示されます。

スニペットを選択すると、

console.log(value);

のように展開され、value の部分をそのまま編集できます。

スニペットを構成する基本項目

スニペット名

次の部分はスニペットの名前です。

"Console Log"

例えば、

{
  "Console Log": {
  }
}

のように記述します。

スニペットの管理や候補表示の識別に使用されます。

prefix

prefix は、スニペットを呼び出すための文字列です。

例えば、

"prefix": "clg"

と設定している場合、

clg

と入力すると、対象のスニペットが候補として表示されます。

また、複数の呼び出し文字列を指定することもできます。

"prefix": [
  "clg",
  "log"
]

この場合、clg と log のどちらからでも同じスニペットを呼び出せます。

body

body には、実際に挿入するコードを記述します。

例えば、

"body": [
  "console.log(${1:value});"
]

です。

複数行のコードを登録することもできます。

{
  "If Statement": {
    "prefix": "ifc",
    "body": [
      "if (${1:condition}) {",
      "\t${2:// code}",
      "}"
    ]
  }
}

展開すると、次のようになります。

if (condition) {
    // code
}

description

description には、スニペットの説明を設定します。

"description": "console.logを挿入"

必須ではありませんが、スニペットが増えたときに内容を判別しやすくなります。

カーソル位置を指定する方法

$1や$2で移動順を指定する

VSCodeのスニペットでは、

$1
$2
$3

のような記述を使って、カーソルの移動順を指定できます。

この仕組みはタブストップと呼ばれます。

例えば、

{
  "Function": {
    "prefix": "fn",
    "body": [
      "function ${1:name}(${2:args}) {",
      "\t${3}",
      "}"
    ]
  }
}

と設定すると、次のように展開できます。

function name(args) {

}

Tabキーを押すことで、name、args、関数内部の順に編集位置を移動できます。

$0で最後のカーソル位置を指定する

$0 は、スニペット編集が終了したあとの最終的なカーソル位置を表します。

例えば、

{
  "If Statement": {
    "prefix": "ifc",
    "body": [
      "if (${1:condition}) {",
      "\t$0",
      "}"
    ]
  }
}

とすると、最初に condition を編集し、その後に条件分岐の内部へカーソルを移動できます。

プレースホルダーを設定する方法

${1:初期値}を使用する

スニペットでは、単なる $1 だけでなく、

${1:初期値}

という形式を使用できます。

例えば、

{
  "Variable": {
    "prefix": "cst",
    "body": [
      "const ${1:name} = ${2:value};"
    ]
  }
}

と設定すると、

const name = value;

のように展開されます。

name や value は初期値として表示され、そのまま使用することも書き換えることもできます。

選択式のスニペットを作成する方法

Choice構文を使用する

複数の候補から値を選択できるスニペットも作成できます。

構文は次の形式です。

${1|候補1,候補2,候補3|}

例えば、

{
  "Variable Declaration": {
    "prefix": "var",
    "body": [
      "${1|const,let,var|} ${2:name} = ${3:value};"
    ]
  }
}

と設定します。

スニペット展開時に、

const
let
var

の候補から選択できます。

HTMLのスニペットを作成する方法

セクションの定型コードを登録する

HTMLでは、よく使うセクション構造をスニペットにしておくと便利です。

{
  "HTML Section": {
    "prefix": "section",
    "body": [
      "<section class=\"${1:section}\">",
      "\t<h2>${2:タイトル}</h2>",
      "\t<p>${3:本文}</p>",
      "</section>",
      "$0"
    ],
    "description": "HTMLセクションを作成"
  }
}

展開すると、次のようなコードを挿入できます。

<section class="section">
    <h2>タイトル</h2>
    <p>本文</p>
</section>

Web制作では、ヘッダー、CTA、FAQ、フォーム、記事カードなどを登録しておくと作業効率を高められます。

CSSのスニペットを作成する方法

メディアクエリを登録する

CSSでは、レスポンシブ対応で頻繁に使うメディアクエリを登録できます。

{
  "Media Query": {
    "prefix": "mq",
    "body": [
      "@media (max-width: ${1:768px}) {",
      "\t${2}",
      "}",
      "$0"
    ],
    "description": "レスポンシブ用メディアクエリ"
  }
}

展開すると、次のようになります。

@media (max-width: 768px) {

}

PHPのスニペットを作成する方法

条件分岐を登録する

PHPやWordPress開発でもスニペットを活用できます。

例えば、

{
  "PHP If": {
    "prefix": "pif",
    "body": [
      "<?php if (${1:condition}) : ?>",
      "\t${2}",
      "<?php endif; ?>",
      "$0"
    ],
    "description": "PHPのif構文"
  }
}

と登録しておけば、PHPの条件分岐を簡単に挿入できます。

スニペットで利用できる変数

ファイル名などを自動入力できる

VSCodeのスニペットでは、現在のファイルやエディターの状態に応じた変数を利用できます。

代表的な変数には、次のようなものがあります。

TM_FILENAME
TM_FILENAME_BASE
TM_DIRECTORY
TM_FILEPATH
RELATIVE_FILEPATH
TM_SELECTED_TEXT
CLIPBOARD
WORKSPACE_NAME
UUID

例えば、現在のファイル名を挿入する場合は次のようにします。

{
  "File Name": {
    "prefix": "filename",
    "body": [
      "${TM_FILENAME}"
    ]
  }
}

sample.js を開いている場合は、

sample.js

が挿入されます。

拡張子を除いたファイル名を取得する

TM_FILENAME_BASE を使用すると、拡張子を除いたファイル名を取得できます。

{
  "File Name Base": {
    "prefix": "filebase",
    "body": [
      "${TM_FILENAME_BASE}"
    ]
  }
}

例えば、sample.js なら、

sample

が挿入されます。

選択中の文字列を利用する方法

TM_SELECTED_TEXTを使用する

TM_SELECTED_TEXT を使用すると、スニペットを実行したときに選択されているテキストを参照できます。

例えば、

{
  "Strong Tag": {
    "prefix": "strongwrap",
    "body": [
      "<strong>${TM_SELECTED_TEXT}</strong>"
    ]
  }
}

のように設定できます。

ただし、選択中のテキストをどのように扱うかは、スニペットの呼び出し方法やエディターの状態によって挙動が異なる場合があります。

クリップボードの内容を利用する方法

CLIPBOARD変数を使用する

CLIPBOARD を使用すると、クリップボードの内容をスニペット内に挿入できます。

{
  "Paste Clipboard": {
    "prefix": "clip",
    "body": [
      "${CLIPBOARD}"
    ]
  }
}

コピーしている文字列を定型コードの中へ組み込みたい場合などに便利です。

グローバルスニペットを作成する方法

複数の言語で使えるスニペットを作成する

特定の言語だけでなく、複数の言語で利用したい場合はグローバルスニペットを作成できます。

Snippets: Configure Snippets を実行し、

New Global Snippets file

を選択します。

グローバルスニペットは、

○○.code-snippets

という形式のファイルとして作成されます。

scopeで対象言語を限定する

グローバルスニペットでは、scope を使用して対象言語を限定できます。

例えば、

{
  "Console Log": {
    "scope": "javascript,typescript",
    "prefix": "clg",
    "body": [
      "console.log(${1:value});"
    ],
    "description": "console.logを挿入"
  }
}

とすれば、JavaScriptとTypeScriptで利用できます。

scope を指定しなければ、基本的にはすべての言語で利用可能です。

プロジェクト専用のスニペットを作成する方法

.vscodeフォルダに保存する

特定のプロジェクトだけで利用するスニペットも作成できます。

プロジェクト専用のスニペットは、プロジェクトルートにある .vscode フォルダ内へ保存します。

例えば、次のような構成です。

my-project/
├─ .vscode/
│ └─ project.code-snippets
├─ src/
└─ package.json

プロジェクト専用スニペットはGitなどで管理できるため、チームで同じスニペットを共有する場合にも便利です。

特定のファイルだけでスニペットを使用する方法

includeで対象ファイルを指定する

現在のVSCodeでは、include を使用してスニペットの対象ファイルをパターンで絞り込めます。

例えば、

{
  "Test Block": {
    "prefix": "test",
    "body": [
      "test('${1:description}', () => {",
      "\t$0",
      "});"
    ],
    "scope": "typescript",
    "include": [
      "**/*.test.ts",
      "**/*.spec.ts"
    ]
  }
}

とすれば、TypeScriptのテストファイルを対象にできます。

excludeで除外ファイルを指定する

特定のファイルやフォルダを除外する場合は、exclude を使用できます。

"exclude": [
  "**/dist/**",
  "**/node_modules/**"
]

scope と組み合わせて、言語とファイルパターンの両方から対象を絞り込むこともできます。

Tabキーでスニペットを補完する方法

editor.tabCompletionを設定する

スニペットの候補をTabキーで補完したい場合は、settings.json に次の設定を追加できます。

{
  "editor.tabCompletion": "on"
}

これにより、入力内容に一致するスニペットなどをTabキーで補完できるようになります。

ただし、補完候補やエディターの状態によって動作が異なる場合があります。

コマンドパレットからスニペットを挿入する方法

Insert Snippetを使用する

スニペットは、prefixを入力しなくてもコマンドパレットから呼び出せます。

コマンドパレットで、

Insert Snippet

を実行すると、現在のファイルで利用可能なスニペット一覧が表示されます。

作成したユーザースニペットだけでなく、VSCodeや拡張機能が提供するスニペットも候補に表示されます。

スニペットをショートカットキーで挿入する方法

editor.action.insertSnippetを使用する

キーボードショートカットからスニペットを挿入することもできます。

例えば、keybindings.json に次のような設定を追加します。

{
  "key": "ctrl+alt+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1);$0"
  }
}

この設定では、指定したショートカットキーを押すと、

console.log();

に相当するスニペットが挿入されます。

スニペットを同期する方法

Settings Syncでユーザースニペットを同期できる

VSCodeのSettings Syncを利用すると、ユーザースニペットも複数の環境で同期できます。

複数のPCでVSCodeを使用している場合でも、同じユーザースニペットを利用しやすくなります。

一方、

.vscode/project.code-snippets

のようなプロジェクト専用スニペットはプロジェクトファイルとして扱われるため、Gitなどのバージョン管理で共有する方法が一般的です。

スニペットを作成するときの注意点

JSONをベースとした形式で記述する

VSCodeのスニペットファイルは、JSONをベースとした形式で記述します。

例えば、

{
  "Console Log": {
    "prefix": "clg",
    "body": [
      "console.log(${1:value});"
    ],
    "description": "console.log"
  }
}

のように記述します。

スニペットファイルではコメントも記述できるため、通常の厳密なJSONとは少し異なります。

ダブルクォートをエスケープする

HTMLなどでダブルクォートを含む文字列を書く場合は、エスケープが必要です。

例えば、

<div class="container">

をスニペットとして登録する場合は、

"body": [
  "<div class=\"container\">",
  "\t$0",
  "</div>"
]

のように記述します。

$をそのまま出力するときは注意する

VSCodeのスニペットでは、$ が特殊な構文として使用されます。

例えば、

$1
$2
$0
${1:value}
${TM_FILENAME}

などです。

そのため、PHPやシェルスクリプトなどで $ を文字として出力したい場合は、エスケープが必要になることがあります。

VSCodeのスニペットで登録しておくと便利なコード

Web制作でよく使うコードを登録する

Web制作では、次のようなコードをスニペット化しておくと便利です。

HTMLのsection
ヘッダー
ナビゲーション
記事カード
CTA
FAQ
フォーム
pictureタグ
CSSメディアクエリ
JavaScriptのconsole.log
fetch処理
PHPの条件分岐
WordPressループ
構造化データ

特に、日常的に何度も手入力しているコードは、スニペット化による効果が大きくなります。