Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ds-language-serverNew to Visual Studio Code? Get it now.
ds-language-server

ds-language-server

DS Language Server

|
656 installs
| (1) | Free
A language service for Design System components
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Design System Language Service

VSCode extension for Design System using LSP https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

Functionality

This Language Server works for scss/sass or html/jsx file. It has the following language features:

  • Completions
  • Diagnostics regenerated on each file change or configuration change
  • Hover information

It also includes an End-to-End test.

Structure

.
├── client // Language Client
│   ├── src
│   │   ├── test // End to End tests for Language Client / Server
│   │   └── extension.ts // Language Client entry point
├── package.json // The extension manifest.
└── server // Language Server
│   └── src
│   │   ├── interface // TS Types
│   │   └── utils // Util functions
│   │   └── server.ts // Language Server entry point

Running the Extension

  • Run npm install in this folder. This installs all necessary npm modules in both the client and server folder
  • Open VS Code on this folder.
  • Press Ctrl+Shift+B to compile the client and server.
  • Switch to the Debug viewlet.
  • Select Launch Client from the drop down.
  • Run the launch config.
  • If you want to debug the server as well use the launch configuration Attach to Server
  • In the [Extension Development Host] instance of VSCode, open a document in 'scss' or 'sass' language mode.
    • Enter text content such as theme('color.'). The extension will emit completion for this token.
    • Enter text content such as theme('color.error'). The extension will emit diagnostics error because 'error' not exists in color token.
    • Enter text content such as theme('color.background.primary') and hover to the text. The extension will show the value of the token.
  • In the [Extension Development Host] instance of VSCode, open a document in 'html' or 'jsx' language mode.
    • Enter text content such as <apollo- The extension will emit completion for this component.
    • Press ctrl + space or press any letter, the extension will give all properties from this component.
    • Press ctrl + space or press any letter, the extension will give all values from this properties.

Extension configuration

VSCode config .vscode/settings.json

{
  "dsLanguageServer.maxNumberOfOccurrences": 10000,
  "dsLanguageServer.trace.server": "verbose"
}
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft