How to Create Snippets on VSCode

One thing that all Software Engineers and Software Developers really love to have are shortcuts. VSCode has a way where we can basically create these “shortcuts”, also known as snippets to make our coding faster and accurate…

Unlike the guy above…

Well, before getting there we have to understand what snippets are and why we want snippets.

What and Why?

Code snippets are templates that it easier to enter repeating code patterns, such as loops or conditional-statements, as said within VSCode Docs.

Let’s Create A New Snippet

Let’s Follow these steps in order to construct a new custom, global snippet in VSCode:

1. Press ⌘ + Shift + P to open the command palette.
2. Find: “Preferences: Configure User Snippets”.
3. Click “New Global snippets file”,
4. Type in a new snippet name and click Enter

(In our case we will be creating a new snippet for react imports)

You Should be getting something like this:

{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
//  "scope": "javascript,typescript",
//  "prefix": "log",
//  "body": [
//      "console.log('$1');",
//      "$2"
//  ],
//  "description": "Log output to console"
// }
}

Where we will be focusing on and uncomment out is the example:

 "Print to console": {
  "scope": "javascript,typescript",
  "prefix": "log",
  "body": [
      "console.log('$1');",
      "$2"
  ],
  "description": "Log output to console"
 }

Scope

The scope is what language we will only be using this command. So if the file is index.js , then by typing in “log” you will be able to access it. But, if the file is index.html , then you would not be able to access this snippet. If you leave the prefix as an empty string, you are letting the snippet to be accessed for ALL file types.

Prefix

This is what we will type on our files, in order to access the snippet. Within the example above, when we type “log” we will have access to this snippet. In my case, I will create a new snippet that will create my import statements for React and ReactDOM.

"Print to console": {
"scope": "",
"prefix": "importR",
"body": [
"console.log('$1');",
"$2"
],
"description": "Import React and ReactDOM Statements"
}

The Body

The body is what we will see when we click enter, when accessing our snippet. In the example above, when I type “importR”, what will my snippet be:

console.log('');

I do not want this to be that, I want import statements like these below:

import React from 'react';
import ReactDOM from 'react-dom';

So when creating the body in our snippet, as seen above if we have any quotes, make sure the inner quotes are singular, but the outer quotes have to be double quotes like this:

"body": [
"import React from 'react';"
"import ReactDOM from 'react-dom';"
],

Don’t forget to add commas AFTER each end of the double-quotes

"body": [
"import React from 'react';",
"import ReactDOM from 'react-dom';"
],

Description

The description is where you will add as a String, a brief summary of what is your snippet for, or what is it about. Knowing all these steps above, my final snippet becomes this:

"Print to console": {
"scope": "",
"prefix": "importR",
"body": [
"import React from 'react';",
"import ReactDOM from 'react-dom';"
],
"description": "Import React and ReactDOM Statements"
}

Make sure you save and Test it out on any file, since my scope is for ALL file types, because it is an empty string. When you have accomplished this, you should be feeling like this:

Instead of these guys: