Custom Code Snippets in VSCode

Today I learned how to "create" my own code snippet in Visual Studio Code.

Code snippets are templates that make it easier to enter repeating code patterns.

You might ask why should I learn how to create code snippets when there are like thousands of code snippet extensions in the marketplace. Because you can! (or you don't want to lose time searching for the exact snippet you're looking for)

Let's try to replicate few snippets from this popular React extension to understand how this works.

In VSCode go to Preferences > User Snippets to get start. From here on you can choose New Global Snippets File or restrict it to few languages of your choice. I like to configure them separately.

You'll see something like this if you haven't touched that file before.

{
    // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. 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": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

Things you should know.

Anything that starts with $ and a number is a tabstop. Meaning your cursor will jump to that location (col) in line.

Note: Double (or more) tabstops like this $1, $1 will give you multi line cursor.

$0 is the final cursor location for snippet. This is not necessary and most of the time you don't need this but it's still good to know.

Placeholders are tabstops with values, like console.log(${1:data});. The placeholder text will be inserted and selected such that it can be easily changed.

This is where double tabstops might get handy. Like import ${1:something} from ${1:somewhere}.

If you want to create a choice you can do it so by typing ${1|one,two,three|}. In some cases this might be useful.

Our first snippet will be imr. This is pretty basic we don't even need tabstops.

"import React": {
    "prefix": "imr",
    "body": "import React from 'react';",
}

The snippet above is pretty self explanatory. But what if we want to create multi line snippet? We need to use "arrays"

"React Arrow Function": {
    "prefix": "raf",
    "body": [
      "import React from 'react'",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "return (",
      "<div>",
      "$0",
      "</div>",
      ")",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}",
      ""
    ]
}

TM_FILENAME_BASE is the filename of the current document without its extensions. Meaning if you are in App.js file it will insert export default App.

This gets the job done but it looks like we have some indentation problem and let's be honest it looks ugly. \t inserts a tab and it is better than tapping spacebar n times. We also need to add some semicolons.

"React Arrow Function": {
    "prefix": "raf",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}};",
      ""
    ]
}

You can find more about this in the Visual Studio Code User Guide for snippets.

There is also this cool tool I've found which makes it even easier to create custom snippets. Snippet Generator