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 stackoverflow.com/a/64688778/836330 for how to disable/ignore any snippet, built-in or from an extension. — Mark
– Mark, Commented Jul 31, 2022 at 3:35
In my case the C/C++ extension was showing me snippets that I could disable by going to the extension settings and searching for snippets. — Shub
– Shub, Commented Dec 16, 2023 at 16:03

leerssej · Accepted Answer · 2018-06-04 15:16:25Z

51

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 4, 2018 at 15:16

answered Jun 2, 2018 at 16:46

leerssej

15.1k7 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jithin Raj P R Over a year ago

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

leerssej Over a year ago

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.

Bronek Over a year ago

Since this answer gives tip how to edit existing code snippets in vs code it should be marked as a best one.

Mark Over a year ago

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.

aderchox Over a year ago

Is there also a way to know "which" extension has added a certain snippet?

hoppla1232 Jul 8 at 18:50

This answer helped me for that: stackoverflow.com/a/77406089/7330217

|

Wosi · Accepted Answer · 2016-10-19 10:55:19Z

43

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.

answered Oct 19, 2016 at 10:55

Wosi

46.2k17 gold badges81 silver badges88 bronze badges

2 Comments

ThatBrianDude Over a year ago

What about code snippets from extensions? Can we modify them?

dialex Over a year ago

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).

wjandrea · Accepted Answer · 2023-12-29 01:19:20Z

12

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 Dec 29, 2023 at 1:19

wjandrea

34k10 gold badges69 silver badges105 bronze badges

answered Mar 10, 2021 at 4:16

jaquinocode

1,11211 silver badges15 bronze badges

1 Comment

chimbo Over a year ago

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!

Brian Burns · Accepted Answer · 2019-08-20 05:31:13Z

10

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, 2019 at 5:31

answered Aug 2, 2018 at 15:38

Brian Burns

22.4k10 gold badges93 silver badges80 bronze badges

1 Comment

abulka Over a year ago

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.

Filip Van Genck · Accepted Answer · 2018-10-10 19:36:27Z

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, 2018 at 19:36

Filip Van Genck

3213 silver badges3 bronze badges

Comments

Samuel Aiala Ferreira · Accepted Answer · 2019-07-11 12:59:47Z

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, 2019 at 12:59

Samuel Aiala Ferreira

7146 silver badges12 bronze badges

Comments

magicrebirth · Accepted Answer · 2022-04-09 17:41:41Z

1

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

answered Apr 9, 2022 at 17:41

magicrebirth

4,2642 gold badges28 silver badges22 bronze badges

Comments

zjffun · Accepted Answer · 2024-05-12 09:38:29Z

1

You can install the Snippets Manager extension. Then you can search snippets and edit them quickly.

Press F1 then type snippets search:

type what you want to search, like test

edit it in editor

answered May 12, 2024 at 9:38

zjffun

1,2419 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to edit existing VS Code Snippets

8 Answers 8

7 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related