Creating a VS Code Extension

Introduction

• Presenter: Kyle from Web Dev Simplified
• Objective: Show how to create a VS Code extension to search WDS blog posts
• Outcome: Ability to search and open WDS blog articles directly in the browser

Getting Started

Prerequisites

1. VS Code Documentation: Utilize the extensive documentation available for creating extensions.

2. Install Required Libraries: Use the following command to install necessary libraries:

   npm install -g yo generator-code

Initial Steps

1. Run Yeoman Generator:

   yo code

2. Setup Prompts:

   • Choose an extension written in JavaScript
   • Name the extension (e.g., wds-search-blog-example)
   • Optional: Description, Git repository, use of npm

3. Generated Code: The generator will create several files.

   • .vscode folder: For debugging setups
   • Node modules: Library dependencies
   • Test Folder: Placeholder for tests
   • Configs: .eslint, .gitignore, vscodeignore
   • Main Code File: extension.js
   • Metadata Files: package.json, README, CHANGELOG, etc.

Code Structure

Overview of Files

• extension.js: Main code file for the extension
• package.json: Configuration and command definitions
• README.md: Details presented on the extension marketplace

Running Default Extension

1. Start with Existing Code: f5 (Debug)
2. Run Command: ctrl + shift + p Hello World
3. Output: Hello World from wds-search-blog-example

Customizing the Extension

Modify Commands

1. Registering Commands
   • Use vscode.commands.registerCommand
   • Update package.json for new commands "commands": [ { "command": "wds-search-blog-example.helloworld", "title": "Hello World" } ]
2. Custom Command: Change to search wds blog example and update the activationEvents

Fetching Blog Data

1. Install Axios: For HTTP requests

   npm install axios

2. Fetch RSS Data

   • Use axios.get(url)
   • Parse XML data using fast-xml-parser

3. Store Blogs: Fetch and store on activation to avoid repeated requests

UI Elements

1. Quick Pick Menu
   • Use vscode.window.showQuickPick to display a searchable list
   • Format data to include label and detail

Open URL

1. Execute Command and Open URL
   • Fetch blog link
   • Open link in browser using vscode.env.openExternal(url)

Publishing the Extension

Preparation

1. VSCE Tool: Install publishing tool

   npm install -g vsce

2. Create Publisher Account: Use Azure DevOps

   • Create an organization and generate a personal access token

3. Update Package Metadata: Ensure publisher field in package.json

Publish Steps

1. Login: With VSCE and personal access token

   vsce login [publisher-name]

2. Publish: Execute publish command

   vsce publish

Verification

1. Check Marketplace: Ensure extension appears and is verified

Conclusion

• Successfully created and published a VS Code extension
• Demonstrated practical uses: Searching and accessing blog articles
• Encouragement to explore further video content from Web Dev Simplified