Summary

This article provides a tutorial on creating custom code snippets in Visual Studio Code (VSCode).

Abstract

The article explains the concept of code snippets, which are small, reusable lines of code that can save developers from typing repetitive code. It then focuses on creating a custom code snippet in VSCode that generates a switch statement with three cases and a default case. The article provides a detailed explanation of the structure of a snippet in VSCode, which is written in JSON format and consists of a prefix, body, description, and name. The tutorial guides the reader through the process of creating a custom snippet, from opening the snippet menu in VSCode to adding the custom snippet to the JavaScript.json file. The article concludes by demonstrating how to use the custom snippet in VSCode.

Opinions

Code snippets are considered one of the easiest ways for developers to be more productive.
The author provides a detailed explanation of the structure of a snippet in VSCode, which is written in JSON format and consists of a prefix, body, description, and name.
The tutorial guides the reader through the process of creating a custom snippet, from opening the snippet menu in VSCode to adding the custom snippet to the JavaScript.json file.
The author concludes by demonstrating how to use the custom snippet in VSCode.
The author encourages readers to ask questions if they have any and provides a link to join Medium if they are new to the platform.
The author also promotes their AI service, which provides the same performance and functions as ChatGPT Plus(GPT-4) but is more cost-effective.

How to Create Absolutely Awesome Custom Code Snippets in VSCode

Create your own reusable lines of code

Code snippets are one of the easiest ways a developer can be more productive.

A code snippet is a small, reusable line of code that can save you from having to type repetitive code.

here is an example of using a code snippet in vs code:

To understand Code Snippets in VSCode, we will be creating a snippet that creates a switch statement with 3 cases and a default case.

Understanding The structure of a Snippet

Before we start creating snippets in VSCode we first need to understand the structure of a snippet.

Snippets in VSCode are written in JSON and in the following format:

"TestSnippet": {
   "prefix": "tsn",
   "body": "console.log('This is from a test snippet!);",
   "description": "testing a snippet"
}

The Different Parts of a Snippet

A snippet consists of four different parts: a prefix, a body, a description, and a name.

The prefix is a string that when typed will display the snippet.

The body is the content that will be displayed when the snippet is called.

The description is an optional description that is provided by IntelliSense.

And a name which is the name of the snippets and used in IntelliSense if the description is blank.

Creating our Snippet

now that we have a basic understanding of what makes a snippet, it's time to make our own custom snippet.

Opening the Snippet Menu

VSCode has a menu dedicated to user snippets.

If you are on windows the menu is at File > Preferences > User Snippets

On mac, the same menu can be found at Code > Preferences > User Snippets

After that, you will see a dropdown appear asking you for a language for your snippet. For this tutorial, we will be picking JavaScript.

Adding Custom Snippet to Javascript.json

Now that we have navigated to the correct file it is time to create our snippet.

the code for the snippet is below:

Using our Custom Snippet

Our Snippet is complete now.

All we have to do is a test in VSCode

To do that type the prefix,sws, into a javascript file and press enter when you see it appear in IntelliSense.

Conclusion

Thank you for reaching the end of my article on ‘How to Create Absolutely Awesome Custom Code Snippets in VSCode’. If you have any questions, feel free to ask and I’ll try to answer as soon as possible.

I hope you have a great day. If you are new to Medium, you can join using this link here.

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.