Master-css-language-service NPM

Features

Code-completion

Smart suggestions for style names, values, semantics and selectors.

code-completion

Syntax highlighting

Highlight class names to make them easier to read and identify.

syntax-highlighting

Master CSS has pioneered applying syntax highlighting to class names in markup, which solves the problem of unreadable classes that are too long.

Generate preview

Hover over Master class names to see their CSS generation.

rendering-preview

Settings

We have given friendly presets based on mainstream frameworks and languages. If you think there are other commonly used ones that should be built in, please send a feature issue to us.

User and Workspace Settings - Visual Studio Code

The following examples are default values：

`editor.quickSuggestions`

"editor.quickSuggestions": {
    "strings": true
},

`masterCSS.languages`

Configure which languages should apply the Master CSS Language Service.

"masterCSS.languages": [
  "html",
  "php",
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact",
  "vue",
  "svelte",
  "rust"
],

`masterCSS.files.exclude`

Configure a glob pattern to prevent Master CSS Language Service from being applied.

"masterCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**"
],

`masterCSS.classNameMatches`

Configure Regex patterns as conditions for triggering Suggestions and generating previews.

"masterCSS.classNameMatches": [
  "(class(?:Name)?\\s?=\\s?)((?:\"[^\"]+\")|(?:'[^']+')|(?:`[^`]+`))",
  "(class(?:Name)?={)([^}]*)}",
  "(?:(\\$|(?:(?:element|el)\\.[^\\s.`]+)`)([^`]+)`)",
  "(classList.(?:add|remove|replace|replace|toggle)\\()([^)]*)\\)",
  "(template\\s*\\:\\s*)((?:\"[^\"]+\")|(?:'[^']+')|(?:`[^`]+`))"
],