Language Server Plugin for CodeMirror 6

This plugin enables code completion, hover tooltips, and linter functionality by connecting a CodeMirror 6 editor with a language server over WebSocket.

How It Works

Features

code-editor.mp4

• ⌨️ Code Completion (w/ Resolve Support)
• 📚 Hover Documentation
• 🩺 Diagnostics
• 🔍 Go to Definition, Declaration, and Type Definition

Usage

npm i codemirror-languageserver

import { languageServer } from 'codemirror-languageserver';

const transport = new WebSocketTransport(serverUri);

var ls = languageServer({
    // WebSocket server uri and other client options.
    serverUri,
    rootUri: 'file:///',

    // Alternatively, to share the same client across multiple instances of this plugin.
    client: new LanguageServerClient({
        serverUri,
        rootUri: 'file:///',
    }),

    documentUri: `file:///${filename}`,
    languageId: 'cpp', // As defined at https://microsoft.github.io/language-server-protocol/specification#textDocumentItem.
});

var view = new EditorView({
    state: EditorState.create({
        extensions: [
            // ...
            ls,
            // ...
        ],
    }),
});

Using with Initialization Options

The plugin includes built-in TypeScript definitions for popular language servers:

• PyrightInitializationOptions - Python (Pyright)
• RustAnalyzerInitializationOptions - Rust (rust-analyzer)
• TypeScriptInitializationOptions - TypeScript/JavaScript
• ESLintInitializationOptions - ESLint
• ClangdInitializationOptions - C/C++ (Clangd)
• GoplsInitializationOptions - Go (Gopls)

Contributing

Contributions are welcome.

Real World Uses

• Toph: Competitive programming platform. Toph uses Language Server Plugin for CodeMirror 6 with its integrated code editor.

License

The library is available under the BSD (3-Clause) License.