Skip to main content

How to Create a VS Code Extension: A Step-by-Step Guide Using Node.js, npm, and Yeoman

Creating a Visual Studio Code (VS Code) extension can significantly enhance your coding workflow by adding custom functionalities. In this guide, we’ll cover the setup, development, and packaging process using tools like Node.js, npm, and Yeoman.

Prerequisites

  • Visual Studio Code version 1.92.2 or higher.
  • Node.js installed on your machine.

Steps to Set Up Your VS Code Extension

Set Up Your Development Environment

  • Install Node.js: Make sure Node.js is installed. You can download it from nodejs.org.
  • Install VS Code: Download and install Visual Studio Code from code.visualstudio.com.

Clone the Repository

  • Clone the repository to your local machine using:
  • git clone <repository-url>

Install Dependencies

  • Navigate to the project directory and run: npm install

Create a New Extension

  • Use Yeoman Generator: This is the easiest way to create a new extension.
  • Open your terminal and run: npm install -g yo generator-code
  • After installing the generator, run: yo code
  • Follow the Prompts: Answer the questions to set up your extension. For example:
    • Type of extension: New Extension (TypeScript)
    • Name: <Your extension name in any case>
    • Identifier: <Your extension name in lower case only>
    • Description: <optional>
    • Initialize a git repository: Yes
    • Which bundler to use? <Webpack> (for optimized performance, simplified deployments and reduced file size)
    • Package manager: npm
    • Do you want to open the new folder with VS Code: <Open with ‘code’>

Scripts

  • Compile: Run npm run compile to compile the extension.
  • Test: Run npm run test to execute tests using the VS Code test runner.

Project Structure

  • src/extension.ts: Main entry point of the extension, containing activation and deactivation logic.
  • src/customprompts.ts: Logic for generating and handling custom prompts for Java migration tasks.
  • package.json: Metadata about the extension, including name, version, description, dependencies, commands, and contributions.

Usage

  • Press Ctrl+Shift+P to open the command palette.
  • Run the command Java Migration CoPilot Extension to activate the extension.
  • Interact with the chat participant to get assistance with Java migration tasks.

Packaging Your Extension (post development)

  • Install VSCE: The Visual Studio Code Extension Manager (VSCE) is used to package and publish your extension. Install it globally using:
  • npm install -g vsce
  • Package Your Extension: Navigate to your extension’s root directory and run:
  • vsce package
  • This will create a .vsix file, which is the packaged extension that can be installed or published.

 

Happy Learning! Please share your feedback/queries in the comment section.

Labels:

Comments

Post a Comment

Popular posts from this blog

Fix: "Cannot set a credential for principal 'sa' . (Microsoft SQL Server, Error: 15535)" and “User is not associated with a trusted sql server connection" Errors

Recently, I had happen to struck with the following errors when I tried to reset the SA password through the SQL Server 2008 R2 Express. " Cannot set a credential for principal 'sa' . (Microsoft SQL Server, Error: 15535) " and then, “ User is not associated with a trusted sql server connection " From my research I have found the solution and that perfectly worked in SQL management studio. Hence, I thought of sharing my findings with others. ========================================================= Advertisement: Choosing .NET Core Worker Services OR Windows Services? ========================================================= Steps to reset the password in SQL Server 2008 R2 Express and fix for the errors: Step 1. Go to SQL Server Instance -> Properties/Security tab and change the mode to SQL Server authentication mode. Step 2. Go to Security/Logins, then open 'sa' login properties,          a. Uncheck the "Enforce passwor...
59 comments
Read more

How to Set Up SonarQube in IntelliJ: A Step-by-Step Guide

SonarQube in IntelliJ: (Looking for SonarLint then check here:  How to install and execute Sonarlint ) Setting up SonarQube in IntelliJ can significantly enhance your code quality by identifying bugs and vulnerabilities. Follow these steps to integrate SonarQube with IntelliJ: Step 1 :  Install SonarLint PluginOpen IntelliJ and navigate to Settings. Go to Plugins > Marketplace. Search for SonarLint, install it, and restart the IDE. Step 2 : Configure SonarLint Click on SonarLint at the bottom left of IntelliJ. Select Configure SonarLint. In the popup, check the box for Bind project to SonarQube/SonarCloud and click on Configure the connection. Step 3 :  Set Up the ConnectionIn the new popup, click the + icon to add a new connection. If the + icon is not visible, go to File > Settings > New UI and disable it. Apply changes and restart the IDE. Name your connection and select SonarQube. Enter the SonarQube URL (e.g., https://sonar.prod.company.com) and click Next....
Post a Comment
Read more

How to implement JUnit 5 in Your Maven or Gradle Project: A Step-by-Step Guide for Java Testing

Unit Testing JUnit Learn how to integrate JUnit 5 in your Maven or Gradle project for efficient Java testing. This guide covers adding dependencies, creating test classes, writing test methods, and running tests in IntelliJ IDEA and Visual Studio Code to ensure robust and error-free code. Step 1: Create a Simple Java Application Create a simple Java application, for example, “Copilot Demo,” and select Maven or Gradle as the build system through IntelliJ IDEA or Visual Studio Code. Step 2: Add JUnit Dependency For Maven: Add the following dependency to your pom.xml file inside the <dependencies> tag: XML <dependency> <groupId>org.junit.jupiter</groupId> <artifactId>junit-jupiter-engine</artifactId> <version>5.11.2</version> <scope>test</scope> </dependency> For Gradle: Add the following dependencies to your build.gradle file: dependencies { testImplementation 'org.junit.jupiter:junit-jupiter-engine:5.11.2' } Step ...
Post a Comment
Read more