Visual Studio Code, Part 3: Implementing Your Own Extensions
The concept of Visual Studio Code is extensibility. In addition to ready-made extensions that users only have to install, self-made extensions can also be implemented as plug-ins. The two previous parts of the series have shown that Visual Studio Code is a versatile editor. Originally intended as a pure support for web development, Visual Studio Code does a lot more nowadays. The editor owes a large part of its functionality and flexibility to the extensions. Part 2 of the series of articles showed how the Extension Manager and the Extension Marketplace can be used to find, install and manage extensions – this works without any problems for existing ones.
If there is no extension for a special requirement, new extensions can be written for Visual Studio Code. Part 3 now finally explains what is necessary for creating your own extensions and what scope they open up. The focus is on the range of extensions, their implementation and publication as well as the case study of the language server, if extensive adjustments to the support of programming languages in Visual Studio are planned.
What possibilities extensions offer
Visual Studio Code offers a whole range of options for expanding the development environment in a meaningful way. When creating a new extension, it is not always easy to find the specific contribution point or the appropriate API. A contribution point is a JSON declaration that a Visual Studio Code extension has to make in the package.json in order to indicate that the relevant area is being extended by VS Code.
The package.json must be available for each extension and is therefore called Extension Manifest. This includes information such as the name and version number of the extension and the supported versions of VS Code, as well as the license used. An extension can be linked to the breakpoints, commands, debuggers or supported programming languages via the contribution points. The VS Code API is a set of JavaScript APIs that can be called in a separate extension for VS Code – for example to register a new command. The documentation provides an overview of all VS Code APIs.
These two technical anchor points are central to the extensions in VS Code. With their help it is possible to register commands, configurations or keyboard shortcuts. Saving data in the workspace, displaying notifications or calling up selection dialogs are also classic tasks of an extension. Their design elements such as the colors of the user interface (UI), syntax highlighting or the file icons used can also be adapted.
Language extensions and servers
When it comes to language functions, a distinction must be made between declarative and programmatic features. Both belong to the category of Language Extensions, which provide support for editing programming languages and dialects in VS Code. The language functions can be created declaratively. There are also language-specific configuration files that each cover a language or dialect such as HTML, CSS and TypeScript. This form of extension has access to syntax highlighting, the completion of snippets, the matching of brackets and the automatic indentation of code (indentation). The programmatic language features go a step further and enable features like autocomplete, checking for errors, and the ability to jump to a declaration. Often these functions are provided by language servers.
They are more complex to implement, but also offer broader application options. In the case of VS Code, a language server that uses the Language Server Protocol is a specially implemented analysis tool that runs in a separate process. The tool is also often implemented in the native programming language, for which the Language Server provides services. For example, a language server that teaches PHP to support PHP, with functions such as auto-completion, diagnostic functions and formatting, is already included in the programming language.
In addition, the workbench can be expanded in VS Code, i.e. the higher-level user interface of the development environment – examples of this are the title bar, the sidebar or information in the status bar. In this way, new context menus and actions can be integrated, as well as the rendering of additional content via the WebView API. So-called debugger extensions also allow you to hook into the debugging UI and its functionality. The enhancements for debugging are among the most extensive adjustments. If you don’t have to have your own debugger directly, the VS-Code API offers a set of calls to implement functions based on the existing VS-Code debugger. This enables automations, among other things, to be implemented.
To home page
