{"id":13340402,"url":"https://github.com/robole/vscode-javascript-extensions","last_synced_at":"2025-05-06T17:34:50.527Z","repository":{"id":45288326,"uuid":"340947147","full_name":"robole/vscode-javascript-extensions","owner":"robole","description":"Example VS Code extensions written in JavaScript","archived":false,"fork":false,"pushed_at":"2024-02-05T16:31:09.000Z","size":10845,"stargazers_count":28,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T15:11:33.430Z","etag":null,"topics":["example-extensions","javascript","visual-studio-code","visual-studio-code-extension","vscode","vscode-api","vscode-example-extensions","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robole.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"funding.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"roboleary"}},"created_at":"2021-02-21T16:26:55.000Z","updated_at":"2024-12-12T17:04:54.000Z","dependencies_parsed_at":"2024-10-24T00:12:53.437Z","dependency_job_id":"54640037-b8fc-4acb-8c8b-8fe545f77920","html_url":"https://github.com/robole/vscode-javascript-extensions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fvscode-javascript-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fvscode-javascript-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fvscode-javascript-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fvscode-javascript-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robole","download_url":"https://codeload.github.com/robole/vscode-javascript-extensions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252734447,"owners_count":21796017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example-extensions","javascript","visual-studio-code","visual-studio-code-extension","vscode","vscode-api","vscode-example-extensions","vscode-extension"],"created_at":"2024-07-29T19:22:32.890Z","updated_at":"2025-05-06T17:34:49.585Z","avatar_url":"https://github.com/robole.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n    \u003cimg align=\"center\" alt=\"The VS Code logo is surrounded by a plus symbol and an arc\" src=\"_img/logo.png\" width=\"200\"\u003e\n  \u003cbr\u003e\n\t\u003cbr\u003e\n  VS Code Extension Examples\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eExample VS Code extensions written in JavaScript\u003c/h4\u003e\n\u003cbr\u003e\n\nThe VS Code docs [examples](https://github.com/microsoft/vscode-extension-samples) are written in TypeScript. The purpose of this repo is to provide clear, simple JavaScript alternatives to these.\n\nEach folder contains a complete extension that explains one topic from the [VS Code API](https://code.visualstudio.com/api/references/vscode-api) or VS Code's [Contribution Points](https://code.visualstudio.com/api/references/contribution-points).\n\nYou can expect the following from each example:\n- An explanation of its functionality.\n- An animated image or screenshot demonstrating its usage.\n- Listing of used VS Code API and Contribution Points.\n- Link to a guide on VS Code website, if it has one.\n\n**You can read this guide [Writing VS Code extensions in JavaScript](https://blog.logrocket.com/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.\n\n## Prerequisites\n\nYou need to have [Node](https://nodejs.org/en/) and [NPM](https://www.npmjs.com/) installed on your system to run the examples. It is recommended to use the Node version used for VS Code which is documented [here](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites). I use node v15 and have had no issues.\n\n\u003cu\u003eNo dev dependencies are required for building extensions.\u003c/u\u003e By default, Node and the VS Code API is available to use in an extension.\n\n## Usage\n\n1. Clone this repo. Run `git clone https://github.com/robole/vscode-extension-examples` on the command-line.\n1. Open a specific extension example folder in VS Code. You can run `code \u003cexample-folder\u003e` on the command-line.\n1. Run `npm install` in the terminal to install all node dependencies for the extension. Most of these examples do not require any dependencies.\n1. Launch the extension. If there is an existing configuration in `.vscode/launch.json`, you can press `F5` (or select `Run \u003e 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.\n\n## Getting Started\n\nIn the article [Writing VS Code extensions in JavaScript](https://blog.logrocket.com/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](helloworld-minimal) example featured here.\n\nThe [Hello World Minimal](helloworld-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.\n\n## Examples\n\n\u003c!-- TOC --\u003e\nList:\n1. [Codelens](#codelens)\n1. [Decorator](#decorator)\n1. [Document Editing](#document-editing)\n1. [Hello World Minimal](#hello-world-minimal)\n1. [Hover Provider](#hover-provider)\n1. [Progress](#progress)\n1. [Quickpick Simple](#quickpick-simple)\n1. [Quickpick Advanced with Separator](#quickpick-advanced-with-separator)\n1. [Status Bar](#status-bar)\n1. [Treeview Simple](#treeview-simple)\n1. [Webview Simple](#webview-simple)\n\u003c!-- /TOC --\u003e\n\n### Codelens\n\n![screenshot](codelens/img/screenshot.png)\n\n- **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.\n- **API References**:\n\t- [`languages.registerCodeLensProvider`](https://code.visualstudio.com/api/references/vscode-api#languages.registerCodeLensProvider)\n\t- [`CodeLensProvider`](https://code.visualstudio.com/api/references/vscode-api#CodeLensProvider)\n- **Folder**: [codelens](/codelens).\n- **Command**: `Example: Show codelens`.\n- **Activation**: When the above command is run.\n\n### Decorator\n\n ![screenshot](decorator/img/screenshot.png)\n\n- **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.\n- **API References**:\n\t- [`TexEditor.setDecorations`](https://code.visualstudio.com/api/references/vscode-api#TextEditor.setDecorations)\n\t- [`window.createTextEditorDecorationType`](https://code.visualstudio.com/api/references/vscode-api#window.createTextEditorDecorationType)\n- **Folder**: [decorator](/decorator).\n- **Command** : Not applicable.\n- **Activation**: Runs on startup.\n\n### Document Editing\n\n- **Description**: Makes changes to text in a document (of the active text editor). The examples reverses selected text.\n- **API References**:\n\t- [`window.activeTextEditor`](https://code.visualstudio.com/api/references/vscode-api#window.activeTextEditor)\n\t- [`TextDocument.getText`](https://code.visualstudio.com/api/references/vscode-api#TextDocument.getText)\n\t- [`TextEditor.edit`](https://code.visualstudio.com/api/references/vscode-api#TextEditor.edit)\n- **Folder**: [document-editing](/document-editing).\n- **Command**: `Example: Reverse Selected Text`.\n- **Activation**: When the above command is run.\n\n### Hello World Minimal\n\n ![screenshot](helloworld-minimal/screenshot.png)\n\n- **Description**: Basic example that shows an information message that says \"Hello World!\". It pop ups in the bottom right corner.\n- **API References**:\n\t- [`window.showInformationMessage`](https://code.visualstudio.com/api/references/vscode-api#window.showInformationMessage)\n- **Folder**: [helloworld-minimal](/helloworld-minimal).\n- **Command** :`Example: Hello World`.\n- **Activation**: When the above command is run.\n\n### Hover Provider\n\n ![screenshot](hover-provider/img/screenshot.png)\n\n- **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.\n- **API References**:\n\t- [`vscode.languages.registerHoverProvider`](https://code.visualstudio.com/api/references/vscode-api#languages.registerHoverProvider)\n- **Folder**: [hover-provider](/hover-provider).\n- **Command** : None.\n- **Activation**: When a JavaScript file is opened. Hover over a word in the file to see the hover popup.\n\n### Progress\n\n![screenshot](progress/img/screenshot.png)\n\n- **Description**: Show progress message for a running task. It pop ups in the bottom right corner.\n- **API References**:\n\t- [`window.withProgress`](https://code.visualstudio.com/api/references/vscode-api#window.withProgress)\n- **Folder**: [progress](/progress).\n- **Command**: `Example: Show Progress`.\n- **Activation**: When the above command is run.\n\n### Quickpick Simple\n\n#### Single Selection Quickpick\n\n![screenshot](quickpick-simple/img/basic-screenshot.png)\n\n- **Description**: A quickpick is a dropdown combobox that is opened in the Command Palette. This is allows you to select a single item.\n- **Command**: `Example: Show Basic Quickpick`.\n- **Activation**: When the above command is run.\n\n#### Multiple Selection Quickpick\n\n![screenshot](quickpick-simple/img/multi-screenshot.png)\n\n- **Description**: A quickpick is a dropdown combobox that is opened in the Command Palette. This example shows the ability to select multiple items.\n- **Command**: `Example: Show Multi Quickpick`.\n- **Activation**: When the above command is run.\n\nReferences:\n- **API References**:\n\t- [window.showQuickPick](https://code.visualstudio.com/api/references/vscode-api#window.showQuickPick)\n\t- [QuickPickOptions](https://code.visualstudio.com/api/references/vscode-api#QuickPickOptions)\n- **Folder**: [quickpick-simple](/quickpick-simple).\n\n### Quickpick Advanced with Separator\n\n![screenshot](quickpick-advanced-separator/img/demo.png)\n\n- **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`.\n- **API References**:\n\t- [window.createQuickPick](https://code.visualstudio.com/api/references/vscode-api#window.createQuickPick)\n\t- [QuickPickItem](https://code.visualstudio.com/api/references/vscode-api#QuickPickItem)\n\t- [QuickPickItemKind](https://code.visualstudio.com/api/references/vscode-api#QuickPickItem)\n\t- [QuickPickOptions](https://code.visualstudio.com/api/references/vscode-api#QuickPickOptions)\n- **Folder**: [quickpick-advanced-separator](/quickpick-advanced-separator).\n- **Command**: `Example: Show Advanced Quickpick with Separator`.\n- **Activation**: When the above command is run.\n\n### Status Bar\n\n![screenshot](statusbar/img/screenshot.png)\n\n- **Description**: Add item to status bar (the bar at the very bottom of the window). Clicking on the item executes a command.\n- **API References**:\n\t- [`window.createStatusBarItem`](https://code.visualstudio.com/api/references/vscode-api#window.createStatusBarItem)\n- **Folder**: [statusbar](/statusbar).\n- **Command**: None.\n- **Activation**: Whenever VS Code is open.\n\n### Treeview Simple\n\n![screenshot](treeview-simple/img/screenshot.png)\n\n- **Description**: A simple example of a treeview that shows a list of users. It is added to the **Explorer** view container.\n- **API References**:\n\t- [window.createTreeView](https://code.visualstudio.com/api/references/vscode-api#window.createTreeView)\n\t- [TreeView](https://code.visualstudio.com/api/references/vscode-api#TreeView)\n\t- [TreeItem](https://code.visualstudio.com/api/references/vscode-api#TreeItem)\n\t- [TreeDataProvider](https://code.visualstudio.com/api/references/vscode-api#TreeDataProvider)\n- **Official Guide**: The [Treeview guide](https://code.visualstudio.com/api/extension-guides/treeview) covers a more complicated example.\n- **Folder**: [treeview-simple](/treeview-simple).\n- **Command**: None.\n- **Activation**: Whenever VS Code starts up.\n\n### Webview Simple\n\n![screenshot](webview-simple/img/screenshot.png)\n\n- **Description**: A simple example of a webview.\n- **API References**:\n\t- [`window.createWebviewPanel`](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)\n- **Official Guide**: [Webview guide](https://code.visualstudio.com/api/extension-guides/webview) covers a more complicated example.\n- **Folder**: [webview-simple](/webview-simple).\n- **Commands**:\n\t- `Cat Coding: Start cat coding session`: Open the webview.\n\t- `Cat Coding: Do some refactoring`: Make a refactor event to change content of webview.\n- **Activation**: When one of the commands above is executed.\n\n## Make a contribution\n\nIf 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.\n\nI refactored some of some examples from [https://github.com/microsoft/vscode-extension-samples](https://github.com/microsoft/vscode-extension-samples). You could do the same if you wish.\n\n## Show appreciation\n\nYou can show your appreciation by [buying me a coffee or sponsoring me](https://ko-fi.com/roboleary).\n\nYou can star the repo to help others find it. 🌟\n","funding_links":["https://ko-fi.com/roboleary"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Fvscode-javascript-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobole%2Fvscode-javascript-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Fvscode-javascript-extensions/lists"}