Master CSS Language Service

On this page

• Features
  • Code-completion
  • Syntax highlighting
  • Generate preview
• Settings
  • editor.quickSuggestions
  • masterCSS.languages
  • masterCSS.files.exclude
  • masterCSS.classNameMatches
  • masterCSS.previewColor: true
  • masterCSS.previewOnHover: true
  • masterCSS.suggestions: true

Features

Code-completion

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

Syntax highlighting

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

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

Documentation

Visit beta.css.master.co/docs/language-service to view the full documentation

Generate preview

Hover over Master class names to see their CSS generation.

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*)((?:\"[^\"]+\")|(?:'[^']+')|(?:`[^`]+`))"
],

masterCSS.previewColor: true

Render color boxes by color-related class names as previews.

masterCSS.previewOnHover: true

Preview the generated CSS rules when hovering over a class name.

masterCSS.suggestions: true

Enable autocomplete suggestions.

masterCSS.config

Configure the config file path.

"masterCSS.config": "master.css.{ts,js,mjs,cjs}"