Create VsCode Extension

Task:

To Create a Simple Node JS Express Code Snippet Extension for VsCode.

Steps:

1) Before We begin to start You have to check out the documentation of vs code extensions given below-

https://code.visualstudio.com/api/get-started/your-first-extension

2) Installing Yeoman

Yeoman is a tool for generating and scaffolding modern web applications.

npm install -g yo generator-code

3) Run the Yeoman Generator.

yo code

Give all the answers to fields it asks like the name of the extension, description and language like javascript, html, javascript react as your wish.

We are Creating snippets, right for that we have to select Code Snippets options when it asks What type of extension do you want to create?

4) Updating Package.json

"publisher":"suriyagokul",
"repository": {
    "type": "git",
    "url": "https://github.com/suriyagokul/vscode-express-extension"
  },
  "icon": "express.png",

Give an icon for your extension and repository details and publisher name.

5) Writing Code Snippet

In snippets/snippets.code-snippets

{
    "Express Code Snippet": {
        "prefix": "eac",
        "body": [
            "// npm install express cors cookie-parser",
            "import express from 'express';",
            "import cors from 'cors';",
            "import cookieParser from 'cookie-parser';",
            "const app = express();",
            "app.use(express.json());",
            "app.use(express.urlencoded({ extended: true }));",
            "app.use(cors());",
            "app.use(cookieParser());",
            "export default app;"
        ],
        "description": "Creates Express App Starter Template"
    }
}

/* prefix is anything you can give. I have given eac
   whenever we type eac it will generate this body for us..
*/

6) To Publish our extension to the marketplace we have to create an azure devops organization and on profile Personal Access Token Create New Token.

In the Create a new personal access token modal, select the following details for the token:

Name: any name you want for the token

Organization: All accessible organizations

Expiration (optional): set the desired expiration date for the token

Scopes: Custom defined:

Click the Show all scopes link below the Scopes section.

In the Scopes list, scroll to Marketplace and select Manage scope

7) Giving Token to vs code

vsce login publisher_name

It asks personal access token from azure devops we can paste the token here.

After every updation/change in extension snippets, we create a new token and give it here.

8) Publish an Extension

vsce publish

9) Auto-incrementing the extension version

We have major, minor, or patch incrementing methods.

Updates an extension's version from 1.0.0 to 1.1.0 if you write a minor.

vsce publish minor