Unlock VSCode’s Language Power: Build Custom Language Extensions & LSP Features

VSCode supports a vast range of programming languages through its extensible API. This guide introduces the capabilities VSCode offers for language support, including the languages.* API and the Language Server Protocol (LSP), and explains how to create language plugins.

VSCode Plugin Quick Start

A VSCode extension consists of configuration (manifest) and code. The manifest declares entry files, activation events, menus, shortcuts, etc. The core logic lives in the activate function, which runs when the declared activationEvents fire.

What Is a Language Plugin?

A language plugin provides editing and programming language support within VSCode. Features such as syntax highlighting, auto‑completion, bracket matching, and folding are delivered by these plugins, which rely on VSCode’s rich set of APIs.

Implementing Language Features

VSCode groups language features into two categories:

Declarative language features – defined via configuration files.

Programmatic language features – implemented by calling the vscode.languages.* API or by writing a Language Server that follows the LSP.

Declarative Features Example

Typical declarative features include:

Syntax highlighting

Snippet completion

Bracket matching and auto‑closing

Auto‑surrounding

Comment toggling

Indentation and folding

1. Syntax Highlighting

VSCode performs tokenization using TextMate grammars, assigning scopes to tokens (e.g., keyword.control.test). The theming step then maps these scopes to colors and styles via editor.tokenColorCustomizations. You can inspect scopes with the command Developer: Inspect Editor Tokens and Scopes.

{
  "keywords": {
    "patterns": [
      {
        "name": "keyword.control.test",
        "match": "\\b(if|else|while|for|return)\\b"
      }
    ]
  }
}

2. Snippets

Snippets accelerate coding by defining a prefix and a body with placeholders. Example snippet definition:

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
}

Programmatic Features with LSP

The Language Server Protocol decouples language logic from the editor. A client (the VSCode extension) sends JSON‑RPC requests to a server that performs static analysis and returns results such as completions, diagnostics, and definitions.

Typical LSP request format:

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "textDocument/didOpen",
  "params": { /* ... */ }
}

VSCode provides helper functions like vscode.languages.registerSelectionRangeProvider to expose LSP‑style capabilities.

Practical Example: Enhancing npm package.json

The example demonstrates how to add document links and hover information to package.json using the vscode-json-languageservice to parse the file into an AST, locate dependencies and devDependencies, and generate links to the corresponding package files or npm pages.

const result: vscode.DocumentLink[] = [];
const jsonDocument = jsonLanguageService.parseJSONDocument(document);
result.push(...doDependencyLink(jsonDocument, document, "dependencies"),
            ...doDependencyLink(jsonDocument, document, "devDependencies"));
return result;

Hover providers can display contextual information based on the AST node under the cursor.

vscode.languages.registerHoverProvider({ scheme: "file", pattern: "**/package.json" }, {
  async provideHover(document, position) {
    const jsonDoc = jsonLanguageService.parseJSONDocument(document);
    const node = jsonDoc.getNodeFromOffset(document.offsetAt(position));
    // Determine dependency type and return a Hover with details
  }
});

Conclusion

VSCode offers a comprehensive set of APIs for building language extensions, from simple declarative configurations to full‑featured Language Servers. By leveraging these tools, developers can create powerful, language‑agnostic plugins that enhance the editing experience across many languages.