My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Step up your productivity with VS code snippets

Step up your productivity with VS code snippets

Mayowa Ojo's photo
Mayowa Ojo
·Sep 15, 2019

Vs code is arguably the most popular IDE among web developers. It's a very powerful tool and can even get more powerful if you decide to explore some more.

Today, I'll be sharing a few tips on using snippets to boost your productivity. Snippets are basically small units of reusable code. They aren't exclusive to visual studio code and you can find them in every other text editor or IDE. You can even create snippets, also called aliases in your bash/zsh terminal. I'd be writing on that here.

If you find yourself repeating code patterns such as loops or conditionals, you can make them into snippets and you can access them using a prefix. VS code supports tab completion for snippets so this makes things easy. Let's consider an example.

To create a snippet, just open User snippets under file > preferences (code > preferences for macOS) and then select the language of choice and then edit the file that opens. You can also create global snippets that'll apply to all languages. Snippet files are written in JSON format so you should always use double quotes.

This is an example of a snippet which creates the template for a react class component which is a very common use case of repeating code as I find my self writing class components very often.

"class component": {
        "prefix": "class",
        "body": [
          "class ${1:name} extends Component {",
          "    render() {",
          "        return (",
          "          $2",
          "        )",
          "    }",
          "}",
          "",
          "export default ${1: name}"
        ],
        "description": "class component"
    }

In the code above, the name of the snippet is defined in the first line, which is "class components". The prefix is the trigger word which displays the snippet and it can also be multiple words defined in an array. The body is the code template itself, this is what is displayed when you type in the prefix and use tab completion. If your template is a single line, you can insert it in a string, however if your template spans over multiple lines you need to define it in an array with each line of code as a string. After the body is the description. This is a short note about what the snippet is and it will be displayed by intelliSense.

You'd notice the dollar sign and curly braces in the body of the snippet above. This is how you define tab stops and placeholders for your snippets. Tabstops basically let you move the cursor around in your snippet. The number attached to the dollar sign is the order(ascending) in which the tab locations will be visited (i.e $1 > $2 > $3). The number $0 however denotes the final cursor position. Placeholders on the other hand are tabstops with values. So you can basically leave a hint for what should be in a tabstop location. A place holder looks like this: ${1:text}. Placeholders can also be nested like so: ${1:text ${2:another}}. Note that you can have multiple tabstops with the same number and they'll be updated simultaneously.

You can now save the file and vs code automatically refreshes the snippet file so you don't need to restart. This is how you can quickly setup a code snippet. You might have noticed that creating the body of the snippet while having to align and indent each line properly can be a pain. There's a snippet generator you can quickly use to get around this. Try it out here. Just put in the values and it generates your snippet properly aligned and indented.

This is basically how you can create your own snippets. There's more to it and you can read up about more interesting features here. Thanks for reading and I'll see you in the next one.