💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

Visual Studio Code のスニペット

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

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

スニペットの構文は TextMate スニペットの構文 に従いますが、例外として「シェル コードの挿入 (interpolated shell code)」と \u の使用はサポートされていません。

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 を再起動すると、新しいスニペットが利用可能になります。

独自のスニペットの作成

拡張機能を使わなくても、独自のスニペットを簡単に定義できます。独自のスニペットを作成または編集するには、ファイル (File) > ユーザー設定 (Preferences) の下にある ユーザースニペットの構成 (Configure 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: Fill File with Snippet) コマンドを実行したときにドロップダウンに表示されます。

スニペットのスコープ

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

  1. スニペットのスコープ対象となる 言語 (すべての言語の場合もあります)
  2. スニペットのスコープ対象となる プロジェクト (すべてのプロジェクトの場合もあります)

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

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

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

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

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

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

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

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

ファイル パターンのスコープ

オプションの include および exclude プロパティを使用してファイル パターンを指定することで、スニペットが表示されるタイミングをさらに制御できます。これらのプロパティは、言語固有のスニペット ファイルとグローバル スニペット ファイルの両方で機能し、scope プロパティと組み合わせて、スニペット候補をより正確に制御できます。

  • include - スニペットを表示するファイルを指定する、1 つの glob パターンまたは glob パターンの配列。
  • exclude - スニペットを表示しないファイルを指定する、1 つの glob パターンまたは glob パターンの配列。

パターン マッチングは次のように動作します

  • ファイル名のみのパターン (たとえば、*.test.ts) は、プロジェクト内のファイルの場所に関係なく、ファイル名に基づいて一致します。
  • パスベースのパターン (たとえば、**/*.test.ts や **/dist/**) は、完全なファイル パスに対して一致します。
  • ファイルが include パターンと exclude パターンの両方に一致する場合、exclude パターンが優先されます。
  • どちらのプロパティも指定されていない場合、スニペットは scope プロパティに基づいて、すべての適用可能なファイルに表示されます。
例

例: テスト スニペット

このスニペットは TypeScript テスト ファイルにのみ表示されます

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

例: ディレクトリの除外

このスニペットは、dist または node_modules ディレクトリ内のファイルを除く、すべての JavaScript ファイルに表示されます。

{
  "Console Log": {
    "prefix": "log",
    "body": "console.log(${0});",
    "description": "Insert console.log",
    "scope": "javascript",
    "exclude": ["**/dist/**", "**/node_modules/**"]
  }
}

例: 設定ファイルのスニペット

このスニペットは、ファイル名のみのパターンを使用して、travis.yml ファイルにのみ表示されます。

{
  "Travis CI Node": {
    "prefix": "travis-node",
    "body": ["language: node_js", "node_js:", "  - ${1:18}"],
    "description": "Travis CI Node.js configuration",
    "scope": "yaml",
    "include": ["travis.yml"]
  }
}

include および exclude パターンを使用すると、関連性のある場所にのみスニペットを表示することで、IntelliSense の不要な表示を減らすことができます。

スニペットの構文

スニペットの 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_MILLISECOND 3 桁の現在のミリ秒 (例: 078)
  • CURRENT_SECONDS_UNIX Unix エポックからの秒数
  • CURRENT_MILLISECONDS_UNIX Unix エポックからのミリ秒数
  • CURRENT_TIMEZONE_OFFSET +HH:MM または -HH:MM 形式の現在の UTC タイムゾーン オフセット (例: -07:00)
  • CURRENT_TIMEZONE_NAME 現在のタイムゾーンの IANA 名 (例: America/Los_Angeles)

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

  • 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 World --> を挿入します。

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

変数の変換

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

  1. 変数の値と一致させる正規表現。変数を解決できない場合は空の文字列になります。
  2. 正規表現のキャプチャ グループを参照できる「フォーマット文字列」。フォーマット文字列を使用すると、条件付きの挿入や単純な変更を行うことができます。
  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

プレースホルダーの変換

変数変換と同様に、プレースホルダーの変換では、次のタブストップに移動するときにプレースホルダーの挿入テキストを変更できます。挿入されたテキストは正規表現と照合され、オプションに応じて 1 つまたは複数のマッチが指定された置換フォーマット テキストに置き換えられます。プレースホルダーが複数回使用されている場合、最初のプレースホルダーの値を使用して、出現箇所ごとに個別に変換を定義できます。プレースホルダー変換のフォーマットは、変数変換と同じです。

変換の例

以下の例は、特定文字を二重にエスケープする必要があることを示すために、スニペットの body 内に表示されるようにダブルクォーテーションで囲んで示されています。ファイル名 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 (拡張バッカス・ナウア記法) です。\ (バックスラッシュ) を使用して、$、}、および \ をエスケープできます。選択肢 (choice) 要素内では、バックスラッシュはカンマやパイプ文字もエスケープします。エスケープが必要な文字のみをエスケープする必要があるため、これらの構成内では $ をエスケープすべきではなく、選択肢構成内でも $ や } をエスケープすべきではありません。

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' | '/snakecase' | '/kebabcase' '}'
                | '${' 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 スニペットの使用

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

スニペットへのキーボード ショートカットの割り当て

特定のスニペットを挿入するためのカスタム キーボード ショートカット を作成できます。すべてのキーボード ショートカットを定義する keybindings.json (基本設定: キーボード ショートカットを開く (JSON) (Preferences: Open Keyboard Shortcuts (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 には、ファイルを開いたり比較 (diff) したり、拡張機能をインストールしたりするための豊富なコマンドライン インターフェイスがあります。
  • 拡張機能 API - VS Code を拡張するその他の方法について説明します。
  • スニペット ガイド - VS Code で使用するためにスニペットをパッケージ化できます。

よくある質問

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

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

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

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

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

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

$MyVar = 2

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

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

Hide from IntelliSense button in Insert Snippet dropdown

スニペットの挿入 (Insert Snippet) コマンドを使用してスニペットを選択することは引き続き可能ですが、非表示にしたスニペットは IntelliSense に表示されなくなります。

5/28/2026
© . This site is unofficial and not affiliated with Microsoft.