Skip to content

Your First Volar Language Server

In this guide, we will create a simple Volar language server and VS Code client. To keep things simple, it will look suspiciously like HTML, albeit with one twist: Only one <style> tag will be allowed. We’ll call it HTML1.

💡 Interested in seeing the final product? Check out the starter project on GitHub.

Prerequisites

Getting Started

We’ll first create a new project directory and initialize a new Node.js project.

Terminal window
# create a new project with npm
npm init

In order to be able to have both the language server and the VS Code client in the same repository, a common pattern for language servers, we’ll create a new packages directory that will contain both parts, this is effectively known as a monorepo.

Terminal window
# create a new monorepo project with npm
npm init -w ./packages/server
npm init -w ./packages/client

The client

Since this guide mainly focuses on creating a server we’ll start by creating the client so that we can get that out of the way. The client will be a VS Code extension, which necessitate a package.json with a few specific fields. As such, update your package.json to look like this:

{
"name": "client",
"displayName": "HTML1 Client",
"description": "A VS Code extension for HTML1.",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"activationEvents": ["onLanguage:html1"],
"main": "./src/extension.js",
"contributes": {
"languages": [
{
"id": "html1",
"extensions": [".html1"]
}
]
}
}

We’ll also be installing a few dependencies from Volar and VS Code. Run the following command from the packages/client folder to install them:

Terminal window
# Installing dependencies with npm
npm install @volar/language-server @volar/vscode vscode-languageclient ../server