Building VS Code extensions

Naman Sancheti

Agenda

  • 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

Setup

File structure

Anatomy

  • 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 …

    Ref:
    https://code.visualstudio.com/api/references/activation-events


Anatomy

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

    Ref:
    https://code.visualstudio.com/api/references/contribution-points
  • 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:
    https://github.com/namansancheti/rxjs-buddy.git
  • 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

Publishing

  • VS Code Extension Marketplace

    OR

    VSIX format

  • vsce - CLI tool for managing VS Code extensions






  • publisherId

Useful links

Samples

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

    Ref:
    https://code.visualstudio.com/api/extension-guides/color-theme

Workbench colors

Syntax colors

Creating a new theme

Code theming

Blog on ‘Night Owl’ theme:
https://css-tricks.com/creating-a-vs-code-theme/

Sample extensions - Autocomplete

Sample extensions - Snippet

Sample extensions - Snippet

  • File → Preferences → User Snippets

    Select language and copy-paste snippets

    OR

    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.

    Ref:
    https://microsoft.github.io/language-server-protocol/

Sample extensions - LSP


That’s all folks! :)

Slides - bit.ly/vscode-ext-jslovers

https://snippet-generator.app/

Twitter - @namans_26


Medium - @naman.sancheti


Email - naman.sancheti@gmail.com

VSCode extensions - JSLovers - Google Slides