Save custom snippets in Visual Studio Code

Visual Studio Code is one of the best programs currently, since it is free, open source, extensions, cross-platform, has Git and integrated terminal 🙂

On the other hand, as we see in this article, note that you can create your own custom code snippets and call them with a keyboard shortcut (prefix) + tab.

You can make these code snippets available globally, but also specifically for a programming language such as JavaScript.


Create custom snippets in VSCODE

Open vscode custom snippet settings

  • You open the VSCODE command line: ctrl + shift + P
  • After the symbol > you write: Preferences: Configure Users Snippets and that corresponds to the snippet configuration.
  • The next thing is to choose the global option or a specific programming language like JavaScript according to the example image.

example

First is the name, and within this 3 elements:

  • Prefix: the prefix or keyboard shortcut with which to call the snippet
  • Body: properly the code to save
  • Description: a helpful description for when you have many

In my case I have 2 snippets that show the console.log() and another one for a long commentary in JavaScript /* */

snippets

Important: so that you can directly write the prefix and with the tab the prepared code is already inserted, check that you have the option: "editor.tabCompletion" active in the vscode options.

Create snippets faster

With snippet-creator

With this extension you simply write in your file the code that you want to convert into code that is always accessible with a shortcut, and then on the command line you search for "Create snippet" after which it will ask you for the data to create it: language, name, prefix and description and only with this you have it inside the configuration json file.

Blog

copyright©2021
PAPRI all rights reserved