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

How to Implement Lombok in IntelliJ for Java Projects: A Step-by-Step Guide

Lombok in IntelliJ for Java Projects Implementing Lombok in your Java project can streamline your code by reducing boilerplate. Follow these steps to set up Lombok in IntelliJ: Step 1 :  Ensure Java SDK Version. Ensure that your project is using Java 8 or higher.  You can check and set the Java SDK version in pom.xml: XML <properties> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> Step 2 : Add Lombok Dependency to pom.xmlOpen the pom.xml file in your project. Add the following Lombok dependency inside the <dependencies> section: XML <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.24</version> <scope>provided</scope> </dependency> Step 3 : Download Lombok Plugin for IntelliJ IDEAGo to File > Settings (or press Ctrl+Alt+S). Navigate to Plugins. Search for Lombo...
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

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