Hi there, in this article we would be creating an extension for VS Code and publishing it to the vscode marketplace.
Excited about that 🥰? Lets Start
What we are going to create?
We would be building an auto-complete extension that auto-completes the bootstrap snippets in an Html file.
Prerequisites
You must have node.js installed on your machine.
Step 1. Install Yo! 🤟🏻
Yes, you read that correctly. We have to install yo to create our vscode extension.
To install yo fire-up your terminal or command prompt.
Note: Windows users please open your command prompt as an administrator.
After being set type in the following command:
macOS:
sudo npm install -g yo
Windows:
npm install -g yo
Yo! you have successfully installed Yo 🎉
Step 2: Project setup
Setting up the project is really simple.
All you need to do is:
Create a new folder. Let us say “myFirstExtension”
Open your terminal or command prompt and navigate to the folder we have just created.
Run the following command
yo code
At this step, vscode extension generator would show up
From the given options choose New Code Snippets to create an auto-complete snippets extension.
After that being done, you would be prompted with some questions such as the name of the extension, description etc.
Also, there would be a prompt saying
“Enter the language for which the snippets should appear. The id is an identifier and is a single, lower-case name such as ‘PHP’, ‘javascript”
Type in html for this as we are creating snippets for HTML
Hora 🎉 ! You have successfully set up the project and we are now ready to code our extension.
Step 3: Code the extension.
Now you may close your terminals and command prompts and open the folder we created in the previous step. There you will notice a folder created with the name of your extension. Open this folder inside your favourite code editor. Like vscode in my case.
Now, head over to snippets folder and open snippets.json file.
At this point, your snippets.json file would we something like this
{}
Yep, it’s an empty object and we have to code our snippets inside this object.
Lets Code!
Code along with me:
{
"start":{
"prefix": "!start",
"body": [
"<html>",
"</html"
],
"description": "Basic Starter Template"
}
}
prefix: what user would type to access the snippet
body: the body of the snippet. In this case Array of HTML tags
Yes that it! We have successfully created our first snippet.
So whenever users types “!start” in vscode the body of our snippet would be printed there.
You can Create multiple snippets by adding more objects to the main object
{
"start":{
"prefix": "!start",
"body": [
"<html>",
"</html"
],
"description": "Basic Starter Template"
},
"h1":{
"prefix": "!h1",
"body": [
"<h1>",
"</h1"
],
"description": "Basic html tag"
}
}
Wola! You have created your own very first extension 🥰
Just keep adding your snippets and create some great snippets.
Please post your extension links below because I cant wait to see what you have made.
Complete Bootstrap Snippets Code
https://gist.github.com/piyushgarg195/36fda82a1662e04618a34afbca293830
Step 4: Configuring the Extension
At this point, you have successfully created your vscode extension.
Now open package.json file present in your project folder.
{
"name": "bootstrap-snippets",
"displayName": "bootstrap-snippets",
"description": "A simple Bootstrap snippets",
"version": "0.0.1",
"engines": {
"vscode": "^1.44.0"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
}
]
}
}
In this file, we need to make a few changes as listed below:
1. Adding Publisher name in package.json
{
"name": "bootstrap-snippets",
"displayName": "bootstrap-snippets",
"description": "A simple Bootstrap snippets",
"publisher": "piyushgarg",
"version": "0.0.1",
"engines": {
"vscode": "^1.44.0"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
}
]
}
}
2. Updating Readme.md file
This file is the documentation of your extension. You need to edit this file before publishing your extension.
Finally: let's publish our extension
To publish your extension first you need to download vse tool by writing a command
macOS
sudo npm install -g vsce
Windows ( open command prompt as administrator)
npm install -g vsce
Now, after installing vse, navigate to your extension directory and open that directory in terminal or command prompt and type the following command
vsce package
After this you would be prompted with a message saying
“A ‘repository’ field is missing from the ‘package.json’ manifest file.
Do you want to continue? [y/N]”
Hit ‘y’ and press enter.
This would create <extension_name>.vsix file
Congratulation! you are now ready to publish it.
- Create a publisher
Note: Please make sure that the publisher name in package.json is same as you create a publisher here.
- Select + Create new extension and select visual studio from the dropdown
- Upload your .vsix extension
Congrats! Your extension is now published! 😍
Do visit:
Top 10 visual studio code extensions 2020
Best vscode extensions to make your development smooth and powerful.medium.com
