How to create code snippets/templates on Visual Studio(VS) Code?

In this article, I am going to talk about how you can create code snippets/templates on VS Code so that you can save a lot of time from typing the same template again and again or even copy-pasting.

Screenshots and commands are Windows-based. But I am assuming it will be very similar to Mac and Linux.

1. Open VSCode.
2. Type: Ctrl + Shift + P on Windows.
3. Search for: > Preferences: configure User Snippets
4. Click on Create Snippets:

You can either create a Global Snippet or Snippet for your current project/repo.

Create Snippet

5. Type the snippet filename.

Snippet File Name

6. A snippet will be created an will look as following:

Snippet Template

7. You will have to create the snippet in JSON format. Don’t worry there is a website that helps you create the JSON. You can store anything you like on the snippet, I am going to store a method for this demo.

8. Go to this website: https://snippet-generator.app/

9. Fill up the Description and Tab Trigger, and paste your snippet. Mine will look like this

Json Created by a website.

10. Copy that snippet and replace that on VSCode. Now the VSCode will look like this:

After the template updated on VSCode

11. Now you can go to any page and use that template using the tab trigger/prefix

Using the Snippet on VSCode

If you aren’t able to use this on the Markdown files, there is something extra you need to do. This is also discussed here: https://github.com/microsoft/vscode/issues/79384

You just have to go to settings.json and add the following code:

"[markdown]": { "editor.quickSuggestions": { "strings": true } },

That’s it! let me know if you have any questions in the comment section below.