How to add custom code snippets in VSCode?

问题

Is it possible to add custom code snippets in Visual Studio Code? And if so, how? VSCode is based on Atom, so it should be possible.

回答1:

1. Hit > shift + command + p and type snippets
2. Select Preferences: Open User Snippets
3. Choose the language type for which you want to add the custom snippet
4. vscode has comments to explain on how to add a snippet, as described on :> vsdoc

---

Lets say, we want to open custom snippets for the language GO. Then we can do:

1. Hit > command + p
2. Type: go.json + enter And you land on the custom snippet page

Snippets are defined in a JSON format and stored in a per user (languageId).json file. For example, Markdown snippets go in a markdown.json file.

---

Update new tools:
Snippet generator site: https://snippet-generator.app/

回答2:

step - 1 There's a VsCode Plugin called : snippet creator..

After installing it , all you have to do is to :

1. Select the code that you want to make it a snippet.
2. Right click on it and select "Command Palette"(or Ctrl+Shift+P).
3. Write "Create Snippet".
4. Choose type of files needed to be watched to trigger your snippet shortcut.
5. Choose a snippet shortcut.
6. Choose a snippet name.

step - 2 check this website. you can generate snippets for vs code, sublime text and atom.

Once snippet being generated in this site. Go to respective IDE's snippet file and paste the same. For example for a JS snippet in VS code go to File->preference->user snippet then it opens javascript.json file then paste the snippet code from above site inside this and we are good to go.

回答3:

As of version 0.10.6 you can add custom snippets. Read the documentation on Creating your Own Snippets. You can find/create custom snippets by placing the json file in C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. For example, a custom javascript snippets would be in a \snippets\javascript.json

You can also publish you snippets which is a really neat feature as well. John Papa created a nice angular + typescript snippet you can download as an extension in the marketplace.

Here is an example snippet taken for the documentation on a javascript for loop:

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

Where

• For Loop is the snippet name
• prefix defines a prefix used in the IntelliSense drop down. In this case for.
• body is the snippet content. Possible variables are:
  • $1, $2 for tab stops
  • ${id} and ${id:label} and ${1:label} for variables
  • Variables with the same id are connected.
• description is the description used in the IntelliSense drop down

回答4:

There's a VsCode Plugin called : snippet creator..

After installing it , all you have to do is to :

1. Select the code that you want to make it a snippet.
2. Right click on it and select "Command Palette"(or Ctrl+Shift+P).
3. Write "Create Snippet".
4. Choose type of files needed to be watched to trigger your snippet shortcut.
5. Choose a snippet shortcut.
6. Choose a snippet name.

That's All ..

Note : if you want to edit your snippets , you will find them in [fileType].json
Example : Ctrl+P , then select "javascript.json"

回答5:

You can check out this for a quick short tutorial

https://youtu.be/g1ouTcFxQSU

Go to File --> Preferences --> User Snippets. Select your preferred language.
Now type the following code to make a for loop snippet:

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

You are done.
Type "for" in the editor and use the first prediction.

SHORTCUT--

1. install Snippet-creator extension.
2. Highlight the code that you need to make snippet.
3. press ctrl+shift+P and type "Create snippet" on the command palette and press ENTER.
5. select language for which you want to create snippet(eg:-CPP), then type
snippet name, type snippet shortcut and then type snippet description.
You are now good to go.
Type the snippet shortcut in the editor that you entered in step 4, and select the
prediction (if no prediction comes press ctrl+space) that comes first.

Hope this helps :)

Note: goto File->Preferences->User Snippets. Then select the language in which you
created the snippet. You will find the snippet there.

回答6:

This is an undocumented feature as of now but is coming soon. There is a folder you can add them to and they will appear, but it may change (its undocumented for a reason).

Best advice is to add this to the uservoice site and wait til its final. But it is coming.

回答7:

You can add custom scripts, go to File --> Preferences --> User Snippets. Select your preferred language.

If you choose Javascript you can see default custom script for console.log(' '); like this:

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

回答8:

I tried by adding snippets in javascriptreact.json but it didn't worked for me.

I tried adding snippets into global scope, and it's working like charm.

FILE --> Preferences --> User snippets

here select New Global Snippets File, give name javascriptreact.code-snippets.

For other languages you can name like [your_longuage].code-snippets

回答9:

VSCode introduce this in version 0.5, see here. Snippet syntax follows the TextMate snippet syntax and can write in User Preferences.

回答10:

If you'd rather not deal with writing your snippets in JSON, check out Snipster. It lets you write snippets as you would write the code itself - not having to wrap each line in quotes, escape characters, add meta information, etc.

It also lets you write once, publish anywhere. So you can use your snippet in VS Code, Atom, and Sublime, plus more editors in the future. More info here.

来源：https://stackoverflow.com/questions/29995863/how-to-add-custom-code-snippets-in-vscode