編集

Visual Studio Code のスニペット

コードスニペットは、ループや条件文など、繰り返し現れるコードパターンを簡単に入力できるようにするためのテンプレートです。

Visual Studio Code では、スニペットは IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) に他の候補と一緒に表示されるほか、専用のスニペットピッカー (コマンドパレットの Insert Snippet (スニペットの挿入)) にも表示されます。タブ補完もサポートされています。"editor.tabCompletion": "on" で有効にし、スニペットのプレフィックス (トリガーテキスト) を入力して Tab を押すとスニペットが挿入されます。

スニペットの構文は、'interpolated shell code' (補間されたシェルコード) と \u の使用を除き、TextMate スニペット構文に従います。これらはいずれもサポートされていません。

ajax snippet

組み込みスニペット

VS Code には、JavaScript、TypeScript、Markdown、PHP など、多くの言語に対応した組み込みスニペットがあります。

builtin javascript snippet

コマンドパレットで Insert Snippet (スニペットの挿入) コマンドを実行すると、現在のファイルの言語で利用可能なスニペットのリストが表示されます。ただし、このリストには、ユーザーが定義したスニペットや、インストールした拡張機能によって提供されるスニペットも含まれることに注意してください。

Marketplace からスニペットをインストールする

VS Code Marketplace 上の多くの拡張機能にはスニペットが含まれています。拡張機能ビュー (⇧⌘X (Windows, Linux Ctrl+Shift+X)) で @category:"snippets" フィルターを使用して、スニペットを含む拡張機能を検索できます。

Searching for extensions with snippets

使用したい拡張機能を見つけたら、それをインストールし、VS Code を再起動すると、新しいスニペットが利用可能になります。

独自のスニペットを作成する

拡張機能を使わずに、独自のスニペットを簡単に定義できます。独自のスニペットを作成または編集するには、ファイル > ユーザー設定 の下にある Configure User Snippets (ユーザースニペットの構成) を選択し、スニペットを表示させたい言語 (言語識別子による) を選択するか、すべての言語で表示させたい場合は New Global Snippets file (新しいグローバルスニペットファイル) オプションを選択します。VS Code が、基礎となるスニペットファイルの作成と更新を管理します。

snippet dropdown

スニペットファイルは JSON で記述され、C スタイルのコメントをサポートし、無制限の数のスニペットを定義できます。スニペットは、動的な動作のためにほとんどの TextMate 構文をサポートし、挿入コンテキストに基づいて空白をインテリジェントにフォーマットし、簡単な複数行編集を可能にします。

以下は、JavaScript の for ループスニペットの例です。

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

上の例では

"For Loop" はスニペット名です。description が指定されていない場合、IntelliSense に表示されます。
prefix は、IntelliSense にスニペットを表示させる 1 つ以上のトリガーワードを定義します。プレフィックスでは部分文字列マッチングが実行されるため、この場合、"fc" は "for-const" にマッチします。
body は 1 行以上のコンテンツで、挿入時に複数行として結合されます。改行や埋め込まれたタブは、スニペットが挿入されるコンテキストに従ってフォーマットされます。
description は、IntelliSense によって表示されるスニペットのオプションの説明です。

さらに、上記の例の body には、3 つのプレースホルダーがあります (移動順にリストされています): ${1:array}、${2:element}、および $0 です。Tab を使って次のプレースホルダーに素早くジャンプでき、その時点でプレースホルダーを編集するか、次のプレースホルダーにジャンプできます。コロン : の後の文字列 (もしあれば) はデフォルトのテキストです。例えば ${2:element} の element です。プレースホルダーの移動順序は、1 から始まる昇順です。0 はオプションの特殊なケースで、常に最後に来て、指定された位置にカーソルを置いてスニペットモードを終了します。

ファイルテンプレートスニペット

スニペットがファイルの内容を埋める、または置き換えることを意図している場合、スニペットの定義に isFileTemplate 属性を追加できます。ファイルテンプレートスニペットは、新規または既存のファイルで Snippets: Populate File from Snippet (スニペットからファイルを作成) コマンドを実行すると、ドロップダウンに表示されます。

スニペットのスコープ

スニペットは、関連するスニペットのみが提案されるようにスコープが設定されています。スニペットは、以下のいずれかによってスコープを設定できます。

スニペットのスコープとなる言語 (すべての場合もあり)
スニペットのスコープとなるプロジェクト (おそらくすべて)

言語スニペットのスコープ

すべてのスニペットは、それが定義されている場所に基づいて、1 つ、複数、またはすべての (「グローバル」) 言語にスコープが設定されます。

言語スニペットファイル
グローバルスニペットファイル

単一言語のユーザー定義スニペットは、特定の言語のスニペットファイル (例: javascript.json) で定義されます。これは Snippets: Configure User Snippets (ユーザースニペットの構成) を通じて言語識別子でアクセスできます。スニペットは、それが定義されている言語を編集している場合にのみアクセス可能です。

複数言語およびグローバルのユーザー定義スニペットは、すべて「グローバル」スニペットファイル (ファイル拡張子が .code-snippets の JSON) で定義されます。これも Snippets: Configure User Snippets (ユーザースニペットの構成) を通じてアクセスできます。グローバルスニペットファイルでは、スニペット定義に、1 つ以上の言語識別子を取る追加の scope プロパティを持つことができます。これにより、スニペットは指定された言語でのみ利用可能になります。scope プロパティが指定されていない場合、グローバルスニペットはすべての言語で利用可能です。

ほとんどのユーザー定義スニペットは単一の言語にスコープが設定されているため、言語固有のスニペットファイルで定義されます。

プロジェクトスニペットのスコープ

プロジェクトにスコープが設定されたグローバルスニペットファイル (ファイル拡張子が .code-snippets の JSON) を持つこともできます。プロジェクトフォルダースニペットは、Snippets: Configure User Snippets (ユーザースニペットの構成) ドロップダウンメニューの New Snippets file for ''... ('' のための新しいスニペットファイル...) オプションで作成され、プロジェクトのルートにある .vscode フォルダーに配置されます。プロジェクトスニペットファイルは、そのプロジェクトで作業するすべてのユーザーとスニペットを共有するのに便利です。プロジェクトフォルダースニペットはグローバルスニペットに似ており、scope プロパティを通じて特定の言語にスコープを設定できます。

スニペットの構文

スニペットの body は、カーソルと挿入されるテキストを制御するための特別な構文を使用できます。以下はサポートされている機能とその構文です。

タブストップ

タブストップを使用すると、エディターのカーソルをスニペット内で移動させることができます。カーソルの位置を指定するには $1、$2 を使用します。数字はタブストップが訪れる順序であり、$0 は最終的なカーソル位置を示します。同じタブストップが複数出現する場合はリンクされ、同期して更新されます。

プレースホルダー

プレースホルダーは、${1:foo} のように値を持つタブストップです。プレースホルダーのテキストが挿入され、選択されるため、簡単に変更できます。プレースホルダーは ${1:another ${2:placeholder}} のようにネストすることができます。

選択肢

プレースホルダーは値として選択肢を持つことができます。構文は、パイプ文字で囲まれたカンマ区切りの値の列挙です。例: ${1|one,two,three|}。スニペットが挿入され、プレースホルダーが選択されると、ユーザーにいずれかの値を選択するよう促します。

変数

$name または ${name:default} を使用すると、変数の値を挿入できます。変数が設定されていない場合、そのデフォルト値または空の文字列が挿入されます。変数が不明な場合 (つまり、その名前が定義されていない場合)、変数の名前が挿入され、プレースホルダーに変換されます。

以下の変数を使用できます。

