introduce

Having learned some basic usage of the Visual Studio Code plug-in API in the Hello World example of Get Started, it’s time to take it a step further and learn how to create some more useful plug-ins. In our previous article, we provided an overview of what a plug-in can do. We’ll start this article in detail with a series of guides and Code examples to show you how to use VS Code apis

In each of the guides and sample code, we provide the following:

  • Complete comments for the source code
  • Provide the use of a sample plug-in in the form of a GIF or static diagram
  • Running instructions for the sample plug-in
  • Use ofVS Code APIThe list of
  • Use ofContribution PointsThe list of
  • The relationship between the real plug-in and the sample
  • An explanation of API concepts

General plug-in guide & Examples

We will cover a series of development guidelines and examples, including the use of VS Code apis and Contribution Points, which are listed below:

guide

guide API & Contribution
Command commands
Color Theme contributes.themes
File Icon Theme contributes.iconThemes
Product Icon Theme contributes.productIconThemes
Tree View window.createTreeView



window.registerTreeDataProvider



TreeView



TreeDataProvider



contributes.views



contributes.viewsContainers
Webview window.createWebviewPanel



window.registerWebviewPanelSerializer
Custom Editors window.registerCustomEditorProvider



CustomTextEditorProvider



contributes.customEditors
Virtual Documents workspace.registerTextDocumentContentProvider



commands.registerCommand



window.showInputBox
Task Provider tasks.registerTaskProvider



Task



ShellExecution



contributes.taskDefinitions
Source Control workspace.workspaceFolders



SourceControl



SourceControlResourceGroup



scm.createSourceControl



TextDocumentContentProvider



contributes.menus
Debugger Extension contributes.breakpoints



contributes.debuggers



debug
Markdown Extension markdown.previewStyles



markdown.markdownItPlugins



markdown.previewScripts
Custom Data Extension contributes.html.customData



contributes.css.customData

The sample

See the sample plug-in repository for the source code for the examples

The sample API & Contribution
Webview Sample window.createWebviewPanel



window.registerWebviewPanelSerializer
Status Bar Sample window.createStatusBarItem



StatusBarItem
Tree View Sample window.createTreeView



window.registerTreeDataProvider



TreeView



TreeDataProvider



contributes.views



contributes.viewsContainers
Task Provider Sample tasks.registerTaskProvider



Task



ShellExecution



contributes.taskDefinitions
Multi Root Sample workspace.getWorkspaceFolder



workspace.onDidChangeWorkspaceFolders
Completion Provider Sample languages.registerCompletionItemProvider



CompletionItem



SnippetString
File System Provider Sample workspace.registerFileSystemProvider
Editor Decoractor Sample TextEditor.setDecorations



DecorationOptions



DecorationInstanceRenderOptions



ThemableDecorationInstanceRenderOptions



window.createTextEditorDecorationType



TextEditorDecorationType



contributes.colors
I18n Sample -
Terminal Sample window.createTerminal



window.onDidChangeActiveTerminal



window.onDidCloseTerminal



window.onDidOpenTerminal



window.Terminal



window.terminals
Vim Sample commands



StatusBarItem



window.createStatusBarItem



TextEditorCursorStyle



window.activeTextEditor



Position



Range



Selection



TextEditor



TextEditorRevealType



TextDocument
Source Control Sample workspace.workspaceFolders



SourceControl



SourceControlResourceGroup



scm.createSourceControl



TextDocumentContentProvider



contributes.menus
Commenting API Sample -
Document Editing Sample commands

Sample language plug-in

The sample guide
Snippet Sample [Snippet Guide]
Language Configuration Sample [Language Configuration Guide]
LSP Sample [Language Server Extension Guide]
LSP Log Streaming Sample -
LSP Multi Root Server Sample language-client–language-server

Related articles

  • VS Code Plug-in Development Tutorial (1) Overview

  • VS Code plug-in Development Tutorial (2

  • VS Code Plug-in Development Tutorial (3

  • VS Code Plug-in Development Tutorial (4

  • VS Code plug-in development tutorial (5) Using Command

  • VS Code Plugin development Tutorial (6) Color Theme overview

  • VS Code plug-in development tutorial (7) Tree View

  • VS Code Plug-in Development Tutorial (8) Webview

  • Build a Custom Editor

  • VS Code Plug-in Development Tutorial (10

  • Language Server Extension Guide Language Server Extension Guide