How to edit existing VS Code Snippets

Question

Is there a way to remove or edit some of the default code snippets in Visual Studio CODE ?

For example when i type req+TAB i need require not requestAnimationFrame

See https://stackoverflow.com/a/64688778/836330 for how to disable/ignore any snippet, built-in or from an extension. — Mark, Jul 31 '22 at 03:35

leerssej · Answer 1 · 2018-06-04T15:16:25.690

47

The extensions snippets can be found inside each snippet directory below:
(if there are snippets in the extension)

Mac/Linux: $HOME/.vscode/extensions/
Windows: %USERPROFILE%\.vscode\extensions/

Select the extension you want to modify and then dive into the javascript.json file in snippets/ directory in there, and change whatever you like.

Just remember that if/when you choose to download and update the extension someday, all your personal modifications will get overwritten/replaced out with the updated version of the file. (unless of course you squirrel away your changes outside of the extension's directory...)

Edit/Aside: Looking closely at all the copied editions already present in this directory, it appears that at least some of the extension updates keep the former version around. If this is the case, when you update an extension when a new version is released, you wouldn't need to worry about storing a copy of your modified file somewhere else; returning a file to active duty might just be as easy as a copy-paste from the old into the appropriate, newer, higher numbered directory.

Resources/citations/acknowledgements:
Thanks to here for helping initially pointing me towards the relevant directory.

edited Jun 04 '18 at 15:16

answered Jun 02 '18 at 16:46

leerssej

14,260
6
48
57

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/19909566) – Jithin Raj P R Jun 04 '18 at 06:42
Great advice, thanks! However, that link is only included as a citation/acknowledgement of resources consulted. All the relevant information is already in my response. Good concern though, and will add a subheading to help better communicate the reason the link is included. – leerssej Jun 04 '18 at 15:10
Since this answer gives tip how to edit existing code snippets in vs code it should be marked as a best one. – Bronek Jul 04 '18 at 12:29
4

This answer is about extension snippets, not the default snippets which the question was about. While this answer has useful information, it doesn't really have anything to do with the original question. – Mark Jul 04 '18 at 14:49
1

Exactly what I am searching for. – Lying_cat Sep 30 '18 at 06:50
Is there also a way to know "which" extension has added a certain snippet? – aderchox Aug 28 '21 at 09:15

score 40 · Accepted Answer · answered Oct 19 '16 at 10:55

The suggestion item requestAnimationFrame is coming from the JavaScript language service. It's not coming from the snippets.

However, you can define your own snippets and tell Visual Studio Code to show the snippets first. How to do it:

Go to File -> Preferences -> User Snippets and select JavaScript in order to edit snippets for that language

Add this entry to the opened file javascript.json and save it

"require": {
    "prefix": "req",
    "body": [
        "require"
    ],
    "description": "Add 'require'"
}

Add the following line to your preferred settings.json (user or workspace settings) and save it
```
"editor.snippetSuggestions": "top" 
```

Now you get your self defined require suggestion in first place as soon as you type req in a .js file.

What about code snippets from extensions? Can we modify them? — ThatBrianDude, Nov 02 '17 at 16:41
This method did not work for me when trying to override a snippet from an extension. If you make your snippet global, it will work though (but then you get "redundant" snippets). — dialex, Feb 16 '18 at 13:21

score 9 · Answer 3 · answered Oct 10 '18 at 19:36

9

On my Windows10 machine the log and other default javascript snippets can be found in :

C:\Users\$USER\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json

answered Oct 10 '18 at 19:36

Filip Van Genck

181
2
3

It worked for me! Thanks! :) – Renan Coelho Jun 13 '23 at 15:27

Brian Burns · Answer 4 · 2019-08-20T05:31:13.960

8

On my Windows installation the default/built-in JavaScript snippets are located in

C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json

I renamed that snippet to "logx" (requires admin privileges to modify the file) and restarted vsCode and now have just my user "log" snippet.

There are some threads about this on the issue tracker -

edited Aug 20 '19 at 05:31

answered Aug 02 '18 at 15:38

Brian Burns

20,575
8
83
77

2

On Mac its `/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/javascript/snippets/javascript.code-snippets` - you'll have to navigate to the `Visual Studio Code` app and right click to Show Package Contents. – abulka Aug 05 '20 at 05:27

jaquinocode · Answer 5 · 2021-03-10T04:21:25.243

6

Attention everyone!

This is now possible in the latest vscode. Solution here: https://github.com/microsoft/vscode/issues/10565#issuecomment-721832613

That solution tells you how to disable any snippet (including built-in or extension snippets). While this is technically not editing the snippet, disabling the snippet and then creating your own user snippet accomplishes the same exact goal. Yay!

edited Mar 10 '21 at 04:21

answered Mar 10 '21 at 04:16

jaquinocode

634
7
12

1

This is exactly what I was looking for: a way to disable a specific snippet from an extension, and to do that without having to modify the extension. Selecting `Insert Snippet`, typing in the snippet name, then clicking the eye-icon to "Hide from Intellisense" worked. Thanks! – chimbo Oct 13 '21 at 19:19

score 1 · Answer 6 · answered Jul 11 '19 at 12:59

1

I found mine at ~/.config/Code/User/snippets

If you want to create a global snippet, create a file named snippet_name.code-snippets

If you want a language specific snippet, create it like php.json

answered Jul 11 '19 at 12:59

Samuel Aiala Ferreira

654
6
11

score 0 · Answer 7 · answered Apr 09 '22 at 17:41

Hiding default VSCode snippets is easy:

you can hide specific snippets from showing in IntelliSense (completion list) by selecting the Hide from IntelliSense button to the right of snippet items in the Insert Snippet command dropdown.

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_can-i-remove-snippets-from-intellisense

How to edit existing VS Code Snippets

7 Answers7

Linked