• Janarthanan Soundararajan

Save Time and Improve Productivity using VS Code Snippets.

I have been using VS Code for more than two years. The features like auto code completion, linting, and auto-formatting help me to do the programming ease. But for snippets, I have only used the built-in snippets and extensions. Recently I have explored creating custom own snippets for VS Code. First, I thought creating custom snippets would be complicated, but the truth is not complicated like was I think. I have gone through the documentation then created my first own snippets, which is easy.

What are snippets?

Snippets are reusable source code, which helps to avoid repeatedly writing code manually.

In VS Code, we can create the global snippets and the project-specific snippets. Snippet files are nothing but JSON files. First, we will look at the basic structure of a snippet configuration code.


Structure of Snippet Configuration

As we saw before, snippet configurations are writing using the JSON file. The following is a typical snippet configuration.

{
  "My Python Function": {
     "scope": "python",
     "prefix": "mypyf",
     "body": [
        "def $1($2):", 
        "\tprint($2)"
     ],
     "description": "Creating function using snippet"
   }
}

JSON object has two main things, such as key and value. We need to provide the name of the snippet as a key. Value is the information of that particular snippet.


The scope is used to restrict the snippet usage for selected programming languages.


The prefix helps to access the snippet from the editor. For instance, while writing the JavaScript code, just typing "log" will help to access the "Log to the console" snippet.


The body is the actual reusable code that we will use while coding. The body can be the string or the array of strings. In the above example, "$1" and "$2" are variables that help to add dynamic code.


The description helps to give more detailed information about the snippet.


Create Snippets

In VS Code, there are two types of snippets we can create, such as global snippets and project-specific snippets. To create the snippet, we need to go to the "User Snippets" option. It is in the Preferences menu.


In Windows & Linux

File > Preferences > User Snippets


In Mac

Code > Preferences > User Snippets


Global Snippets

The global snippets will available for all projects and files. After clicking the "User Snippets" the list options will show. Now we need to click the "New Global Snippet file" to create the global snippets file.

We can select the available programming language from the list to create the language-specific snippets.


Folder (Project) Specific Snippets

The folder specific snippets file will be under the ".vscode" folder with the ".code-snippet" extension. These are JSON files, we need to select "New Snippet file for folder_name" to create the snippets file.

The "creating own snippets" feature will help to ease project development by reducing the rewrite of the same structure of code many times. It is useful for the team as well, maintaining the project-specific snippets files as a git project will let the team members contribute to the improvement of snippets, and it will help to scale.


I hope this blog post informative. Thank you for reading.

Top 5 Things to do After Installing Visual Studio Code.


16 views0 comments

©2020 by Techaaroorian.

  • Pinterest
  • Twitter Social Icon
  • Facebook
  • YouTube