Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Master CSS Language ServiceNew to Visual Studio Code? Get it now.

Master CSS Language Service

Master

|
971 installs
| (4) | Free
Master CSS Language Service for Visual Studio Code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Master CSS Language Service for Visual Studio Code

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

Install to Visual Studio Code now

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.

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.

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

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}"
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft