VSCodeにカスタムコードスニペットを追加するにはどうすればよいですか？

106

Visual Studio Codeにカスタムコードスニペットを追加することは可能ですか？もしそうなら、どのように？VSCodeはAtomに基づいているため、可能であるはずです。

code-snippets  visual-studio-code 
— BeastCode
ソース
2
あなたはまた、環境設定>ユーザースニペットに行き、その後、あなたがスニペットを作成したい言語を選択することができます。
— Amituuush
両方とも内部でElectronを使用しているという事実以外に、AtomとしてのVS Codeの間には本当に関係がありますか？
— skelliam
これを行うには、codessnippetサービスを使用します。サーバーからプルするだけで、カスタムスニペットを作成し、すべてのスニペットを一度にコードスニペットCLIで編集および同期できます。
— user134288 2620
説明にウェブページのリンクを追加したいのですが、その方法を知っている人はいますか？
— januw

回答:

121
  1. > shift+ command+pを押して、スニペットを入力します
  2. [設定]を選択します：ユーザースニペットを開きます
  3. カスタムスニペットを追加する言語タイプを選択します
  4. vscodeには、：> vsdocで説明されているように、スニペットを追加する方法を説明するコメントがあります。

たとえば、GO言語のカスタムスニペットを開きたいとします。次に、次のことができます。

  1. ヒット> command+p
  2. タイプ：go.json +enterそしてカスタムスニペットページに移動します

スニペットはJSON形式で定義され、ユーザーごとの（languageId）.jsonファイルに保存されます。たとえば、Markdownスニペットはmarkdown.jsonファイルに入れられます。

新しいツールの更新：
スニペットジェネレータサイト：https：//snippet-generator.app/

— チャンダンナヤク
ソース
4
スニペットジェネレータは非常に便利です
— rainversion_3
72

オプション-1：スニペットクリエーターと呼ばれるVsCodeプラグインがあります。

それをインストールした後、あなたがしなければならないのはすることだけです：

  1. スニペットにするコードを選択します。
  2. それを右クリックして、「コマンドパレット」（またはCtrl+ Shift+ P）を選択します。
  3. 「スニペットの作成」と書きます。
  4. スニペットショートカットをトリガーするために監視する必要のあるファイルの種類を選択します。
  5. スニペットショートカットを選択します。
  6. スニペット名を選択します。

オプション-2このウェブサイトを確認してください。vsコード、崇高なテキスト、アトムのスニペットを生成できます。

このサイトでスニペットが生成されたら。それぞれのIDEのスニペットファイルに移動し、同じものを貼り付けます。たとえば、VSコードのJSスニペットの場合は、[ファイル]-> [設定]-> [ユーザースニペット]に移動し、javascript.jsonファイルを開いて、上記のサイトのスニペットコードをこの中に貼り付けます。

— プラネイクマール
ソース
8
これはとても素晴らしいツールです！各行を引用してエスケープする必要があるカスタムhtmlボイラープレートスニペットを書き出すのに腹を立てることができなかったので、これは本当に私が探していた答えです。
— nabrown
3
真剣に、ここで命の恩人。
— JeremyW
うわー、これは完璧に機能する素晴らしいツールです。正解マークする必要があります
— StefanBob
スニペットジェネレータのリンクが壊れています。：このリンクに従ってくださいsnippet-generator.app
— Sandipスベディ
1
なぜstep1とstep2を書いたのですか？これはoption1とoption2のように感じますか、それとも関連していますか？
— Xsmael
26

とおりバージョン0.10.6カスタムスニペットを追加することができます。独自のスニペットの作成に関するドキュメントをお読みください。jsonファイルをに配置することでカスタムスニペットを検索/作成できますC:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets。たとえば、カスタムjavascriptスニペットは\snippets\javascript.json

スニペットを公開することもできますが、これも非常に優れた機能です。John Papaは、マーケットプレイスの拡張機能としてダウンロードできる、優れた角度+タイプスクリプトスニペットを作成しました。

これは、javascriptforループのドキュメント用に取られたスニペットの例です。

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

どこ

  • For Loop スニペット名です
  • prefixIntelliSenseドロップダウンで使用されるプレフィックスを定義します。この場合は。
  • bodyスニペットのコンテンツです。可能な変数は次のとおりです。
    • タブストップは$ 1、$ 2
    • 変数の場合は$ {id}と$ {id：label}と$ {1：label}
    • 同じIDの変数が接続されます。
  • description IntelliSenseドロップダウンで使用される説明です