TM_SELECTED_TEXT 現在選択されているテキストまたは空の文字列
TM_CURRENT_LINE 現在の行の内容
TM_CURRENT_WORD カーソル下の単語の内容または空の文字列
TM_LINE_INDEX 0 から始まる行番号
TM_LINE_NUMBER 1 から始まる行番号
TM_FILENAME 現在のドキュメントのファイル名
TM_FILENAME_BASE 現在のドキュメントの拡張子を除いたファイル名
TM_DIRECTORY 現在のドキュメントのディレクトリ
TM_FILEPATH 現在のドキュメントのフルファイルパス
RELATIVE_FILEPATH 現在のドキュメントの相対 (開いているワークスペースまたはフォルダーに対する) ファイルパス
CLIPBOARD クリップボードの内容
WORKSPACE_NAME 開いているワークスペースまたはフォルダーの名前
WORKSPACE_FOLDER 開いているワークスペースまたはフォルダーのパス
CURSOR_INDEX 0 から始まるカーソル番号
CURSOR_NUMBER 1 から始まるカーソル番号

現在の日時を挿入する場合

CURRENT_YEAR 現在の年
CURRENT_YEAR_SHORT 現在の年の下 2 桁
CURRENT_MONTH 2 桁の月 (例: '02')
CURRENT_MONTH_NAME 月のフルネーム (例: 'July')
CURRENT_MONTH_NAME_SHORT 月の短い名前 (例: 'Jul')
CURRENT_DATE 2 桁の日付 (例: '08')
CURRENT_DAY_NAME 曜日の名前 (例: 'Monday')
CURRENT_DAY_NAME_SHORT 曜日の短い名前 (例: 'Mon')
CURRENT_HOUR 24 時間形式の現在の時
CURRENT_MINUTE 2 桁の現在の分
CURRENT_SECOND 2 桁の現在の秒
CURRENT_SECONDS_UNIX Unix エポックからの秒数
CURRENT_TIMEZONE_OFFSET 現在の UTC タイムゾーンオフセット (+HH:MM または -HH:MM、例: -07:00)

ランダムな値を挿入する場合

RANDOM 6 桁のランダムな 10 進数
RANDOM_HEX 6 桁のランダムな 16 進数
UUID バージョン 4 の UUID

現在の言語を考慮して、行コメントまたはブロックコメントを挿入する場合

BLOCK_COMMENT_START 出力例: PHP では /*、HTML では <!--
BLOCK_COMMENT_END 出力例: PHP では */、HTML では -->
LINE_COMMENT 出力例: PHP では //

以下のスニペットは、JavaScript ファイルに /* Hello World */ を、HTML ファイルに  を挿入します。

{
  "hello": {
    "scope": "javascript,html",
    "prefix": "hello",
    "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
  }
}

変数の変換

変換を使用すると、変数の値を挿入する前に変更できます。変換の定義は 3 つの部分で構成されます。

変数の値、または変数が解決できない場合は空の文字列に対してマッチする正規表現。
正規表現からマッチしたグループを参照できる「フォーマット文字列」。フォーマット文字列は、条件付きの挿入や簡単な変更を可能にします。
正規表現に渡されるオプション。

次の例では、現在のファイルの名前から末尾を削除して挿入します。つまり、foo.txt から foo を作成します。

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

プレースホルダー変換

変数変換と同様に、プレースホルダーの変換では、次のタブストップに移動するときにプレースホルダーに挿入されるテキストを変更できます。挿入されたテキストは正規表現と照合され、マッチまたはマッチ群は (オプションに応じて) 指定された置換フォーマットテキストに置き換えられます。プレースホルダーの各出現箇所は、最初のプレースホルダーの値を使用して、それぞれ独立して独自の変換を定義できます。プレースホルダー変換のフォーマットは、変数変換と同じです。

変換の例

例は、特定の文字を二重にエスケープする必要があることを示すために、スニペットの本文内に表示されるように二重引用符で囲まれています。ファイル名 example-123.456-TEST.js に対する変換例と結果の出力です。

