robole / vscode-javascript-extensions

Example VS Code extensions written in JavaScript

VS Code Extension Examples

Example VS Code extensions written in JavaScript

The VS Code docs examples are written in TypeScript. The purpose of this repo is to provide clear, simple JavaScript alternatives to these.

Each folder contains a complete extension that explains one topic from the VS Code API or VS Code's Contribution Points.

You can expect the following from each example:

• An explanation of its functionality.
• An animated image or screenshot demonstrating its usage.
• Listing of used VS Code API and Contribution Points.
• Link to a guide on VS Code website, if it has one.

You can read this guide Writing VS Code extensions in JavaScript to get up and running quickly. It gives a clear overview of the important namespaces and breaks down some of the jargon of the API. It covers some of the examples from this repo.

Prerequisites

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 which is documented here. I use node v15 and have had no issues.

No dev dependencies are required for building extensions. By default, Node and the VS Code API is available to use in an extension.

Usage

1. Clone this repo. Run git clone https://github.com/robole/vscode-extension-examples on the command-line.
2. Open a specific extension example folder in VS Code. You can run code <example-folder> on the command-line.
3. Run npm install in the terminal to install all node dependencies for the extension. Most of these examples do not require any dependencies.
4. Launch the extension. If there is an existing configuration in .vscode/launch.json, you can press F5 (or select Run > Start Debugging from the main menu) to launch the extension in debug mode. If there is no launch config, open the main module (extension.js) and press F5. You will be prompted to select an Environment - select "VS Code Development Environment". A new VS Code Window will be opened with the extension loaded.

Getting Started

In the article Writing VS Code extensions in JavaScript, I start at the beginning and discuss how to set-up a project, and create the Hello World Minimal example featured here.

The Hello World Minimal example is the same as the boilerplate project the official guide use, but it may be easier to understand as I omit unnecessary details and code.

Examples

List:

1. Codelens
2. Decorator
3. Document Editing
4. Hello World Minimal
5. Hover Provider
6. Progress
7. Quickpick Simple
8. Quickpick Advanced with Separator
9. Status Bar
10. Treeview Simple
11. Webview Simple

Codelens

• Description: A codelens represents a command that is shown inline in source code. This example adds a codelens to the document for lines of text that begin with a number.
• API References:
  • languages.registerCodeLensProvider
  • CodeLensProvider
• Folder: codelens.
• Command: Example: Show codelens.
• Activation: When the above command is run.

Decorator

• Description: Demonstrates adding text decoration to particular parts of a document. In this case, every number is decorated with a blue border, and custom text is added to the popup when you hover over the number.
• API References:
  • TexEditor.setDecorations
  • window.createTextEditorDecorationType
• Folder: decorator.
• Command : Not applicable.
• Activation: Runs on startup.

Document Editing

• Description: Makes changes to text in a document (of the active text editor). The examples reverses selected text.
• API References:
  • window.activeTextEditor
  • TextDocument.getText
  • TextEditor.edit
• Folder: document-editing.
• Command: Example: Reverse Selected Text.
• Activation: When the above command is run.

Hello World Minimal

• Description: Basic example that shows an information message that says "Hello World!". It pop ups in the bottom right corner.
• API References:
  • window.showInformationMessage
• Folder: helloworld-minimal.
• Command :Example: Hello World.
• Activation: When the above command is run.

Hover Provider

• Description: Creates a hover popup for every word in javascript files. It executes a command to opens the Search sidebar searching for the word you hovered over in the workspace files.
• API References:
  • vscode.languages.registerHoverProvider
• Folder: hover-provider.
• Command : None.
• Activation: When a JavaScript file is opened. Hover over a word in the file to see the hover popup.

Progress

• Description: Show progress message for a running task. It pop ups in the bottom right corner.
• API References:
  • window.withProgress
• Folder: progress.
• Command: Example: Show Progress.
• Activation: When the above command is run.

Quickpick Simple

Single Selection Quickpick

• Description: A quickpick is a dropdown combobox that is opened in the Command Palette. This is allows you to select a single item.
• Command: Example: Show Basic Quickpick.
• Activation: When the above command is run.

Multiple Selection Quickpick

• Description: A quickpick is a dropdown combobox that is opened in the Command Palette. This example shows the ability to select multiple items.
• Command: Example: Show Multi Quickpick.
• Activation: When the above command is run.

References:

• API References:
  • window.showQuickPick
  • QuickPickOptions
• Folder: quickpick-simple.

Quickpick Advanced with Separator

• Description: A quickpick is a dropdown combobox that is opened in the Command Palette. This example shows how to create a quickpick with sections, with a horiztonal line (hard to see in my theme) and a left-aligned label. This is achieved by using a QuickPickItem with a kind of QuickPickItemKind.Separator.
• API References:
  • window.createQuickPick
  • QuickPickItem
  • QuickPickItemKind
  • QuickPickOptions
• Folder: quickpick-advanced-separator.
• Command: Example: Show Advanced Quickpick with Separator.
• Activation: When the above command is run.

Status Bar

• Description: Add item to status bar (the bar at the very bottom of the window). Clicking on the item executes a command.
• API References:
  • window.createStatusBarItem
• Folder: statusbar.
• Command: None.
• Activation: Whenever VS Code is open.

Treeview Simple

• Description: A simple example of a treeview that shows a list of users. It is added to the Explorer view container.
• API References:
  • window.createTreeView
  • TreeView
  • TreeItem
  • TreeDataProvider
• Official Guide: The Treeview guide covers a more complicated example.
• Folder: treeview-simple.
• Command: None.
• Activation: Whenever VS Code starts up.

Webview Simple

• Description: A simple example of a webview.
• API References:
  • window.createWebviewPanel
• Official Guide: Webview guide covers a more complicated example.
• Folder: webview-simple.
• Commands:
  • Cat Coding: Start cat coding session: Open the webview.
  • Cat Coding: Do some refactoring: Make a refactor event to change content of webview.
• Activation: When one of the commands above is executed.

Make a contribution

If you are interested in adding an example, feel free to make a Pull Request. I prefer simpler examples with clean code. If there is a simple example for a particular part of the API, a more advanced example is good also.

I refactored some of some examples from https://github.com/microsoft/vscode-extension-samples. You could do the same if you wish.

Show appreciation

You can show your appreciation by buying me a coffee or sponsoring me.

You can star the repo to help others find it. 🌟