— プランサー
ソース
7
彼らは本当にある種の複数行の文字列リテラル構文または本文を別のファイルにプルする方法を必要としています。すべての行を引用してエスケープするのはクレイジーです。
— マークウィルバー
この回答に対する反対票で申し訳ありませんが、それは不正なクリックでした🙄–
— Giles Butler
16

このビデオをチェックして、簡単な短いチュートリアルをご覧ください。

https://youtu.be/g1ouTcFxQSU

[ファイル]-> [設定]-> [ユーザースニペット]に移動します。ご希望の言語を選択してください。
次に、次のコードを入力して、forループスニペットを作成します。

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

これで完了です。
エディタに「for」と入力し、最初の予測を使用します。

ショートカット-

  1. Snippet-creator拡張機能をインストールします。
  2. スニペットを作成するために必要なコードを強調表示します。
  3. ctrl+ shift+Pを押し、コマンドパレットで「スニペットの作成」と入力してEnterキーを押します。
  4. スニペットを作成する言語（例：-CPP）を選択し、
    スニペット名を入力し、スニペットショートカットを入力してから、スニペットの説明を入力します。
    これで準備完了です。
    手順4で入力したエディターにスニペットのショートカットを入力し、
    最初に来る予測を選択します（予測が表示されない場合は、Ctrl +スペースを押します）。

お役に立てれば ：）

注：[ファイル]-> [設定]-> [ユーザースニペット]に移動します。次に
、スニペットを作成した言語を選択します。そこにスニペットがあります。

— vinod
ソース
9

：スニペットクリエーターと呼ばれるVsCodeプラグインがあります。

それをインストールした後、あなたがしなければならないのはすることだけです：

  1. スニペットにするコードを選択します。
  2. それを右クリックして、「コマンドパレット」（またはCtrl+ Shift+ P）を選択します。
  3. 「スニペットの作成」と書きます。
  4. スニペットショートカットをトリガーするために監視する必要のあるファイルの種類を選択します。
  5. スニペットショートカットを選択します。
  6. スニペット名を選択します。

それで全部です ..

注：スニペットを編集する場合は、[fileType] .jsonにあります
例：Ctrl+ P、次に「javascript.json」を選択します

— ピーターシェーカー
ソース
6

カスタムスクリプトを追加するには、に移動しFile --> Preferences --> User Snippetsます。ご希望の言語を選択してください。

Javascriptを選択すると、次のconsole.log(' ');ようなデフォルトのカスタムスクリプトが表示されます。

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
— マダンクマール
ソース
5

javascriptreact.jsonにスニペットを追加してみましたが、うまくいきませんでした。

スニペットをグローバルスコープに追加してみましたが、それは魅力のように機能しています。 

FILE --> Preferences --> User snippets

ここで選択しNew Global Snippets File、名前をjavasにしcriptreact.code-snippetsます。

他の言語の場合は、[your_longuage] .code-snippetsのように名前を付けることができます

ここに画像の説明を入力してください

— Lakkanna walikar
ソース
4

これは現時点では文書化されていない機能ですが、間もなく登場します。追加できるフォルダがあり、表示されますが、変更される可能性があります（理由により文書化されていません）。

これをuservoiceサイトに追加し、最後まで待つことをお勧めします。しかし、それは来ています。

— ジョン・パパ
ソース
0

JSONでスニペットを作成したくない場合は、Snipsterを確認してください。コード自体を作成するのと同じようにスニペットを作成できます。各行を引用符で囲んだり、文字をエスケープしたり、メタ情報を追加したりする必要はありません。

また、一度書けばどこにでも公開できます。そのため、VS Code、Atom、Sublimeでスニペットを使用できるほか、将来的にはさらに多くのエディターを使用できます。詳細はこちら。

— ジャンストラ
ソース
0

これは本当の答えではないかもしれませんが（上記の回答があるように）、他の人のためにカスタムコードスニペットを作成することに興味がある場合は、yeomanとnpm（デフォルトではNodeJSに付属）を使用して拡張機能を作成できます。注：これは、他のシステムのスニペットを作成するためだけのものです。しかし、それはあなたにも役立ちます！全体にJSコードが必要な場合を除きます。

— airax86
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.