例	出力	説明
`"${TM_FILENAME/[\\.]/_/}"`	`example-123_456-TEST.js`	最初の `.` を `_` に置換
`"${TM_FILENAME/[\\.-]/_/g}"`	`example_123_456_TEST_js`	各 `.` または `-` を `_` に置換
`"${TM_FILENAME/(.*)/${1:/upcase}/}"`	`EXAMPLE-123.456-TEST.JS`	すべて大文字に変更
`"${TM_FILENAME/[^0-9a-z]//gi}"`	`example123456TESTjs`	英数字以外の文字を削除

文法

以下は、スニペットの EBNF (拡張バッカス・ナウア記法) です。\ (バックスラッシュ) を使用して、$、}、および \ をエスケープできます。選択要素内では、バックスラッシュはカンマとパイプ文字もエスケープします。エスケープする必要がある文字のみエスケープできます。したがって、これらの構文内で $ をエスケープすべきではなく、選択構文内で $ または } をエスケープすべきではありません。

any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*
if          ::= text
else        ::= text

TextMate スニペットの使用

既存の TextMate スニペット (.tmSnippets) を VS Code で使用することもできます。詳細については、拡張機能 API セクションの TextMate スニペットの使用トピックを参照してください。

スニペットにキーボードショートカットを割り当てる

特定のスニペットを挿入するために、カスタムのキーボードショートカットを作成できます。keybindings.json (基本設定: キーボードショートカットファイルを開く) を開き、すべてのキーボードショートカットを定義し、追加の引数として "snippet" を渡してキーボードショートカットを追加します。

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)$0"
  }
}

キーボードショートカットは Insert Snippet (スニペットの挿入) コマンドを呼び出しますが、スニペットを選択するように促す代わりに、提供されたスニペットを挿入します。カスタムのキーバインディングは、キーボードショートカット、コマンド ID、およびキーボードショートカットが有効になるタイミングのオプションのwhen 句コンテキストで通常通り定義します。

また、snippet 引数の値を使用してスニペットをインラインで定義する代わりに、langId と name 引数を使用して既存のスニペットを参照できます。langId 引数は、name で示されるスニペットが挿入される言語を選択します。たとえば、以下のサンプルは csharp ファイルで利用可能な myFavSnippet を選択します。

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp",
    "name": "myFavSnippet"
  }
}

次のステップ

コマンドライン - VS Code には、ファイルを開いたり差分を表示したり、拡張機能をインストールしたりするための豊富なコマンドラインインターフェイスがあります。
拡張機能 API - VS Code を拡張する他の方法について学びます。
スニペットガイド - VS Code で使用するためにスニペットをパッケージ化できます。

よくある質問

.tmSnippet ファイルから既存の TextMate スニペットを使用したい場合はどうすればよいですか？

TextMate スニペットファイルを VS Code で使用するために簡単にパッケージ化できます。拡張機能 API ドキュメントの Using TextMate Snippets (TextMate スニペットの使用) を参照してください。

貼り付けられたスクリプトにスニペットが変数を配置するにはどうすればよいですか？

貼り付けられたスクリプトに変数を配置するには、スニペット展開フェーズで解析されないように、$variable 名の '$' をエスケープする必要があります。

"VariableSnippet":{
    "prefix": "_Var",
    "body": "\\$MyVar = 2",
    "description": "A basic snippet that places a variable into script with the $ prefix"
  }

これにより、貼り付けられたスニペットは次のようになります。

$MyVar = 2

IntelliSense からスニペットを削除できますか？

はい、Insert Snippet (スニペットの挿入) コマンドのドロップダウンで、スニペット項目の右側にある Hide from IntelliSense (IntelliSense から非表示) ボタンを選択することで、特定の snippets が IntelliSense (補完リスト) に表示されないようにすることができます。

Hide from IntelliSense button in Insert Snippet dropdown

Insert Snippet (スニペットの挿入) コマンドでスニペットを選択することはできますが、非表示のスニペットは IntelliSense に表示されません。

08/07/2025