When it comes to delivering a project every company and developer wants to finish it as soon as possible. Working as a developer we always look for some tools or tricks to increase the development speed and boost productivity. Nobody loves to spend hours on writing every single line for a program or writing the same line of code at multiple places. Today in this blog we are going to discuss the snippets in Visual Studio Code which that can help you to increase the development speed. Let’s start with What is Code Snippets…
Code Snippets
Code snippets are templates that can be used to enter repeating code patterns like loops, conditional statements, and other frequently used code in your program.
Code Snippets in Visual Studio Code: In Visual Studio Code, snippets appear in IntelliSense with other suggestions as below:
Snippet from ES7 React/Redux/GraphQL/React-Native snippets Extension
Let’s discuss different code snippets in Visual Studio Code…
1. Snippets from the Extension
There are many extensions on the VS Code Extensions Marketplace which include snippets. If you find one which you like to use, install it and restart VS Code and the new snippet extension will be available. Some popular extensions that include snippets in their language support are:
You can Install these extensions and many other popular extensions that include snippets in their language support from the Extensions Marketplace tab in VS-Code.
After successful installation of the extension, click on the extension and scroll down to look at the available snippets as shown below
Type the prefix to get the intellisense and press enter to get the respective code snippets.
2. Custom Code Snippets
You can also create your own snippets without any extensions. To create or edit your own snippets, Go to User Snippets under File > Preferences, then select the language for which the snippets should appear or select the New Global Snippets file option if the snippets should appear for all languages. Snippet files are written in JSON, and we can define an unlimited number of snippets as we want.
To write your own custom snippets you must:
- Decide the snippet scope and select the corresponding file.
- Write your custom snippet using snippet syntax.
Decide The Snippet Scope and Select The Corresponding File
Snippets are scoped to suggest only relevant snippets and it can be scoped by either:
- Language Snippet Scope
- Project Snippet Scope
1. Language Snippet Scope
All the snippets are scoped to one, several, or all languages (ie.Global) based on whether it is defined in a language snippet file or a global snippets file. For a language scoped snippet, select the language from the list (file > preferences >user snippets), for a globally scoped snippet select New Global Snippets file.
2. Project Snippet Scope
You can have a global snippets file (JSON with file suffix .code-snippets) scoped to your project. For project scoped snippets go to file > preferences >user snippets select New Snippets file for (your repository name) option.
Type the name that you wish to give to your snippet file in the input field as shown below and hit enter.
A JSON file with the suffix .code-snippets will be created at the root of the project in a .vscode folder as shown below.
Write Your Custom Snippet Using Snippet Syntax
After selecting the snippet scope. Write your own custom snippet in the body of the snippet. The snippet body can use special constructs to control cursors and the text being inserted. Some supported features and their syntax are:
1. Tabstops
Tabstops can be used to make the editor cursor move inside a snippet. $1, $2 are used to specify the cursor locations. The number represents the order in which tabstops will be visited, The $0 denotes the final cursor position.
2. Placeholders
Placeholders are tabstops which has some default values, like ${1:SomeText}. The placeholder text will be inserted and selected so that it can be easily changed. Placeholders can also be nested, like ${1:SomeText ${2:SomeText}}.
3. Choice
Placeholders can also have choices as values. The syntax is a comma-separated values(choices), enclosed with the pipe-character, for example ${1|choiceOne,choiceTwo,choiceThree|}. When the snippet is inserted and the placeholder is selected then the choices will prompt the user to pick one of the values.
The following examples show the JavaScript code and the JSON snippet files for the respective code.
Example 1:
Javascript
console.log() |
// JSON code snippet file
{
"console log": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console log"
}
}
Explanation: The “console log” property in the above object is the name of the snippet and “cl” is the prefix. Every snippet has a name property that has value as an object which must contain a prefix, body, and a description. The $1 in the body denotes the first tab space.
Demo: The snippet code above leads to the behavior shown below.
Notice that as we type in “cl” a menu pops up where I select the “cl” option and click “Enter” then the corresponding code for the prefix shows up.
Example 2:
Javascript
function functionName() { } |
// JSON code snippet file
{
"named function": {
"prefix": "nfn",
"body": [
"function ${1:functionName}($2){",
"$3",
"}"
],
"description": "named function"
}
}
Explanation: The “named function” is the name of the snippet, “nfn” is the prefix of the snippet. ${1:functionName} denotes the placeholder “functionName” on the first tab stop.
Example 3:
// JSON code snippet file
"Array Method": {
"prefix": "arrmth",
"body": [
"${1|forEach,map,filter,reduce,some|}((${2:item}) => {",
"$3",
"})"
],
"description": "Array Method"
}
Explanation: The “Array Method” is the name of the snippet, “arrmth” is the prefix. “${1|forEach,map,filter,reduce,some|}” denotes the first tab stop which has choices in which you can choose anyone. “${2:item}” denotes the second tab stop which has placeholder “item”. “$3” simply denotes the third tab stop.
Note: You can also use the snippet generator tool to write the JSON where you are required to enter only the code.
