Try in VS Code!

Embedded Programming Languages

Visual Studio Code provides rich language features for programming languages. As you have read in the Language Server extension guide, you can write language servers to support any programming language. However, it involves more effort to enable such support for embedded languages.

Today, there are an increasing number of embedded languages, such as:

  • JavaScript and CSS in HTML
  • JSX in JavaScript
  • Interpolation in templating languages, for example Vue, Handlebars and Razor
  • HTML in PHP

This guide focuses on implementing language features for embedded languages. If you are interested in providing syntax highlighting for embedded languages, you can find information in the Syntax Highlight guide.

This guide includes two samples that illustrate two approaches to build such a language server: Language Services and Request Forwarding. We'll review both samples and conclude with each approach's pros and cons.

Source code for both samples can be found at:

Here's the embedded language server we'll be building:

sample

Both samples contribute a new language, html1, for illustration purpose. You can create a file .html1 and test the following functionalities:

  • Completions for HTML tags
  • Completions for CSS in , the HTML language server uses the CSS language service to provide CSS completions.

Let's examine the lsp-embedded-language-service sample, a simplified version of the HTML language server that implements auto-completion for HTML and CSS, and diagnostic errors for CSS.

Language Services sample

Note: This sample assumes knowledge of the Programmatic Language Features topic and the Language Server extension guide. The code builds on top of lsp-sample.

The source code is available at microsoft/vscode-extension-samples.

Compared to the lsp-sample, the client-side code is the same.

As mentioned above, the server breaks down the document into different language regions to handle the embedded content.

Here is a simple example:

<div>div>
<style>.foo { }style>

In this case, the server detects the