On this page
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.
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.
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.