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

• Install VS Code’s Yeoman generator:��Ref:�https://yeoman.io/��https://www.npmjs.com/package/generator-code�

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

• Common:�commands, notifications, user input, system file picker …�
• Theming:�Source code + VS Code UI�
• Declarative Language Features:�bracket matching, auto-indentation ...�
• Programming Language Features:�Hovers, IntelliSense, Go to Definition …�
• Workbench Extensions:�additional options, new views ....�
• Debugging:�integrate specific debugger or runtime …��Ref:�https://code.visualstudio.com/api/extension-capabilities/overview������Ref:�https://code.visualstudio.com/api/extension-capabilities/overview

​

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

• VSCode Marketplace developer portal:�https://marketplace.visualstudio.com/manage��
• Azure DevOps portal:�https://azure.microsoft.com/en-gb/services/devops/

Samples

• Theming sample�
• Completion Provider sample�
• Snippet sample�
• LSP Sample��Ref:�https://github.com/Microsoft/vscode-extension-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

• Uses the CompletionItemProvider API.��Ref:�https://github.com/Microsoft/vscode-extension-samples/tree/master/completions-sample

​

Sample extensions - Snippet

• Uses the contributes.snippets contribution point.���Ref:�https://github.com/Microsoft/vscode-extension-samples/tree/master/snippet-sample

​

Sample extensions - Snippet

• File → Preferences → User Snippets��Select language and copy-paste snippets��OR��New Global Snippets file�

Ref: https://snippet-generator.app/�

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

• Set of editing features powered by the vscode.languages.* API.��Eg - hover, diagnostic, definition, formatting ...��Ref:�https://code.visualstudio.com/api/language-extensions/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/

​

​

• Ref:�https://github.com/Microsoft/vscode-languageserver-node�
• Guide:�https://code.visualstudio.com/api/language-extensions/language-server-extension-guide�

​

Sample extensions - LSP

• Flags occurrences of words that are ALL CAPS.�
• Code completion - ‘TypeScript’ and ‘JavaScript’.��Ref:�https://github.com/microsoft/vscode-extension-samples/tree/master/lsp-sample�

�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