VS Code Extension Examples
Extension Basics
We have two walkthroughs that cover many of the core concepts - start with these:
- Your First Extension - Explains the core extensibility concepts with a walkthrough.
- Word Count Extension - Another walkthrough building on the last.
Sample Extensions
Sample | Description | Type | In Marketplace |
---|---|---|---|
Word Count | Adds a word count to the status bar for Markdown files that updates on editing events. We have a walkthrough on how this was created. | Extension | Y |
MDTools | Work with selections and update based on common text processing e.g. ToUpper, HTMLEncode, ... | Extension | Y |
Decorator | Shows how to decorate editor text with a border, colors, and a custom cursor as well as add an overview ruler highlight. | Extension | N |
Preview Html | Shows how to create virtual documents together with the vscode.previewHtml command. |
Extension | Y |
Document Content Provider | Shows how to use API commands and how to create virtual documents using the TextDocumentContentProvider -API. |
Extension | Y |
TSLint | Lint your TypeScript files based on TSLint | Language Server | Y |
Mock Debugger | Helps you build and test a debugger. | Debuggers | Y |
Go Language Support | Rich language support for Go Lang - IntelliSense, Debug, Peek, Rename, Syntax, ... | Extension | Y |
Tree Data Provider | Shows how to use TreeDataProvider API and contribute a custom view to VS Code |
Extension | N |
Tools to Help you build an Extension
Tool | Purpose |
---|---|
Extension Generator | To help you getting started implementing an extension, we have a Yeoman generator. This creates all the initial settings you need for the development environment to work well and includes the API Typing files and any relevant modules. You can find the generator source code here. |
Debugging Extensions | We have worked hard to provide an easy way to develop, debug and locally test your extensions. |
Publishing Tool | Once you have a working extension, it's time to share it in the extension Marketplace. We have a simple command line tool for this. You can find the source code here. |
Tutorial samples
Tutorial | Description |
---|---|
Node.js | Final output of the Node.js Express tutorial. |
Next Steps
- Extension Marketplace - Learn more about VS Code's public extension Marketplace.