Publish Your VS Code Snippet Extension in 4 steps

This article is from QPS (Quick Project Starter) series by Makhmud Islamov.

Creating a VS Code extension came to my mind during my first Go class at Make School. We were assigned to create a utility application for Go. Since I’m a web back-end student, I decided to create a snippet extension for Go web framework Echo. At the end of this article, you can see links to GitHub and Marketplace for my extension EchoSnippets. If you are web back-end and Golang enthusiast, install it and give it a shot. Any constructive feedback is appreciated.

Now, let’s go through the process of creating your first snippet extension.


Part I: Project Setup

Yeoman Logo

In order to kickstart your extension project, use Yeoman — web scaffolding tool and VS Code Extension Generator:

npm install -g yo generator-code

Then inside your extension folder run:

yo code

From there you will have to answer set of questions that will help to setup your app skeleton

Good job! Architecture of your extension is ready. Now let’s create a simple snippet

Part II: Creating Snippet

Inside snippets/snippets.json we start placing our snippet as follows:

{    
" Broader description goes here" : {

"prefix": "test",

"body": [

"snippet bodyline1",
"snippet bodyline2",
"last line"
],
      "description": "Here, input simple description. 
It will show up as you start type the prefix on
VS Code editing window"
    }
}

snippets.json file is called from package.json.:

{
  "name": "demosnippet",
  "displayName": "demoSnippet",
  "description": "This is just a demo of how to create snippets",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.32.0"
   },
  "categories": [
    "Snippets"
  ],
  "contributes": {
    "snippets": [
        {
          "language": "javascript",
          "path": "./snippets/snippets.json"
        }
    ]
   }
}

This means if you want to add more snippets, create another .json file inside ‘snippets’ folder and call it from package.json file.

Part III: Test

If you did everything right up to this point, testing part should be the easiest and the most fun part. In order to test your extension locally, you just have to make a copy of your extension folder inside .vscode/extensions. Use your terminal:

cd .vscode/
cd extensions
open .

Then reload your VS Code and check installed extensions list. You should be able to see your extension in the list. Open proper file depending on what language snippet extension you are building and type your snippet prefix. Enjoy your magic!

Part IV: Publishing the extension

It is time to publish your work in the Marketplace and share you product with the world.

Step 1. Install Visual Studio Code Extensions (vsce) command line tool:

npm install -g vsce

Step 2. Get a Personal Access Token from Azure DevOps

Detailed information can be found here.

Step 3. Publishing with vsce

While inside your extension folder, create a publisher name through your terminal:

vsce create-publisher (publisher name)

You will be asked personal access token you created. But the system will remember after first input.

In case you already created a publisher before, here is the login command:

vsce create-publisher (publisher name)

And finally publishing command is

vsce publish

or

vsce publish -p <token>

Congratulations! Now you know how to create and publish a VS Code snippet Extension.

Below you can find links to my first extension and Extension API for your further research. If you used this article-tutorial to build your extension, please share with me your extension in the comments and leave claps.

Good Luck!