1. vscode-css-languageservice
Language service for CSS, LESS and SCSS
vscode-css-languageservice
Package: vscode-css-languageservice
Created by: Microsoft
Last modified: Mon, 22 Apr 2024 18:39:40 GMT
Version: 6.2.14
License: MIT
Downloads: 1,439,121
Repository: https://github.com/Microsoft/vscode-css-languageservice

Install

npm install vscode-css-languageservice
yarn add vscode-css-languageservice

vscode-css-languageservice

Language services for CSS, LESS and SCSS

npm Package
NPM Downloads
Build Status
License: MIT

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.
  • findDocumentColors evaluates all color symbols in the given document
  • doRename renames all symbols connected to the given location.
  • prepareRename the range of the node that can be renamed
  • 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 `npm install``
  • npm 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:
    image

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
  • run npm link in the folder of vscode-css-languageservice
  • use npm 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
    image
  • 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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin