sd

Create your own VS Code Extension


VS Code is where all the action goes down. Probably one of the best text editors you can use right now, that is, apart from vim. If you have been working with VS Code then there are probably a plethora of extensions installed for snippets that get you up and running in no time — plus there are plenty that the editor provides by default.

As a developer, different individual or team have different use cases, keeping yourself DRY is essential when it comes to programming. However, there are snippets of code that you might have come across which you have to write in many places in every project. Precisely, this is why you need custom Snippets, and that is what we are going to build today!

Setting Things Up 🔧

For building VS Code extensions, Microsoft has provided us with a scaffolding template for Yeoman generator or otherwise known as Yo Code. For this, you need node installed in your system.

$ npm install -g yo generator-code

Once installed, run yo code in your terminal, it is really cool how it sounds!

create vs code yo code generator

Yeoman Generator provides various options for different kinds of extensions, here we would want to select the New Code Snippets option.

yo code scaffolding

Once you do that, you can press enter for the first option, as we are creating an entirely new extension and not importing anything. For the rest, you can do as you please. On the last option, specify the language that you are creating the extension. You can specify one here, but we can add more which we will cover in a while. After that, it will generate some files that are specific to the Snippets Extensions. Half of your work is already done, and it only gets easier.

Building Custom Snippets 🔨

If you peek inside the snippets folder, you will see the snippets.json file. This file is where we will be putting out snippets.

{
  "CSS Snippet": {
    "prefix": "!css",
    "body": [
      "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"${1:dir}/reset.css\" />",
      "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"${1:dir}/layout.css\" />",
      "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"${1:dir}/style.css\" />"
    ],
    "description": "css files for lf"
  },
  "React Bind Snippet": {
    "prefix": "!bind",
    "body": "this.${foo} = this.${foo}.bind(this)",
    "description": "this binding for react"
  }
}

First of all, we have to give a title for our snippet and use it as a key for the snippet object. The example has CSS Snippet as the key. Inside here, you have to define three things, prefix, body and description.

Prefix: is the shortcut that you want to use to generate the extension. Please make sure you use a special character at the starting of the prefix so that it is unique and does not conflict with other built-in snippets. I usually prefer putting !, like !css!html.

Body: is where the snippets reside. For single line snippet, just put the snippet inside of double quotes. If it is a multi-line snippet then it is saved as an array. Each line is stored as a single element of an array separated by a comma. If there are double quotes, then you have to escape it. Hassle at first but a time saver in the future.

Description: is, well just a description of what your snippet does. It is a popup that gets displayed when you type the prefix, giving you insight on what that prefix is.


Here at Leapfrog, we have three sets of css files that we need to import, you can either create one line of import statement and make two copies of them, or you can make them with a four letters snippet.

In the example, I have also added an extra snippet for this binding.

You might have noticed the $1 symbol on the snippets. That is just our tab stops, meaning, where we want our initial cursor position to be and where it should move when we hit the tab key. Since we have $1 in three places, all of them gets updated at the same time. If you want different tab stops, use different numbers where you expect a change.

vs code extension

Now that we have our snippets ready, we can copy our snippet folder and paste it to the VS Code extension folder. The location of extensions folder in each platform is inside the home directory.

  • Windows %USERPROFILE%\.vscode\extensions
  • macOS ~/.vscode/extensions
  • Linux ~/.vscode/extensions

Once copied, restart VS Code and head on to the Extension section. You will find your extension there. Now you can start using it.

vs code snippets in action
Custom Snippets in action 👌

And that’s it, now you have your own VS Code extension that can be help for your personal use or in a team. You can share this folder with anyone in your team and get going in no time. If you want to publish your extension on the market place, then take a look at the “Publish Your VS Code Extension” guide from Microsoft.


Closing Notes 📔

If you want to make your extensions appear in more than one file types, head on to, package.json file and add a new language.

To set different path for different languages, create a new JSON file for your snippets and set the file path at package.json.

language support extension
Define languages where your snippet works

This guide is basically for creating a VS Code Extension when working in a team or for the larger audience. If you want to setup snippets just for yourself then you can skip some of the above steps.

You can go to File > Preferences > User Snippets and select the type of file you want your snippet to work on. It will give you a similar file like snippets.json, and from there it’s all the more alike. ✅

Learn more about VS Code Extension Development from the official VS Code Docs

One of the essential tool for your development workflow is Git and GitHub. Learn the core basics of Git and GitHub.


Be on top of news related to AI, Product Management and building digital products. Subscribe to our Newsletter below. 

More in Insights

8 DevOps Tools and Services We Love Technology

8 DevOps Tools and Services We Love

The core focus of any DevOps team is evolving and improving products rapidly. At Leapfrog, we value the speed at

Read more
How We Moved Towards Serverless Architecture Technology

How We Moved Towards Serverless Architecture

The scalability, flexibility and reduced cost promised by serverless architecture resulted in a massive growth rate of 75% compared to

Read more
Enhancing Git Workflow with Smart Commit Open Source Tool Technology

Enhancing Git Workflow with Smart Commit Open Source Tool

When you have a predefined process, it is generally a good idea to automate the things that can be and

Read more