vscode-css-languageservice

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.

Similar packages

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.