Building VS Code extensions

Naman Sancheti


  • Setup
  • Anatomy of an extension
  • Codelab - Building ‘RxJS Buddy’
  • Publishing
  • Extension Capabilities & Restrictions
  • Sample extension - Theming
  • Sample extension - Autocomplete
  • Sample extension - Snippet
  • Sample extension - Language Server


File structure


  • package.json as Extension Manifest - mix of Node.js + VS Code fields.
  • Extension’s unique ID: <publisher>.<name>
  • main - entry point
    Eg - ./out/extension.js
  • activationEvents:
    onCommand, onLanguage, onDebug …



  • contributes
    commands, menus, languages , themes ...

  • engines.vscode - minimum version of VS Code API required

  • activate - executed when registered Activation Event happens.

  • deactivate - cleanup before deactivation happens.

Extension Capabilities

Extension Restrictions

  • No DOM access:
    Cannot write an extension applying custom CSS or adding an HTML element to VS Code UI.
  • Stability / Isolation

    Extension Host - Node.js process for loading and running extensions.

    prevents impact on:
    startup performance
    modifying / slowing down UI
  • Lazy loading - using activation events.

Codelab - Building ‘RxJS Buddy’

  • Clone repo:
  • Corresponding to each step, you will find a branch named 'step-stepNumber', which contains the completed code until the previous step.

    Eg: branch 'step-3' would contain the completed code from steps 1 and 2.
  • Starter code - master
  • Finished code - final


  • VS Code Extension Marketplace


    VSIX format

  • vsce - CLI tool for managing VS Code extensions

  • publisherId

Useful links


Samples - Theming

  • Two categories for colors:

    Workbench colors - Activity bar, Side bar, Status bar...

    Syntax colors - based on TextMate grammar / themes.

  • TextMate theme file - .tmTheme


Workbench colors

Syntax colors

Creating a new theme

Code theming

Blog on ‘Night Owl’ theme:

Sample extensions - Autocomplete

Sample extensions - Snippet

Sample extensions - Snippet

  • File → Preferences → User Snippets

    Select language and copy-paste snippets


    New Global Snippets file

Adding key bindings

Additional points:

  • $1, $2 etc … are tabstops. The number denotes the order in which they will be visited.

    $0 denotes the final cursor position.

    Multiple occurrences of the same tabstop are linked and updated in sync.

  • Placeholders are tabstops with values. We can also give a set of choices, which are prompted to the user.

Programmatic Language features

Language Server Protocol

  • Language servers are typically implemented in native programming languages, however VS Code has a Node.js runtime.
  • Language features can be resource intensive.
    Eg - linter => parse + build AST + analyze.
  • Language support for M languages in N editors, requires M * N work.
  • LSP standardizes communication b/w language tooling and editor.
    Therefore, LSP compliant language tooling ⇔ LSP compliant editor.
  • Language server implemented in any language + run in own process.


Sample extensions - LSP

That’s all folks! :)

Slides -

Twitter - @namans_26

Medium - @naman.sancheti

Email -

VSCode extensions - JSLovers - Google Slides