vscode-html-languageservice

What is vscode-html-languageservice?

The vscode-html-languageservice npm package provides a set of tools and services for working with HTML in Visual Studio Code extensions. It offers functionalities such as HTML validation, completion, hover information, and more, making it easier to build and enhance HTML editing capabilities in VS Code.

What are vscode-html-languageservice's main functionalities?

HTML Validation

This feature allows you to validate HTML documents and get a list of diagnostics (errors, warnings, etc.). The code sample demonstrates how to create a document and use the HTML language service to perform validation.

const { getLanguageService } = require('vscode-html-languageservice');
const htmlLanguageService = getLanguageService();
const document = { uri: 'test://test/test.html', languageId: 'html', version: 1, getText: () => '<div></div>' };
const diagnostics = htmlLanguageService.doValidation(document);
console.log(diagnostics);

HTML Completion

This feature provides auto-completion suggestions for HTML documents. The code sample shows how to get completion items at a specific position in the document.

const { getLanguageService } = require('vscode-html-languageservice');
const htmlLanguageService = getLanguageService();
const document = { uri: 'test://test/test.html', languageId: 'html', version: 1, getText: () => '<div></div>' };
const position = { line: 0, character: 5 };
const completions = htmlLanguageService.doComplete(document, position);
console.log(completions);

HTML Hover Information

This feature provides hover information for HTML elements. The code sample demonstrates how to get hover information at a specific position in the document.

const { getLanguageService } = require('vscode-html-languageservice');
const htmlLanguageService = getLanguageService();
const document = { uri: 'test://test/test.html', languageId: 'html', version: 1, getText: () => '<div></div>' };
const position = { line: 0, character: 5 };
const hover = htmlLanguageService.doHover(document, position);
console.log(hover);

Other packages similar to vscode-html-languageservice

vscode-css-languageservice

The vscode-css-languageservice package provides similar functionalities but for CSS. It offers CSS validation, completion, and hover information, making it useful for enhancing CSS editing capabilities in VS Code.

vscode-json-languageservice

The vscode-json-languageservice package provides language services for JSON, including validation, completion, and hover information. It is similar to vscode-html-languageservice but tailored for JSON documents.

vscode-languageserver

The vscode-languageserver package provides a framework for implementing language servers in VS Code. It can be used to create language services for various programming languages, offering a broader scope compared to the HTML-specific services of vscode-html-languageservice.

README

vscode-html-languageservice

HTML language service extracted from VSCode to be reused, e.g in the Monaco editor.

Why?

The vscode-html-languageservice contains the language smarts behind the HTML editing experience of Visual Studio Code and the Monaco editor.

• findDocumentHighlights provides the highlighted symbols for a given position.
• doComplete provides completion proposals for a given location.
• setCompletionParticipants allows participant to provide suggestions for specific tokens.
• doHover provides hover information at a given location.
• format formats the code at the given range.
• findDocumentLinks finds all links in the document.
• findDocumentSymbols finds all the symbols in the document.
• htmlLanguageService.getFoldingRanges returning folding ranges for the given document

Installation

npm install --save vscode-html-languageservice