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.
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/JavaScriptESLintInitializationOptions- ESLintClangdInitializationOptions- 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.