What is VS Code Language Server Protocol (LSP)?

The Language Server Protocol (LSP) is a protocol introduced by VS Code that separates editor functionality from specific language implementations, enabling intelligent features like code completion, go to definition, error checking, and more.

LSP Architecture

LSP uses a client-server architecture:

• Client: VS Code editor, responsible for UI and user interaction
• Server: Language server, responsible for language-specific analysis functionality

The two communicate via JSON-RPC protocol.

Core Features

Code Completion

typescript
// Client request
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "textDocument/completion",
  "params": {
    "textDocument": { "uri": "file:///path/to/file.ts" },
    "position": { "line": 5, "character": 10 }
  }
}

// Server response
{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "isIncomplete": false,
    "items": [
      {
        "label": "console",
        "kind": 3,
        "detail": "any",
        "documentation": "The console module..."
      }
    ]
  }
}

Go to Definition

typescript
{
  "method": "textDocument/definition",
  "params": {
    "textDocument": { "uri": "..." },
    "position": { "line": 0, "character": 0 }
  }
}

Hover

typescript
{
  "method": "textDocument/hover",
  "params": {
    "textDocument": { "uri": "..." },
    "position": { "line": 0, "character": 0 }
  }
}

Diagnostics

Server actively pushes error and warning information:

typescript
{
  "method": "textDocument/publishDiagnostics",
  "params": {
    "uri": "file:///path/to/file.ts",
    "diagnostics": [
      {
        "range": { "start": { "line": 0, "character": 0 }, "end": { "line": 0, "character": 5 } },
        "severity": 1,
        "message": "Cannot find name 'foo'"
      }
    ]
  }
}

LSP in VS Code Extensions

Creating a Language Server Extension

1. Install Dependencies

bash
npm install vscode-languageclient --save

1. Configure package.json

json
{
  "contributes": {
    "languages": [{
      "id": "mylang",
      "aliases": ["My Language", "mylang"],
      "extensions": [".mylang"]
    }],
    "grammars": [{
      "language": "mylang",
      "scopeName": "source.mylang",
      "path": "./syntaxes/mylang.tmLanguage.json"
    }]
  },
  "activationEvents": [
    "onLanguage:mylang"
  ]
}

1. Implement Client

typescript
import * as vscode from 'vscode';
import { LanguageClient, LanguageClientOptions } from 'vscode-languageclient';

let client: LanguageClient;

export function activate(context: vscode.ExtensionContext) {
  const serverOptions = {
    command: 'node',
    args: [context.asAbsolutePath('server/out/server.js')]
  };

  const clientOptions: LanguageClientOptions = {
    documentSelector: [{ scheme: 'file', language: 'mylang' }],
    synchronize: {
      configurationSection: 'mylang'
    }
  };

  client = new LanguageClient(
    'mylang',
    'My Language Server',
    serverOptions,
    clientOptions
  );

  client.start();
}

Common Language Servers

• TypeScript: vscode-typescript-next
• Python: python-language-server (Pylance)
• Go: gopls
• Rust: rust-analyzer
• Java: jdt.ls

LSP Advantages

1. Cross-editor support: Same language server can be used for multiple editors
2. Decoupling: Editor and language implementation are separated
3. Performance optimization: Language server can be optimized independently
4. Extensibility: Easy to add new language features

Performance Optimization

Lazy Initialization

typescript
const clientOptions: LanguageClientOptions = {
  documentSelector: [{ scheme: 'file', language: 'mylang' }],
  initializationOptions: {
    deferInitialization: true
  }
};

Incremental Analysis

Only analyze changed parts of files, not the entire project.

Important Notes

• Language servers should properly handle concurrent requests
• Implement cancellation mechanism to avoid resource waste
• Provide clear error messages
• Consider memory usage and performance
• Support workspace configuration