🌐
Visual Studio Code
code.visualstudio.com › api › get-started › your-first-extension
Your First Extension | Visual Studio Code Extension API
November 3, 2021 - Inside the editor, open ... in a new Extension Development Host window. Run the Hello World command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) in the new window: You should see the Hello World from HelloWorld! notification showing up. Success! If you aren't able to see the Hello World command in the debug window, check the package.json file and make sure that engines.vscode version is compatible with the installed version of VS Code...
🌐
Microsoft Learn
learn.microsoft.com › en-us › shows › visual-studio-toolbox › creating-a-visual-studio-code-extension
Creating a Visual Studio Code Extension | Microsoft Learn
Hasan shows how to create a Visual Studio Code extension. Chapters 00:00 - Introduction 01:50 - What do you need to install first? 03:30 - Creating a new extension using the Visual Studio Code Extension Generator 05:00 - Examining the extension project and code 07:45 - Running and debugging the extension 09:00 - Modifying the extension to create a new tab 11:00 - Using HTML to display text in the tab 12:45 - Using Javascript to change colors in the tab 16:45 - Passing messages in the extension 20:20 - Publishing an extension 21:20 - Creating an organization and a personal access token in Azure
Discussions

The Rollercoaster of Building a VSCode Extension – AMA
Thank you for the lessons learned! I am the developer for the MeerkatIO extension and I am currently working on that delicate dance with web views. Do you have any recommended references or samples you worked from that I may have missed? More on reddit.com
🌐 r/vscode
9
50
May 8, 2024
What VSCode extensions are your favorites? Which ones do you consider mandatory for your workflows?
The remote (ssh|wsl|docker) extensions by far. But it almost isn't fair including those since they are developed by Microsoft, and described in the official docs. Past that indent-rainbows is pretty important. I work with a lot of yaml, python, and so on where getting indention right is essential. The ansible plugin is pretty important since I use ansible for lots of the stuff I do. More on reddit.com
🌐 r/vscode
27
41
March 16, 2023
What VS Code extensions do you actually enjoy/use
Peacock. You can use it to change a color of vscode based on a project. Useful if you are working with multiple projects at the same time. More on reddit.com
🌐 r/webdev
84
178
June 17, 2024
What are some underrated VSCode extensions and features you wish more people knew about or that you wish you knew sooner?
Project Manager. Being able to jump between projects and save them as workspaces whether they involve ssh into a remote machine or spinning up a dev container... It is truly and amazing extension More on reddit.com
🌐 r/vscode
32
32
August 22, 2023
🌐
Visual Studio Code
code.visualstudio.com › api
Extension API | Visual Studio Code Extension API
November 3, 2021 - Visual Studio Code has a rich extension API. Learn how to create your own extensions for VS Code.
🌐
Visual Studio Code
code.visualstudio.com › api › extension-guides › overview
Extension Guides | Visual Studio Code Extension API
November 3, 2021 - While the Extension Capabilities section offers high-level overviews of what an extension can do, this section contains a list of detailed code guides and samples that explains how to use a specific VS Code API.
🌐
GitHub
github.com › microsoft › vscode-extension-samples
GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API. · GitHub
commands StatusBarItem window.createStatusBarItem TextEditorCursorStyle window.activeTextEditor Position Range Selection TextEditor TextEditorRevealType TextDocument ... workspace.workspaceFolders SourceControl SourceControlResourceGroup scm.createSourceControl TextDocumentContentProvider contributes.menus ... languages.registerCallHierarchyProvider CallHierarchyProvider CallHierarchyItem CallHierarchyOutgoingCall CallHierarchyIncomingCall ... https://github.com/Microsoft/vscode/wiki/Extension-Authoring:-Adopting-Multi-Root-Workspace-APIs#language-client--language-server
Starred by 10K users
Forked by 3.9K users
Languages   TypeScript 79.1% | JavaScript 15.1% | Rust 3.4% | CSS 1.4% | Jupyter Notebook 0.8% | HTML 0.2%
🌐
freeCodeCamp
freecodecamp.org › news › making-vscode-extension
How to Make Your Own VS Code Extension
June 4, 2020 - Don’t worry, I will explain some ... files: extension.js and package.json. This is where you will spend most of your time coding. This file will contain all your code blocks and logic flow. There isn’t much difference between this and normal Node code. But one of the main differences is registering your commands. You will come upon this block vscode.commands....
🌐
GitHub
microsoft.github.io › vscode-essentials › en › 10-create-an-extension.html
Create Your First Extension · Visual Studio Code - The Essentials
Create a new extension project by typing yo code in a terminal. You then have the choice to create different types of extensions:
🌐
Visual Studio Code
code.visualstudio.com › api › working-with-extensions › publishing-extension
Publishing Extensions | Visual Studio Code Extension API
November 3, 2021 - To load an extension, you need to copy the files to your VS Code extensions folder .vscode/extensions.
Find elsewhere
🌐
Opensource.com
opensource.com › article › 20 › 6 › vs-code-extension
How to write a VS Code extension | Opensource.com
Once you are in, type .code. It will open in your editor and look something like this: ... The two most important files to pay attention to are package.json and extension.ts inside the src folder. First, look at package.json, which should look something like this: { "name": "initdockerapp", "displayName": "initdockerapp", "description": "", "version": "0.0.1", "engines": { "vscode": "^1.44.0" }, "categories": [ "Other" ], "activationEvents": [ "onCommand:initdockerapp.initialize" ], "main": "./out/extension.js", "contributes": { "commands": [ { "command": "initdockerapp.initialize", "title": "
🌐
Syncfusion
syncfusion.com › blogs › blazor › creating extensions for visual studio code: a complete guide
Creating Extensions for Visual Studio Code: A Complete Guide | Syncfusion Blogs
July 22, 2025 - This article provides the complete steps to create and use extensions in Visual Studio Code to boost your productivity in creating web projects.
🌐
Codesphere
codesphere.com › articles › build-your-own-vs-code-extension
Build your own VS Code extension
February 27, 2025 - We will guide you through the development of an extension, where you can modify the project to do specific tasks, and finally, we will show you how to officially publish an extension on the VS Code Marketplace. ... The VS Code extension will be a TypeScript project, and for the webview, we will use Svelte as the frontend framework. We have prepared a VS Code extension development template so that you can clone this repository and get started right away: GitHub repository: https://github.com/codesphere-cloud/vscode-extension-template
🌐
DEV Community
dev.to › dusan100janovic › create-a-visual-studio-code-extension-1i7c
Building a Visual Studio Code Extension to Generate Files from Templates - DEV Community
September 9, 2024 - This Yeoman generator helps scaffold a new VS Code extension. After answering some setup questions (e.g., whether to use TypeScript, eslint, etc.), you’ll have a basic structure ready to go. The main functionality of your extension is defined in the extension.ts file. Here’s an example of how to register a command that gets triggered when users want to generate files from a template: import * as vscode from "vscode"; export function activate(context: vscode.ExtensionContext) { const cfftExecuteCommand = vscode.commands.registerCommand( "cfft.newFileFromTemplate", // the command name async (uri: vscode.Uri) => { // the callback // Your code goes here } ); context.subscriptions.push(cfftExecuteCommand); }
🌐
Snyk
snyk.io › blog › modern-vs-code-extension-development-tutorial
Modern VS Code extension development tutorial: Building a secure extension | Snyk
October 2, 2023 - If the number of lines is fewer than eight, it produces an error message using VS Code's diagnostic capabilities. This includes a floating pop-up window and an entry in the Problems panel. Next, you need to call UpdateDiagnostic() and register it as part of your extension. Open the extension.ts file and replace its content with the following: 1// The module 'vscode' contains the VS Code extensibility API 2// Import the module and reference it with the alias vscode in your code below 3import * as vscode from 'vscode'; 4import * as autofill from './AutoFillExtension'; 5import * as linelimit from
🌐
LogRocket
blog.logrocket.com › home › writing vs code extensions in javascript
Writing VS Code extensions in JavaScript - LogRocket Blog
June 4, 2024 - We only want the extension to be active when the command is run, so we will use the onCommand Activation Event. That’s the Extension manifest done. ... You can read the VS Code reference of the Extension Manifest for more information on the ...
🌐
Medium
pramonow.medium.com › making-your-own-vscode-extension-6c3e431ff16c
Making your own vscode extension. So, recently i just made my first… | by Pramono Winata | Medium
June 7, 2020 - Ah Template, how very convenient. vscode already have it owns template generator for use, let’s jump straight into it. First, install your template generator with npm install -g yo generator-code · Afterwards, lets run it with yo code And it will prompt out this weird head thing (?) and language selection, pick your preferred language and proceed (i picked javascript here) ... Afterwards, you will need to edit your extension name and description here, you can just proceed with anything you prefer.
🌐
Reddit
reddit.com › r/vscode › the rollercoaster of building a vscode extension – ama
r/vscode on Reddit: The Rollercoaster of Building a VSCode Extension – AMA
May 8, 2024 -

Hey everyone!

In the last several months, I built a VSCode extension, which you can check out right here. It's called Sherlock - i18n inspector and helps people do i18n/internationalization in their projects. It replaces the famous i18n-ally extension, which hasn't been updated in months and seems unmaintained.

This journey was packed with twists and turns, so I thought I'd drop some lessons learned and open up a discussion for anyone diving into similar projects.

First and foremost, the VSCode extension API is awesome. It was overall a breeze to work with, and the documentation is helpful. Also, if you jump into the vscode Issues on GitHub, they will answer. Huge +1.

But, there were also challenges, and I tried my best to summarize the main ones.

Going Functional: We decided to roll with functional programming. It made our code cleaner and more predictable but integrating with APIs not built for it was like fitting a square peg in a round hole (looking at you, `Tree View API`). It definitely made us think twice about how to handle external libraries without tossing our FP principles out the window.

WebView's: We leaned heavily on WebViews for the snazzy parts of the UI, and let me tell you, it's a wild ride :'). They're super powerful, but the communication setup between the extension and the WebView content is a delicate dance. We had to get really creative with message handling to keep things running smoothly. Also, it seems we are among the first to successfully ship lit Web Components into a WebView because I literally couldn't find anything regarding this topic.

Lifecycle: Keeping track of the extension's lifecycle was a kind of hard. Initializing, adapting to workspace changes, and shutting down without leaving a mess required more attention to detail than I anticipated. (for people not familiar, you basically need to register commands for your actions and a lot of other things).
It's like keeping plates spinning—drop one, and things get messy fast. We are still figuring things out on this end.

Testing: Setting up E2E tests? It took us several days. Trying to mimic real user interactions in a VSCode environment was tougher than expected. We mixed unit tests, integration tests, and a bunch of manual poking around to get it right.

Would love to hear from any of you who've tackled these challenges or are thinking about it. Got any stories or tips?


Disclaimer: This is not to blame anyone's work involved. We're happy to be involved in such a vibrant extension ecosystem & happy to contribute to it by sharing our experience.

🌐
Brandonscott
brandonscott.me › posts › writing-and-publishing-your-first-visual-studio-code-extension
Writing and Publishing Your First Visual Studio Code Extension
├── src # Source folder for the extension's TypeScript files │ ├── test # Generated extension test suite │ └── extension.ts # Entrypoint for the extension, defines activate/deactivate functions ├── .vscodeignore # Configuration file to exclude files/directories from the packaged extension ├── package.json # Package manifest file defining its name, author, dependencies, as well as extension-specific configurations: commands, activation events, and settings.
🌐
Ltvco
ltvco.com › engineering › creating-first-vs-code-extension
Creating your first Visual Studio Code Extension
November 27, 2023 - > npm install -g @vscode/vsce > vsce package · This command will generate a ‘MyFirstExtension.vsix’ file, which can be installed manually in vs code or published to the marketplace.
🌐
DigitalOcean
digitalocean.com › community › tutorials › how-to-create-your-first-visual-studio-code-extension
How To Create Your First Visual Studio Code Extension | DigitalOcean
June 9, 2021 - Before we work on code, let’s take one more look at the activationEvents section in the package.json file. Again, this section contains a list of events that will activate our extension whenever they occur.
🌐
Medium
charleswan111.medium.com › step-by-step-guide-to-building-a-vscode-extension-52e2c59e8ee2
Step-by-Step Guide to Building a VSCode Extension | by Charles Wan | Medium
January 27, 2025 - Extension name: Provide a name for your extension. Directory: Choose where to create the project. ... my-vscode-extension/ │ ├── .vscode/ # Debugging configuration ├── src/ # Source code (for TypeScript projects) │ └── extension.ts ├── package.json # Extension metadata and dependencies ├── tsconfig.json # TypeScript configuration ├── README.md # Extension description └── CHANGELOG.md # Changes between versions