File Structure of a typical Volar project

This guide will show you how a Volar project is organized and what the different files in your project do.

Files and directories

Due to needing multiple packages to run the language server and VS Code extension, a Volar project will typically live in a monorepo. This is not a requirement, but it is the most common setup and recommended way to set up a Volar project.

Server (packages/language-server)

All files related to the language server are located in the packages/language-server directory.

• package.json — Configuration for the language server package, including its dependencies and main entry point.
• bin/server.js — The entry point for the language server binary. This file is responsible for starting the language server.
• src/index.ts — Main file for the language server, setting up the server and its capabilities.
• src/language.ts — Defines the language capabilities and provides methods for handling the project’s files.

Client (packages/vscode)

All files related to the VS Code extension are located in the packages/vscode directory.

• package.json — Configuration for the VS Code extension package, including its dependencies, main entry point, and activation events.
• src/extension.ts — Main file for the VS Code extension, setting up the client and activating features.
• scripts/build.js — Script for building the VS Code extension.

Full example

Your Volar project will, in most cases, look similar to the following:

• Directory.vscode/

  • launch.json
  • tasks.json
• Directorypackages/

  • Directorylanguage-server/

    • Directorybin/

      • server.js
    • Directorysrc/

      • index.ts
      • …
    • package.json
    • tsconfig.json
  • Directoryvscode/

    • Directoryscripts/

      • build.js
    • Directorysrc/

      • extension.ts
      • …
    • .vscodeignore
    • package.json
    • tsconfig.json
• package.json
• tsconfig.json

Some generic files such as README.md were omitted for brevity.