@volar/language-server

What is @volar/language-server?

@volar/language-server is a language server implementation for Vue.js, providing rich language features such as auto-completion, diagnostics, and more. It is designed to work with the Language Server Protocol (LSP) to enhance the development experience in editors like VSCode.

What are @volar/language-server's main functionalities?

Auto-completion

This code sets up a basic language server with auto-completion capabilities. When the user types, the server will suggest 'HelloWorld' as a completion item.

const { createConnection, TextDocuments } = require('@volar/language-server');
const connection = createConnection();
const documents = new TextDocuments();

connection.onInitialize(() => {
  return {
    capabilities: {
      textDocumentSync: documents.syncKind,
      completionProvider: {
        resolveProvider: true
      }
    }
  };
});

connection.onCompletion((textDocumentPosition) => {
  return [
    {
      label: 'HelloWorld',
      kind: 1,
      data: 1
    }
  ];
});

documents.listen(connection);
connection.listen();

Diagnostics

This code sets up a language server that provides diagnostics. If the text 'error' is found in the document, it will report a diagnostic error.

const { createConnection, TextDocuments, Diagnostic, DiagnosticSeverity } = require('@volar/language-server');
const connection = createConnection();
const documents = new TextDocuments();

connection.onInitialize(() => {
  return {
    capabilities: {
      textDocumentSync: documents.syncKind
    }
  };
});

documents.onDidChangeContent((change) => {
  const diagnostics = [];
  const text = change.document.getText();
  if (text.includes('error')) {
    diagnostics.push({
      severity: DiagnosticSeverity.Error,
      range: {
        start: { line: 0, character: 0 },
        end: { line: 0, character: 5 }
      },
      message: 'Found an error keyword',
      source: 'ex'
    });
  }
  connection.sendDiagnostics({ uri: change.document.uri, diagnostics });
});

documents.listen(connection);
connection.listen();

Other packages similar to @volar/language-server

vscode-vue-languageservice

vscode-vue-languageservice is another language service for Vue.js, providing similar features like auto-completion, diagnostics, and more. It is specifically designed to work with VSCode and offers a rich set of features for Vue.js development.

typescript-language-server

typescript-language-server is a language server for TypeScript and JavaScript. It provides features like auto-completion, diagnostics, and more. While it is not specific to Vue.js, it can be used in conjunction with other tools to provide a comprehensive development experience.

eslint

eslint is a widely-used tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. While it is not a language server, it provides diagnostics and can be integrated with editors to offer a similar experience.

README

The README file is missing

Changelog

2.2.5 (2024-05-23)

Features

• source-map: add API to support generated code with different length than original code #183 - Thanks @piotrtomiak