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.
Medium
medium.com › @aleksandrasays › developing-vs-code-extensions-b6debc865a55
Developing VS Code extensions. This article is based on the talk I… | by Aleksandra Sikora | Medium
February 15, 2019 - To generate an extension there are two tools needed — yeoman, that helps to kickstart a new project, and vscode-generator-code, which is a generator build with yeoman by VS Code team.
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
9
50
May 8, 2024Some more learnings in writing our own VS Code extension
Thank you!! This is really helpful :) More on reddit.com
1
6
February 21, 2023I’ve made VSCode extension for iOS development
If this works you better get a donation link or something op More on reddit.com
33
233
June 2, 2024VSCode Extensions
In alphabetical order, what I have: Bookmarks C# C# Dev it (but I also disabled it, as it was taking too many resources and slowing down my machine. I'll try it again in a few weeks) EditorConfig for VS Code GitHub Actions GitHub Repositories GitLens -- Git supercharged Hex Editor NuGet Package Manager Roslynator vscode-icons WSL I have other extensions but for different languages (rust, python, js, c++). I tend to disable all extensions by default (except Bookmarks and the git ones that are always on), and only enabled them on a per workspace basis. More on reddit.com
16
3
August 23, 2023Videos
32:48
Creating a Visual Studio Code Extension - YouTube
23:24
Full Tutorial | Build A VSCode Extension - YouTube
52:36
Build a Useful VS Code Extension in 50 Minutes (Step-by-Step) - ...
24:51
How To Create And Deploy A VSCode Extension - YouTube
35:56
Top 10 VS Code Extensions for Web Developers (And How to Use Them!)
20 Essential VS Code Extensions
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 ...
Opensource.com
opensource.com › article › 20 › 6 › vs-code-extension
How to write a VS Code extension | Opensource.com
Next, look at src/extension.ts, which should look something like this: // The module 'vscode' contains the VSCodium extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from "vscode"; const fs = require("fs"); const path = require("path"); // this method is called when your extension is activated // your extension is activated the very first time the command is executed export function activate(context: vscode.ExtensionContext) { // Use the console to output diagnostic information (console.log) and errors (console.error) // This li
GitHub
github.com › microsoft › vscode-extension-samples
GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API. · GitHub
You can read, play with or adapt from these samples to create your own extensions. ... You need to have node and npm installed on your system to run the examples. It is recommended to use the node version used for VS Code development itself which is documented here · git clone https://github.com/Microsoft/vscode-extension-samples
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%
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
Codesphere
codesphere.com › articles › build-your-own-vs-code-extension
Build your own VS Code extension
February 27, 2025 - 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: ...
Visual Studio Code
code.visualstudio.com › docs › getstarted › extensions
Use extensions in Visual Studio Code
November 3, 2021 - VS Code extension development: create and publish your own extension for VS Code.
Visual Studio Code
code.visualstudio.com › api › extension-guides › overview
Extension Guides | Visual Studio Code Extension API
November 3, 2021 - Here are the guides on the VS Code website, including their usage of the VS Code API and Contribution Points. Don't forget to refer to the UX Guidelines to learn the user interface best practices for creating extensions.
Microsoft Learn
learn.microsoft.com › en-us › shows › vs-code-livestreams › build-your-first-vs-code-extension
Build your first VS Code extension | Microsoft Learn
June 29, 2021 - Join Tyler as he goes from just an idea to a published extension on the VS Code Marketplace. You'll learn how to get started on building VS Code extensions, where to find resources, and how to publish them.VS Code extension API documentationSamplesThe extension we builtSource code for the ...
GitHub
microsoft.github.io › vscode-essentials › en › 10-create-an-extension.html
Create Your First Extension · Visual Studio Code - The Essentials
let disposable = vscode.commands.registerCommand('vscode-overflow.search', async () => { // Retrieve the selected text let query = vscode.window.activeTextEditor?.document.getText(vscode.window.activeTextEditor.selection); if (!query) { // Ask the user to enter a question query = await vscode.window.showInputBox({ placeHolder: 'question', prompt: 'Search on StackOverflow' }); } const uri = vscode.Uri.parse(`https://stackoverflow.com/search?q=${query}`); // Open the browser with the search await vscode.commands.executeCommand('vscode.open', uri); Now, press F5 to test your extension.
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.
Microsoft Learn
learn.microsoft.com › en-us › visualstudio › extensibility › starting-to-develop-visual-studio-extensions
Start developing Visual Studio extensions - Visual Studio (Windows) | Microsoft Learn
October 30, 2025 - You need to install the Visual Studio SDK in addition to Visual Studio in order to develop Visual Studio extensions. You can install the Visual Studio SDK as part of regular setup, or you can install it later on.
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 - 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); }
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.
Snyk
snyk.io › blog › modern-vs-code-extension-development-tutorial
Modern VS Code extension development tutorial: Building a secure extension | Snyk
October 2, 2023 - Return to your project's 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'; 5 6// This method is called when your extension is activated 7// Your extension is activated the very first time the command is executed 8export function activate(context: vscode.ExtensionContext) { 9 let disposable = vscode.commands.registerCommand('editor-tools.fillAddress',autofill.autofillMyAddress); 10 11 context.subscriptions.push(disposable); 12} 13 14// This method is called when your extension is deactivated 15export function deactivate() {}
Symflower
symflower.com › en › company › blog › 2023 › vscode-extension-development
How to write VS Code extensions: guide & best practices
February 8, 2023 - Extensions that implement developer tooling such as autocompletion or go-to-definition for a programming language should use the Language Server Protocol, where all of the functionality is implemented in an external program that communicates with VS Code (and other editors that support the standard) over RPC.
LogRocket
blog.logrocket.com › home › writing vs code extensions in javascript
Writing VS Code extensions in JavaScript - LogRocket Blog
June 4, 2024 - You can click the Add Configuration button to give you autocompletion assistance, select VS Code Extension Development as the option, and it will fill in the properties. Run the Hello World command from the Command Palette (Ctrl+Shift+P) and ...
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 bits below, mainly regarding two 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.registerCommand('hellovscode.helloWorld'.
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.
Top answer 1 of 3
2
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?
2 of 3
2
Hi, extension looks great (your readme game is on point). Any plans to support VSCodes way you need to handle translations and the various json files ? I am building DBCode Also built with Lit for the web components, icon fonts are a bit tricky, but that’s not VSCode specific. I can recommend vscode messenger for communication between the extension and the web views