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

For the complete API see cssLanguageService.ts and cssLanguageTypes.ts

Development

• clone this repo, run yarn
• yarn test to compile and run tests

How can I run and debug the service?

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

How can I run and debug the service inside an instance of VSCode?

• run VSCode out of sources setup as described here: https://github.com/Microsoft/vscode/wiki/How-to-Contribute
• use yarn link vscode-css-languageservice in vscode/extensions/css-language-features/server to run VSCode with the latest changes from vscode-css-languageservice
• run VSCode out of source (vscode/scripts/code.sh|bat) and open a .css file
• in VSCode window that is open on the vscode-css-languageservice sources, run command Debug: Attach to Node process and pick the code-oss process with the css-language-features path
• set breakpoints, e.g. in cssCompletion.ts
• in the instance run from sources, invoke code completion in the .css file

Note: All CSS entities (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).

License

(MIT License)

Copyright 2016, 20 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.