Let's create our snippets on  VSCode
Tags: vscode, snippet, javascript, productivity
Published: 2021-09-05 10:30:14

Hello, my friend today I'm gonna show you how to create your snippet on VSCode to improve your productivity.
First of all, we need to understand what are "Code snippets"

Code snippets are templates that make it easier to enter repeating code patterns. Or generate a boilerplate template for you by typing a keyword
e.a if you typing `clg` and hit tab or enter to confirm using a snippet then it will generate `console.log()` immediately


####Why do we need to create our snippets?
Because of the snippets, we need sometimes they don't exist on Built-in Software or in the Marketplace. I decided to try to create, I found that it was easy to create. So I want to share this with you.

####How to create Snippets on VSCode

1. Open Command Pallet and type `Preferences: Configure User Snippets` ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P )

![Configure User Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vltk3ti1b6is9it8433e.png)

2. We can select which file we want to add our snippet to.  Today we gonna add to the javascript file.

![Select Snippet File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he4zcnezwzdfmhstlzb5.png)

Example of our javascript snippet

```
{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log to the console"
	}
}
```
I'll explain what happens shows above. This snippet will generate 'console.log()' as you can see they have a JSON format.

* the first line is the key of snippet
* a prefix is a snippet keyword to trigger
* the body is boilerplate we need, we can add a spacebar easily or write multiple lines.
* a description is a description of the snippet. It will describe which snippet we going to use e. a Log to the console will be shown on the right-hand side.

![Snippet Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlrecj17epyf2nemg7o4.png)

When the snippet was successfully called the editor cursor will place inside a round bracket it will reduce our effort to move the cursor by ourselves. This is called Tabstops one of Snippet Syntax.

####Snippet Syntax

* Tabstops: a Tabstops is moving the cursor inside generated snippet code. A Tabstops is using by type $ following by number 1, 2, 3, ... and so on the last number is 0. We can use the same number to edit multiple lines.
* Placeholder: a placeholder is a default value inside a generated snippet. A placeholder is using by typing ${} and a Tabstops number with  semicolon and placeholder value like this ${1:placeholderValue}

```
		"body": [
			"const $1: ${2:string} = $3",
			"$0"
		],
```
in the Tabstops two if we want 'string' we just skip this Tabstops by hit `Tab`. So this is the benefit of placeholder.

* Choice: a choice is an option when we use inside a generated snippet
```
		"body": [
			"const $1: ${2|string, number, boolean|} = $3",
			"$0"
		],
```

* Variables: variables are built-in values to use inside a generated snippet. It using by type $VARIABLES_NAME on a snippet body.
```
		"body": [
			"const $1: ${2|string, number, boolean|} = $RANDOM",
			"$0"
		],
```
Available variables on VSCode following this [link](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables)

###Summary

####Pros
* Reduce time to implement repetition code 
Good code style because code come from the same template snippet

####Cons
* Code snippet can be duplicate on multiple files such as Built-in, Marketplace, or our snippets.
It takes time for writing good snippets for you because you need to refactor a snippet to fit in your situation.

####Limitation
* Code snippets cannot use when we're in the snippet editing process

####Bonus
      These are some of the javascript snippets I'm using on my project.
```
First is generate an arrow function with a return value
"Create Arrow Function":{
	  "prefix":"cf",
	  "body":[
		 "const $1 = (($2) => {",
		 "",
		 "\t $0",
		 "\treturn",
		 "})"
	  ],
	  "description":"Create Arrow function"
	},
```
 The other snippet generates an arrow function without a return value
```
"Create Arrow Function without return": {
	  "prefix":"cfn",
	  "body":[
		 "const $1 = (($2) => {",
		 "",
		 "\t $0",
		 "})"
	  ],
	  "description":"Create Arrow function without return"
	},
```

This is my first writing blog in English. I want to apologize if make you guys confusing in this post with my gramma. I will improve my English skills. Please let me know your thoughts comments below, I'm glad to receive any suggestions. See you in the next post. : )