Docs · language server

Set up the language server

Install and connect Design Lasagna: Design System Language Server to the component, token, and utility manifests your team already publishes.

Choose your editor, connect a manifest, and check that its names appear in your code.

Step 1

Install an editor integration

VS Code

Install Design Lasagna: Design System Language Server from the Visual Studio Marketplace. Select Install Pre-Release or Switch to Pre-Release Version to get the current v0.2.0 build. The extension starts the server for supported web files; no separate npm install is needed. Minimum VS Code version is 1.90.

Zed

Registry submission awaiting review. There is no Zed registry install action yet. If you want to help develop or evaluate the integration before review completes, follow the repository’s optional development installation; it is not the public installation path. See PR #7741.

Other LSP clients

Compatible clients that can start an LSP over stdio can install the server locally (Node.js 20 or newer):

npm install --save-dev @designlasagna/ds-language-server@0.2.0
npx ds-language-server --stdio

Your client is responsible for launching that command and forwarding supported document language IDs. For additional settings, see the standalone server configuration reference.

Step 2

Connect manifests

Installed design-system packages are discovered from package.json fields named customElements and designSystem.tokens or designSystem.utilities. For local manifests, add ds.config.json at the workspace root:

{
  "sources": {
    "components": ["packages/components/dist/custom-elements.json"],
    "tokens": ["packages/tokens/dist/tokens.json"],
    "utilities": ["packages/css/dist/utilities.manifest.json"]
  }
}

Include only the source types you have. Explicit sources are merged with package discovery unless you set "discovery": { "enabled": false }.

Manifest references

See the v0.4 references for token manifests, component manifest extensions, and utility manifests, or start with the Schemas tool overview.

For lifecycle profiles and migration behavior, see the VS Code lifecycle reference or the standalone server configuration reference.

Raw v0.4 schemas are available for tokens, utilities, icons, CEM extensions, DTCG extensions, and lifecycle.

Native token and utility manifests select v0.4 automatically when schemaVersion is "0.4.0". CEM and DTCG lifecycle support is opt-in through lifecycle.profile in ds.config.json:

{
  "lifecycle": {
    "profile": "0.4"
  }
}

Step 3

Verify the connection

Open a file in the workspace—not an untitled file—and use a language enabled for the integration.
In CSS, type var(-- and look for token names from your manifest.
In HTML, start a custom-element tag, attribute, or utility name inside class="".
Hover a known item to confirm its source details. A deprecated item should also show lifecycle guidance when that metadata exists.

If suggestions are missing

Troubleshoot

Confirm ds.config.json is at the workspace root and every source path exists relative to it.
In VS Code, confirm the file uses one of the extension’s supported web language modes. Set dsLanguageServer.trace.server to messages, then inspect the Language Server output.
After changing configuration, package metadata, or manifests, reload the editor window if the new data is not picked up.
In Zed development installs, inspect the Language Server log and confirm the extension supports the document language.
For schema diagnostics, make sure the open token document is one of the discovered token source URIs.

Still stuck? Check the server README, then report an issue with editor, server version, config, language ID, and trace output.