Step by step guide on how to create a VS code extension in 2023

Source: Google

We all have some or the other problems when we try to code things in VS code. Some things we want the ESLint to catch , some manual tasks needs to be auto completed and some bugs which can be automatically be fixed and more advanced we would someone would like our code to be auto written(chat GPT-3 is already doing it). So its a good time to also know how to create a VS Code extension from scratch to be in the game.

Here is a step-by-step guide on how to create a Visual Studio Code (VS Code) extension:

1. Install the necessary tools: To create a VS Code extension, you’ll need to have Node.js and npm (or yarn) installed on your computer. You can download Node.js from the official website, and npm will be installed automatically along with it.
2. Create a new project: Open a terminal window and create a new folder for your extension. Inside that folder, run the command npm init (or yarn init) to create a new package.json file. This file will contain all the necessary metadata for your extension, such as its name and version number.
3. Install the VS Code extension generator: To make it easier to create a new extension, you can use the VS Code extension generator. To install it, run the command npm install -g yo generator-code.
4. Create a new extension: Run the command yo code in the root of your project, this will start the extension generator and it will guide you through the process of creating your extension. You'll be prompted to enter the name and identifier of your extension, as well as its description and other information.
5. Add functionality to your extension: Once the extension generator is finished, you’ll find a new folder named “src” in your project. This folder contains the main code of your extension, including a file named extension.ts or extension.js that contains a skeleton of a class that represents your extension. You can add new functionality to this class, or create new files as needed.
6. Test your extension: You can test your extension by running the command npm run watch (or yarn watch) in the terminal. This command will start a local development server and launch a new instance of VS Code with your extension installed. You can make changes to your code and see the results in real-time.
7. Publish your extension: Once you’re satisfied with your extension, you can package it and publish it to the VS Code Marketplace. You can use the command vsce publish to create a .vsix file and publish it to the marketplace.

Example:

How you can create a simple VS Code extension that adds a new command to the command palette that shows a message when executed:

1. Create a new folder for your extension:

mkdir my-extension
cd my-extension

2. Initialize your package.json file:

npm init

3. Create a new folder called src:

mkdir src

4. Create a new file called extension.ts in the src folder:

touch src/extension.ts

5. Add the following code to extension.ts:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "my-extension" is now active!');

    let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from my-extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

This code defines an extension with a single command called my-extension.helloWorld that shows a message when executed.

6. Add the following code to package.json to configure the extension

"contributes": {
    "commands": [{
        "command": "my-extension.helloWorld",
        "title": "Hello World"
    }]
},

7. Test your extension:
You can test your extension by running the command npm run watch (or yarn watch) in the terminal. This command will start a local development server and launch a new instance of VS Code with your extension installed. You can make changes to your code and see the results in real-time.

8. Publish your extension:

Once you’re satisfied with your extension, you can package it and publish it to the VS Code Marketplace. You can use the command vsce publish to create a .vsix file and publish it to the marketplace.