Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to edit existing VS Code Snippets

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

like image 510
Nikola Hristov Avatar asked Oct 18 '16 14:10

Nikola Hristov


People also ask

How do I edit a snippet?

To edit an existing Snippet, click on the Pencil in the top right corner of any Snippet. A new window will pop up, where you can replace the default text or settings with something new. To save your changes, click Update. To delete a Snippet, click the Trash Can in the top right corner of that Snippet.

Where are VS Code snippets stored?

If you want to track down the source file yourself, the built-in snippets live inside each individual language extension directory. The file is located at «app root»\resources\app\extensions\«language»\snippets\«language». code-snippets on Windows. The location is similar for Mac and Linux.

How do I enable editing in VS Code?

You can edit via the Settings editor Workspace tab or open that tab directly with the Preferences: Open Workspace Settings command. All features of the Settings editor such as settings groups, search, and filtering behave the same for Workspace settings.

How do you edit multiple similar lines in VS Code?

Select the lines you want and then press: Windows: Shift + Alt + i. Mac: shift + option + i.


2 Answers

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:

  1. Go to File -> Preferences -> User Snippets and select JavaScript in order to edit snippets for that language
  2. Add this entry to the opened file javascript.json and save it

    "require": {     "prefix": "req",     "body": [         "require"     ],     "description": "Add 'require'" } 
  3. 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.

like image 95
Wosi Avatar answered Oct 12 '22 13:10

Wosi


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.

like image 45
leerssej Avatar answered Oct 12 '22 13:10

leerssej