vscode-css-languageservice

What is vscode-css-languageservice?

The vscode-css-languageservice package provides a set of tools and services for working with CSS in a way that integrates seamlessly with Visual Studio Code. It offers features like CSS validation, completion, hover information, and more, making it easier for developers to write and maintain CSS code.

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

CSS Validation

This feature allows you to validate CSS code and get diagnostics information. The code sample demonstrates how to create a CSS language service, parse a stylesheet, and perform validation to get diagnostics.

const cssService = require('vscode-css-languageservice').getCSSLanguageService();
const document = { uri: 'test.css', languageId: 'css', version: 1, getText: () => 'body { color: red; }' };
const stylesheet = cssService.parseStylesheet(document);
const diagnostics = cssService.doValidation(document, stylesheet);
console.log(diagnostics);

CSS Completion

This feature provides code completion suggestions for CSS. The code sample shows how to get completion items for a given position in a CSS document.

const cssService = require('vscode-css-languageservice').getCSSLanguageService();
const document = { uri: 'test.css', languageId: 'css', version: 1, getText: () => 'body { col' } };
const position = { line: 0, character: 10 };
const stylesheet = cssService.parseStylesheet(document);
const completions = cssService.doComplete(document, position, stylesheet);
console.log(completions);

CSS Hover Information

This feature provides hover information for CSS code. The code sample demonstrates how to get hover information for a specific position in a CSS document.

const cssService = require('vscode-css-languageservice').getCSSLanguageService();
const document = { uri: 'test.css', languageId: 'css', version: 1, getText: () => 'body { color: red; }' };
const position = { line: 0, character: 7 };
const stylesheet = cssService.parseStylesheet(document);
const hover = cssService.doHover(document, position, stylesheet);
console.log(hover);

Other packages similar to vscode-css-languageservice

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It offers a wide range of functionalities including linting, autoprefixing, and more. Unlike vscode-css-languageservice, which is focused on providing language services for CSS in an editor environment, PostCSS is more about transforming and processing CSS code.

stylelint

Stylelint is a modern linter that helps you avoid errors and enforce conventions in your styles. It is highly configurable and can be integrated into various build systems. While vscode-css-languageservice provides validation and other language services within an editor, Stylelint is more focused on linting and enforcing coding standards.

css-tree

CSS-tree is a tool for working with CSS, including parsing, generating, and analyzing CSS code. It provides a low-level API for manipulating CSS. Compared to vscode-css-languageservice, which offers high-level language services, CSS-tree provides more granular control over CSS parsing and manipulation.

README

vscode-css-languageservice

Language services for CSS, LESS and SCSS

Why?

The vscode-css-languageservice contains the language smarts behind the CSS, LESS and SCSS editing experience of Visual Studio Code and the Monaco editor.

• doValidation analyses an input string and returns syntax and lint errors.
• doComplete provides completion proposals for a given location.
• doHover provides a hover text for a given location.
• findDefinition finds the definition of the symbol at the given location.
• findReferences finds all references to the symbol at the given location.
• findDocumentHighlights finds all symbols connected to the given location.
• findDocumentSymbols provides all symbols in the given document
• doCodeActions evaluates code actions for the given location, typically to fix a problem.
• findColorSymbols evaluates all color symbols in the given document
• doRename renames all symbols connected to the given location.
• getFoldingRanges returns folding ranges in the given document.

Installation

npm install --save vscode-css-languageservice

API

export interface LanguageService {
	configure(raw: LanguageSettings): void;
	doValidation(document: TextDocument, stylesheet: Stylesheet, documentSettings?: LanguageSettings): Diagnostic[];
	parseStylesheet(document: TextDocument): Stylesheet;
	doComplete(document: TextDocument, position: Position, stylesheet: Stylesheet): CompletionList;
	setCompletionParticipants(registeredCompletionParticipants: ICompletionParticipant[]): void;
	doHover(document: TextDocument, position: Position, stylesheet: Stylesheet): Hover | null;
	findDefinition(document: TextDocument, position: Position, stylesheet: Stylesheet): Location | null;
	findReferences(document: TextDocument, position: Position, stylesheet: Stylesheet): Location[];
	findDocumentHighlights(document: TextDocument, position: Position, stylesheet: Stylesheet): DocumentHighlight[];
	findDocumentSymbols(document: TextDocument, stylesheet: Stylesheet): SymbolInformation[];
	doCodeActions(document: TextDocument, range: Range, context: CodeActionContext, stylesheet: Stylesheet): Command[];
	doCodeActions2(document: TextDocument, range: Range, context: CodeActionContext, stylesheet: Stylesheet): CodeAction[];
	findDocumentColors(document: TextDocument, stylesheet: Stylesheet): ColorInformation[];
	getColorPresentations(document: TextDocument, stylesheet: Stylesheet, color: Color, range: Range): ColorPresentation[];
	doRename(document: TextDocument, position: Position, newName: string, stylesheet: Stylesheet): WorkspaceEdit;
	getFoldingRanges(document: TextDocument, context?: { rangeLimit?: number; }): FoldingRange[];
	getSelectionRanges(document: TextDocument, positions: Position[], stylesheet: Stylesheet): SelectionRange[];
}

export interface LanguageSettings {
	validate?: boolean;
	lint?: any;
}

Development

Note: All CSS entites (properties, at-rules, etc) are sourced from https://github.com/microsoft/vscode-custom-data/tree/master/web-data and transpiled here. For adding new property or fixing existing properties' completion/hover description, please open PR there).

How can I run and debug this node module?

• clone, npm install
• open the folder in VSCode.
• set breakpoints, e.g. in cssCompletion.ts
• run JUnit tests from the debug viewlet and wait until a breakpoint is hit:

In VSCode:

• run VSCode out of sources as described here: https://github.com/Microsoft/vscode/wiki/How-to-Contribute
  • in the instance run from sources open a .css file
• open a VSCode on the VSCode source
  • run command Debug: Attach to Node process and pick the process with the css-language-features path
  • Set a breakpoint in extensions/css-language-features/server/node_modules/vscode-css-languageservice/lib/umd/services/cssCompletion.js
• in the instance run from sources invoke code completion in the .css file
• use yarn link vscode-css-languageservice in extensions/css-language-features/server to run VSCode with your changes to vscode-css-languageservice

License

(MIT License)

Copyright 2016, 2019 Microsoft

With the exceptions of build/mdn-documentation.js, which is built upon content from Mozilla Developer Network and distributed under CC BY-SA 2.5.