The 2 minute guide for creating code snippets in VS Code

Boost your coding productivity

Photo by Isaac Smith on Unsplash

Code snippets are an amazing tools to enhance your coding speed. There are extensions you can download for the different languages and frameworks that provide you with great variety of them, but sometimes you can’t find what you are looking for. Not to worry many code editor let’s you create your own code snippets.

An example of creating a React component with 3 clicks

In this example we are going to take a look at the code editor I use: Visual Studio Code.

To create a snippet do the following steps:

• Press in Ctrl+Shift+p (Command+Shift+p on macOS) in your VS Code
• Start typing in snippet
• Select Preferences: Configure User Snippets
• Click on Create a new global snippets file … (here you can select previous files if you already have one, or you can create local project specific snippets)
• Add a name for the file and save:

VS Code snippets follow the same structure:

• The prefix is what you type in the editor to call the snippet.
• Body is an array of strings. Every element represents a single line from your code. You can use the syntax: ${1:Example} which will be highlighted for you when you call the snippet.
• Description is what is going to be visible in the editor when you start typing out your snippet.

Save the file and the end result should look like this:

A standard arrow function snippet

There is a site called snippet-generator (kudos to Pawel Gryzbek) which quickly transform your everyday code to the above mentioned format, which only leaves you to create the prefix and the description.

source: snippet-generator