web-dev-qa-db-ja.com

VSCodeにカスタムコードスニペットを追加する方法

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

code-snippetsvisual-studio-code
44
BeastCode
  1. ヒット> shift + command + p スニペットを入力します
  2. Preferences：Open User Snippetsを選択します
  3. カスタムスニペットを追加する言語タイプを選択します
  4. vscodeには、スニペットを追加する方法について説明するコメントがあります。説明は次のとおりです。> vsdoc


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

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

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

49
Chandan Nayak

これを確認してください website 。 vsコード、崇高なテキスト、アトムのスニペットを生成できます。

35
Pranay Kumar

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

スニペットを公開することもできますが、これも非常に便利な機能です。 John Papaは、ニースangular + TypeScriptスニペットを作成しました。これは marketplace で拡張機能としてダウンロードできます。

Javascript forループのドキュメント用に抜粋したスニペットの例を次に示します。

"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は、IntelliSenseドロップダウンで使用されるプレフィックスを定義します。この場合。
  • bodyはスニペットコンテンツです。可能な変数は次のとおりです。
    • タブストップ用に$ 1、$ 2
    • 変数の$ {id}および$ {id：label}および$ {1：label}
    • 同じIDを持つ変数が接続されます。
  • descriptionは、IntelliSenseドロップダウンで使用される説明です
15
Prancer

というVsCodeプラグインがあります： スニペット作成者 ..

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

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

それで全部です ..

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

6
Peter Shaker

これは現在文書化されていない機能ですが、近日中に提供される予定です。追加できるフォルダがあり、それらは表示されますが、変更される可能性があります（理由により文書化されていません）。

最善のアドバイスは、これをuservoiceサイトに追加して、最終決定まで待つことです。しかし、それは来ています。

4
John Papa

File-> Preferences-> User Snippetsに移動します。ご希望の言語を選択してください。
次のコードを入力して、forループスニペットを作成します。

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

できました。
エディターで「for」と入力し、最初の予測を使用します。

SHORTCUT-

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

お役に立てれば ：）

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

3
vinod

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

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

_"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
_
2
Madhankumar

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

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

FILE --> Preferences --> User snippets

ここでNew Global Snippets Fileを選択し、javascriptreact.code-snippetsという名前を付けます。

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

enter image description here

1
Lakkanna walikar

VSCodeはこれをバージョン0.5で導入しました こちらを参照 。スニペットの構文は TextMateスニペットの構文 に従い、ユーザー設定に書き込むことができます。

0
Abraão Alves

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

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

0
jhanstra