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 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

• TabstopsIn 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.

• PlaceholdersIt 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}}.

• ChoicesWe 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.
• VariablesUsing $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.

• TransformationsAllow 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"
 }
}

<!-- /wp:column -->

EXTENDS - let’s practise more

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

The main goal of our app is displaying 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 on creating a new table and copy&paste code from previous tables and renaming variables we will spend only a few minutes to create a new table and test 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! They very speed up your work and make coding easier. Try to play with them, it is worth it! :D

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