スニペットをVisual Studio Codeに追加する

Add Snippets from the Gallery

VS Code Marketplaceの多くの拡張機能には、スニペットが含まれています。あなたが、使いたいものを見つけたら、 単純に、それをインストールし、VS Codeを再起動すると、新しいスニペットは、利用できるでしょう。（拡張機能のインストールについての詳細は、ここを参照してください）。

以下は、言語サポートの中に、スニペットが含まれてる人気のある拡張機能です。：

ヒント：

上記の拡張機能は、動的に問い合わせられます。どの拡張機能が、あなたに最も良いか決定するために説明とレビューを読み、 そして、上記の拡張機能のタイルをクリックします。詳細については、Marketplaceを参照してください。

Creating your Own Snippets

あなたは、特定の言語のために、あなた独自のスニペットを定義することができます。 編集のために、スニペット・ファイルを開き、ユーザー・スニペットの下のファイル＞設定（Macでは、コード＞設定）を開きます。 そして、スニペットが、表示される言語を選択します。

スニペットは、JSONフォーマットで定義され、ユーザーごとに(languageId).jsonファイルに格納されます。 例えば、Markdownスニペットは、markdown.jsonファイルに入ります。

下記の例は、JavaScriptのためのループのためのスニペットです。

    "For Loop": {
        "prefix": "for",
        "body": [
            "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
            "\tvar ${element} = ${array}[${index}];",
            "\t$0",
            "}"
        ],
        "description": "For Loop"
    },

上記の例では：

• For Loopは、スニペット名です
• "prefix"は、このスニペットが、どのように、インテリセンスから選択、そして、この場合、タブの補完をするかを定義します。
• "body"は、内容です。そして、各々の要素の単一の文字列や配文字列の列のどちらかが、分離した行として挿入されます。
• "description"は、IntelliSenseドロップ・ダウンで使用される説明です

上の例は、${1:index}、${2:array}と${3:element}の3つのプレースホールダーを持っています。 あなたは、それらの数の順番で、それらを素早く横断することができます。数の後の文字列そして、コロンは、デフォルトとして記入されます。

一旦、あなたが、新しいスニペットを追加すると、あなたは、再起動する必要なく、すぐにそれを試すことができます。

参考：Visual Studio Codeで、ユーザー定義スニペットを定義する

Snippet Syntax

スニペットのボディは、特別な構造を使用して、カーソルを制御し、テキストを挿入することができます。以下は、サポートされた機能とそれらの構文です：

タブ・ストップ

プレースホールダー

変数

文法

any         ::= tabstop | placeholder | variable | text
tabstop     ::= '$' int | '${' int '}'
placeholder ::= '${' int ':' any '}'
variable    ::= '$' var | '${' var }' | '${' var ':' any '}'
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*

Using TextMate Snippets

また、あなたは、yoコード(原文リンク)拡張ジェネレーターを使用して、TextMateスニペット（.tmSnippets）を、 あなたのVS Codeインストールに追加できます。ジェネレーターは、オプションで、新しいコード・スニペットを持っています。 それは、あなたが、複数の.tmSnippetsファイルが含む、フォルダを示すことができます。 そして、それらは、VS Codeスニペット拡張に、パッケージ化されるでしょう。 また、ジェネレーターは、Sublimeスニペット（.sublime-スニペット）をサポートしています。

最終的なジェネレーターの出力は、2つのファイルを備えています： 拡張機能マニフェストpackage.jsonは、VS CodeとVS Codeスニペット・フォーマットに変換されるスニペットが含まれている snippets.jsonファイルを統合するために、メタデータを持っています。

├── snippets                    // VS Code integration
│   └── snippets.json           // The JSON file w/ the snippets
└── package.json                // extension's manifest

作成されたスニペット・フォルダを、あなたの.vscode/extensionsフォルダ(原文リンク)と再起動VS Codeの下の新しいフォルダにコピーします。

Sharing Your Snippets in the Gallery

一旦、あなたが、スニペットを作成し、そして、それらを検証する場合、あなたは、コミュニティと一緒に、それらを共有することができます

これを実行するには、あなたは、スニペット拡張を作成する必要があります。 あなたが、yoコード拡張ジェネレーターを使用した場合、あなたのスニペット拡張は、公開する準備ができています。

あなたが、ユーザー・スニペットを共有することを望む場合、 あなたは、拡張機能マニフェストと一緒に、スニペットjsonファイルをパッケージ化する必要があります。 それは、VS Codeに、スニペットを統合するために、必要なメタデータを持っています。

あなたのプラットフォームに依存して、あなたのユーザー・スニペット・ファイルは、ここに、配置されます。：

• Windows %APPDATA%\Code\User\snippets\(language).json
• Mac $HOME/Library/Application Support/Code/User/snippets/(language).json
• Linux $HOME/.config/Code/User/snippets/(language).json

(language).jsonがスニペット（例えばMarkdownスニペットのためのmarkdown.json）の対象とする言語に依存する場所。 あなたの拡張のために新しいフォルダを作成し、あなたのスニペット・ファイルをスニペット・サブディレクトリへコピーします。

ここで、機能拡張フォルダに、拡張機能マニフェストpackage.jsonファイルを追加します。 スニペット拡張機能マニフェストは、拡張機能マニフェスト(原文リンク)の参照で定義された構造に準拠して、スニペットの貢献(原文リンク)を提供します。

下記は、Markdownスニペットのための、マニフェストの例です。：

{
    "name": "DM-Markdown",
    "publisher": "mscott",
    "description": "Dunder Mifflin Markdown snippets",
    "version": "0.1.0",
    "engines": { "vscode": "0.10.x" },
    "categories": ["Snippets"], 
    "contributes": {
        "snippets": [
            {
                "language": "markdown",
                "path": "./snippets/markdown.json"
            }
        ]
    }
}

そのスニペットが、言語識別子で関連付けるために、必要であることに注意します。 これは、VS Codeで直接サポートされる言語(原文リンク)、あるいは、拡張によって提供される言語です。言語識別子が正しいことを確認します。

あなたは、続いて、スニペット拡張を、VS Code Extension Marketplace(原文リンク)に公開するために、 vsce公開ツール(原文リンク)を使用します。

ヒント：

簡単に、ユーザーが、あなたのスニペットを見つけるために、拡張の説明に"snippet"という単語を含ます。 そして、あなたのpackage.jsonに、SnippetsのCategoryを設定します。

また、私たちは、VS Code Marketplaceで、どのように、あなたの拡張の外観を素敵に作成するか、 推奨しています。Marketplace・プレゼンテーション・ヒント(原文リンク)を参照してください。

Next Steps

スニペットは、VS Codeを拡張するひとつの方法です。あなたが、VS Code拡張について、さらに学びたいと思う場合、これらの項目に挑戦してください：

• 色付け機能と括弧一致機能(原文リンク)－TextMate色付け機能をインポートする方法を学びます
• ユーザー定義したテーマ(原文リンク)－既存のTextMateテーマをインポートする方法を学びます。
• Visual Studio Codeを拡張する(原文リンク)－VS Codeを拡張するための、他の方法について学びます
• 進化した編集(原文リンク)－VSコードエディタの機能の詳細については、こちらをご覧ください

Common Questions

Q:私は、スニペット拡張を作成しました。しかし、それらが、VS Codeエディタ内に、表示されていません？

A:あなたが、スニペットの言語識別子を正しく指定していることを確認してください。 （例えば、Markdown .mdファイルのためのマークダウン、プレーン・テキスト.txt fileのためのプレーン・テキスト）。 また、スニペットのJSONファイルへの相対パスが、正しいことを確認します。