# How to create a VS Code extension 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: 1. Create a new folder. Let us say “**myFirstExtension**” 1. Open your terminal or command prompt and navigate to the folder we have just created. 1. Run the following command ``` yo code ``` ### At this step, vscode extension generator would show up ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072382868/KxEBhT6-D.png) ### 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072385136/pG4gaafql.png) ## 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072386871/jG5e4D6ke.png) ### 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: ```json { "start":{ "prefix": "!start", "body": [ "", "", "", " **Note: Please make sure that the publisher name in package.json is same as you create a publisher here.** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072394866/YFCKHGoaP.png) * Select **+ Create new extension** and select **visual studio** from the dropdown ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072396984/6a6i-488J.png) * Upload your .vsix extension ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072399106/Su2bVDx6c.png) * Click Continue ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1621072401251/7Q8R6Bfuk.png) ## 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](https://medium.com/@gargpiyush195/top-10-visual-studio-code-extensions-2020-fc5761116443)