@marimo-team/codemirror-languageserver NPM

CodeMirror 6 Language Server Protocol (LSP) Plugin

A powerful LSP client plugin for CodeMirror 6 that brings IDE-like features to your editor.

This is a fork of FurqanSoftware/codemirror-languageserver with additional features and modernization.

Features

🔍 Code Completion - Intelligent autocompletion with support for snippets
💡 Hover Information - Rich documentation on hover
⚠️ Diagnostics - Real-time error checking and warnings
🔄 Code Actions - Quick fixes and refactoring suggestions
🏷️ Symbol Renaming - Smart symbol renaming across files
🎯 Go to Definition - Jump to symbol definitions
🎨 Markdown Support - Rich formatting in hover tooltips and documentation

Installation

npm install @marimo-team/codemirror-languageserver
# or
pnpm add @marimo-team/codemirror-languageserver
# or
yarn add @marimo-team/codemirror-languageserver

Usage

import { languageServer } from '@marimo-team/codemirror-languageserver';
import { EditorState, EditorView } from '@codemirror/basic-setup';
import { WebSocketTransport } from '@open-rpc/client-js';

// Create a WebSocket transport
const transport = new WebSocketTransport('ws://your-language-server-url');

// Configure the language server plugin
const ls = languageServer({
  transport,
  rootUri: 'file:///',
  documentUri: 'file:///path/to/your/file',
  languageId: 'typescript', // Or any other language ID supported by your LSP

  // Optional: Customize keyboard shortcuts
  keyboardShortcuts: {
    rename: 'F2',                // Default: F2
    goToDefinition: 'ctrlcmd',   // Ctrl/Cmd + Click
  },

  // Optional: Allow HTML content in tooltips
  allowHTMLContent: true,
});

// Create editor with the LSP plugin
const view = new EditorView({
  state: EditorState.create({
    doc: 'Your initial content',
    extensions: [
      // ... other extensions ...
      ls
    ]
  }),
  parent: document.querySelector('#editor')
});

Keyboard Shortcuts

F2 - Rename symbol under cursor
Ctrl/Cmd + Click - Go to definition
Ctrl/Cmd + Space - Trigger completion manually

Advanced Configuration

Sharing Client Across Multiple Instances

import { LanguageServerClient } from '@marimo-team/codemirror-languageserver';

const client = new LanguageServerClient({
  transport,
  rootUri: 'file:///',
  workspaceFolders: [{ name: 'workspace', uri: 'file:///' }]
});

// Use in multiple editors
const ls1 = languageServerWithClient({
  client,
  documentUri: 'file:///file1.ts',
  languageId: 'typescript'
});

const ls2 = languageServerWithClient({
  client,
  documentUri: 'file:///file2.ts',
  languageId: 'typescript'
});