🚀 VS Code で しよう!

Visual Studio Code のスニペット

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

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

スニペットの構文は、TextMate スニペット構文 に準拠していますが、'interpolated shell code' と \u の使用は例外で、どちらもサポートされていません。

ajax snippet

組み込みスニペット

VS Code には、JavaScript、TypeScript、Markdown、PHP など、多くの言語用の組み込みスニペットが用意されています。

builtin javascript snippet

言語で使用できるスニペットを確認するには、[コマンドパレット] で [スニペットの挿入] コマンドを実行して、現在のファイルの言語のスニペットの一覧を取得します。ただし、この一覧には、ユーザーが定義したスニペットや、インストールした拡張機能によって提供されるスニペットも含まれていることに注意してください。

Marketplace からのスニペットのインストール

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

Searching for extensions with snippets

使用したい拡張機能が見つかったら、インストールして VS Code を再起動すると、新しいスニペットが使用できるようになります。

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

拡張機能なしで独自のスニペットを簡単に定義できます。独自のスニペットを作成または編集するには、[ファイル] > [設定] の [スニペットの構成] を選択し、スニペットを表示する言語 ( 言語識別子 別) を選択するか、すべての言語で表示する場合は [新しいグローバルスニペットファイル] オプションを選択します。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 から始まる昇順です。ゼロは常に最後にくるオプションの特殊ケースで、指定された位置にカーソルを置いてスニペットモードを終了します。

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

スニペットがファイルのコンテンツを埋めるまたは置き換えることを目的としている場合は、スニペットの定義に isFileTemplate 属性を追加できます。ファイルテンプレートスニペットは、新規または既存のファイルで [スニペット: スニペットからファイルを生成] コマンドを実行すると、ドロップダウンに表示されます。

スニペットのスコープ

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

  1. スニペットがスコープされる言語 (すべての場合もあり)
  2. スニペットがスコープされるプロジェクト (おそらくすべて)

言語スニペットスコープ

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

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

単一言語のユーザー定義スニペットは、特定の言語のスニペットファイル (例: javascript.json) で定義されており、[スニペット: スニペットの構成] を介して言語識別子でアクセスできます。スニペットは、定義されている言語を編集するときにのみアクセスできます。

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

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

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

プロジェクトにスコープ設定されたグローバルスニペットファイル (ファイルサフィックス .code-snippets の JSON) を持つこともできます。プロジェクトフォルダーのスニペットは、[スニペット: スニペットの構成] ドロップダウンメニューの [ の新しいスニペットファイル...] オプションを使用して作成され、プロジェクトのルートにある .vscode フォルダーに配置されます。プロジェクトスニペットファイルは、プロジェクトで作業するすべてのユーザーとスニペットを共有する場合に役立ちます。プロジェクトフォルダーのスニペットはグローバルスニペットに似ており、scope プロパティを介して特定の言語にスコープを設定できます。

スニペットの構文

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

タブストップ

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

プレースホルダー

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

選択

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

変数

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

次の変数を使用できます。

  • TM_SELECTED_TEXT 現在選択されているテキストまたは空の文字列
  • TM_CURRENT_LINE 現在の行の内容
  • TM_CURRENT_WORD カーソル下の単語の内容または空の文字列
  • TM_LINE_INDEX ゼロインデックスベースの行番号
  • TM_LINE_NUMBER 1 インデックスベースの行番号
  • TM_FILENAME 現在のドキュメントのファイル名
  • TM_FILENAME_BASE 拡張子なしの現在のドキュメントのファイル名
  • TM_DIRECTORY 現在のドキュメントのディレクトリ
  • TM_FILEPATH 現在のドキュメントのフルファイルパス
  • RELATIVE_FILEPATH 現在のドキュメントの相対ファイルパス (開いているワークスペースまたはフォルダーに対する)
  • CLIPBOARD クリップボードの内容
  • WORKSPACE_NAME 開いているワークスペースまたはフォルダーの名前
  • WORKSPACE_FOLDER 開いているワークスペースまたはフォルダーのパス
  • CURSOR_INDEX ゼロインデックスベースのカーソル番号
  • 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 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

プレースホルダー変換

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

変換の例

例は、スニペット本文内に表示されるように二重引用符で囲んで表示されており、特定の文字を二重エスケープする必要があることを示しています。ファイル名 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"
  }
}

キーボードショートカットは [スニペットの挿入] コマンドを呼び出しますが、スニペットを選択するように求める代わりに、指定されたスニペットを挿入します。カスタム キーバインド は、通常どおり、キーボードショートカット、コマンド 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 で使用するスニペットをパッケージ化できます。

よくある質問

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

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

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

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

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

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

$MyVar = 2

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

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

Hide from IntelliSense button in Insert Snippet dropdown

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

04/03/2025