VS CODE Snippets – How To Code Faster and Easier?

How can you make your coding easier with VS Code Snippets?

INTRO – let’s get some theory

What are VS Code Snippets?

Snippets are kind of templates which contain repeated or commonly used parts of code for instance loops, if statements, basic component code etc.

Whether our code is really generic, we often need to repeat some parts of it like creating new components, reducers, actions creators…

And, to do not create those functionalities manually, we should use SNIPPETS that automatically generate commonly used code. 

We have a few types of snippets such as built in, plugged in (from VS Code extensions) and custom (created by ourselves).

Where can we find VS Code Snippets?

VS Code provides two ways of getting snippets. Snippets are available by clicking ctrl + space or we can type “Insert Snippet” in the command line (cmd+shift+p). After both actions we will be able to see the whole list of our snippets.

How the snippet look like?

Let’s analyze how a snippet looks like. First of all, it has a JSON structure. It has a few mandatory fields like “name”, “prefix” and “body”. We can also use some additional properties like “scope”, “description”.

{
 "name": {
   "scope": "typescriptreact",
   "prefix": "crcf",
   "body": []
   "description": ""
 }

“name” – the name of our snippet. It’s displayed if we do not provide a description field.

“scope” – defines snippet availability. In other words, in what types of files our snippet should be available. (If we do not provide this value, we can have access to it within all files. However, if we for instance provide a value such as “typescriptreact” we will be able to invoke our snippet only in files which have “.tsx” extension.

“prefix” – shortcut, lets us invoke snippet in file using shorter syntax.

“body” – repeated/common parts of code.

“description” – describes what our snippet does.

VS Code Snippet syntax

• Tabstops
  In our snippet’s body we are able to use tabstops – places where our cursor will be stopped to provide a value. We define tabstops by  $1, $2. We can use same indicators in many places in our code – they will be updating synchronously.

• Placeholders
  It is a tabstop with a default value ${1:defaultValue}. This value can be editable as well. We are able to inject one placeholder into another ${1:first ${2:second}}.

• Choices
  We can use placeholders with predefined values. We need to select during tabstop one of provided values like ${1|one,two,three|}. We are not able to provide there another value instead of those defined in select.
  
• Variables
  Using $name, you can insert the value of a variable. When a variable isn’t set, its default or the empty string is inserted. When a variable is unknown (that is, its name isn’t defined) the name of the variable is inserted, and it is transformed into a placeholder. The following variables can be used: TM_FILENAME, TM_FILENAME_BASE and so on. More available variables you can check here.

• Transformations
  Allow us to modify the value of a variable before it is inserted by using the regular expression ${TM_FILENAME_BASE/[\\.]/_/} – replace first . by _. ${TM_FILENAME_BASE/\\index/componentName/}} – replace file name index to placeholder componentName.

BASICS – let’s have some practise

How can we use VS Code snippets?

I’ve made a snippet which creates a functional component based on the file name. However, if the file will be calling for index, the programmer should pass the name of the component by himself.

{
 "createFunctionalComponent": {
   "scope": "typescriptreact",
   "prefix": "crfc",
   "body": [
     "import React from 'react';",
     "",
     "const ${1:${TM_FILENAME_BASE/\\index/componentName/}}: React.FC = () => {",
     "  return (",
     "    <div>",
     "      $0",
     "    </div>",
     "  );",
     "}",
     "",
     "export default ${1:${TM_FILENAME_BASE/\\index/componentName/}};"
   ],
   "description": "Create functional component based on file name with types"
 }
}

EXTENDS – let’s practise more

Let’s think about an application where we use React and Redux as state manager.

The main goal of our app is to display statistics, for instance, in tables. We need to handle every data in Redux – every time when we create a new table we should do reducer, actions, some const files, and so on. So every time we will duplicate the same code, but with different variable names.

How can we optimize that? Of course by creating snippets.

After that, instead of spending many hours creating a new table and copy&paste code from previous tables and renaming variables, we will spend only a few minutes creating a new table and testing our changes. 

You can easily create snippets by using https://snippet-generator.app/. Earlier I didn’t use snippets at all. I even didn’t know that I can create my own snippets. Since I used them, I have been a huge fan of them and React development process is much smoother! They very speed up your work and make coding easier. Try to play with them, it is worth it! 😀

We have also made another article on VS Code Tricks, and how to make your coding work much easier!