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.
Comments