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 or any compatible transport.

How It Works

Usage

npm i codemirror-languageserver

WebSockets transport

import { languageServer } from 'codemirror-languageserver';

const lsPlugin = languageServer({
	serverUri, // WebSocket server uri.
	rootUri: 'file:///',
	documentUri: `file:///${filename}`,
	languageId: 'cpp' // As defined at https://microsoft.github.io/language-server-protocol/specification#textDocumentItem.
});

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

Re using the same client

import { languageServer } from 'codemirror-languageserver';

const client = new LanguageServerClient({
	transport: new WebSocketTransport(serverUri),
	rootUri: 'file:///'
})

const firstView = new EditorView({
	state: EditorState.create({
		extensions: [
			// ...
			languageServerWithClient({
				client,
				documentUri: `file:///${secondFileName}`,
				languageId: 'cpp'
			}),
			// ...
		]
	})
});

const secondView = new EditorView({
	state: EditorState.create({
		extensions: [
			// ...
			languageServerWithClient({
				client,
				documentUri: `file:///${firstFileName}`,
				languageId: 'cpp'
			}),
			// ...
		]
	})
});

Custom transport

import { languageServer } from 'codemirror-languageserver';

const client = new LanguageServerClient({
	transport: new AwesomeCustomTransport(),
	rootUri: 'file:///'
})

const lsPlugin = languageServerWithClient({
	client,
	documentUri: `file:///${filename}`,
	languageId: 'cpp'
})

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

Contributing

Contributions are welcome.

Real World Uses

code-editor.mp4

Toph	Competitive programming platform

License

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