Extension DEV (VSCode)

We’ll teach you the fundamental concepts for building extensions.- Your First Extension / digitalocean / youtube

see also Typescript

caption

Prerequesite

Node.js

For developing and building VS Code extensions, the community and tooling generally recommend using a current Node.js LTS version

flake.nix

{
  description = "Node.js + npm dev environment";

  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
  };

  outputs = { self, nixpkgs }:
    let
      system = "x86_64-linux"; # or aarch64-darwin, etc.
      pkgs = import nixpkgs { inherit system; };
    in {
      devShells.${system}.default = pkgs.mkShell {
        packages = [
          pkgs.nodejs_22            # includes npm
          pkgs.nodePackages.yo      # yo
			  ];

			# vsce for packaging .vsix file
			# only provided by npm
      shellHook = ''
        export PATH="$PWD/node_modules/.bin:$PATH"

        if [ ! -x node_modules/.bin/vsce ]; then
          echo "Installing vsce locally (npm)..."
          npm install --no-save @vscode/vsce
        fi
      '';
      };
    };
}

Yo

$ sudo npm install -g yo generator-code
# if using nix
$ nix develop
$ npm init -y
$ npm install --save-dev generator-code

see also about Integrating npm in shellHook

Start New

Scaffold a New Extension

$ yo code
  • What type of extension? → New Extension (TypeScript)
  • Extension name → my-first-extension
  • Identifier → press Enter
  • Description → optional
  • Initialize git repo? → your choice
  • Package manager → npm
my-first-extension/
├── src/
│   └── extension.ts      ← main logic
├── package.json          ← extension manifest
├── tsconfig.json
└── README.md

Version Issue

Everything goes well, but extension does not show.

Resolved:

It turned out that yo code was generating an extension with minimum version number too high for my vscode to run. Unfortunately it didn’t throw an error telling me this was the case.

Lower vscode version required in package.json

  "engines": {
    "vscode": "^1.108.0"
  },

so that it matches $code --version

Run the Extension (Development Mode)

  • Open the project in VS Code
  • Press F5

This launches a new VS Code window called the Extension Development Host.

Ext Configuration

exposed configuration in package.json

Custom Icon

Prepare the icon file:

  • Format: PNG
  • Recommended size: 128×128 px (square)
  • Background: Transparent or solid (both fine)
my-extension/
├── package.json
├── icon.png
└── src/

# package.json
{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "Does something cool",
  "version": "0.0.1",
  "publisher": "your-publisher-name",
  "icon": "icon.png",
  "engines": {
    "vscode": "^1.85.0"
  }
}

You’ll see the icon:

  • In the Extensions sidebar
  • In the extension details page
  • In the Marketplace (after publishing)

Documentation

Debug

Sharing Extension

You can share a VS Code extension without publishing it on the Microsoft Marketplace. The key is to distribute the extension as a .vsix file, which is the packaged format for VS Code extensions

$ vsce package

Publishing

Market Place

UsefullCode

Go to the Visual Studio Marketplace and log in.

  • Click “Create Publisher”.
  • Give it a unique name (publisher ID).
  • You’ll get a publisher ID, which you’ll use when packaging and publishing.
$ vsce login <publisher-name>
# paste Generated PTA

It will ask for a Personal Access Token (PAT).

The key distinction (this causes the confusion) There are three different things people often mix up:

  • Microsoft personal account (@outlook.com, @hotmail.com, etc.)
  • Azure subscription / Azure Portal account (portal.azure.com, resources, billing)
  • Azure DevOps organization ← this is what PATs belong to
    • so you must sign in to Azure Devops to be able to sign in a vscode Extension

A Personal Access Token is NOT tied to Azure (portal) or subscriptions. It is tied only to an Azure DevOps organization.

VS Codium

VS Code API

Extension samples

VSCode layout

caption

caption

Written on November 29, 2020, Last update on April 10, 2025
vscode-internal