vscode-cssvar
vscode-cssvar copied to clipboard
willofindie
VSCode extension to support CSS Variables Intellisense
CSS Variables
Please vote/rate and star this project to show your support. :heart:
:bulb: Features:
This extension helps provide autocompletion IntelliSense for globally shared CSS Variables and more.
How the extension works:
- When adding a new CSS declaration property value, press
--. - This opens a completion list dropdown, with all the CSS variables in the list.
- Select and add the variable of your choice, to autocomplete.
Auto Completion, Color swatches, Goto Definition
This extension has in-built support for parsing: css, scss, less, js, jsx, ts, tsx
source file extensions and providing CSS variable suggestions from them.
Details can be read in Customization Doc.
Customization
If your project uses sass or styl or some other custom source file extension, and you are
facing issues to setup this VSCode extension, please read
Customization Doc.
Theme Support
Read more about Theming here
If you are still seeing duplicates, disable VSCode's IntelliSense for variable suggestions.
{
"[css]" : {
"editor.suggest.showVariables": false
},
"[scss]" : {
"editor.suggest.showVariables": false
},
}
CSS Level 4 color spec support
Limited support to keep bundle size small.
Except color() api, every other CSS color is supported.
Please find details for CSS colors here in MDN Docs
:hammer_and_wrench: Supported Configs:
This Extension supports the following properties as of now:
| Setting | Description | Type | Default |
|---|---|---|---|
cssvar.files |
Relative/Absolute paths to CSS variable source files | string[] |
["**/*.css"]
|
cssvar.ignore |
Relative/Absolute paths to file/folder sources to be ignored | string[] |
["**/node_modules/**"]
|
cssvar.extensions |
File extensions in which IntelliSense will be enabled | string[] |
[
"css",
"scss",
"sass",
"less",
"postcss",
"vue",
"svelte",
"astro",
"ts",
"tsx",
"js",
"jsx"
]
|
cssvar.themes
Helps to bucket CSS variables based on themes used in any project |
CSS Theme classnames used in source files E.g. ["dark","dim"]
|
string[] |
[]
|
cssvar.excludeThemedVariables
If true, hides duplicate theme variables from the list
|
Exclude themed variables to remove unnecessary duplicates | boolean |
false
|
cssvar.disableSort
Intellisense list won't be sorted |
Disables default sorting applied by VSCode | boolean |
false
|
cssvar.enableColors |
Enable VSCode's Color Representation feature when true |
boolean |
true
|
cssvar.enableGotoDef |
Enable VSCode's Goto Definition feature for CSS Variable | boolean |
true
|
cssvar.enableHover |
Enable VScode's Hover IntelliSense feature for CSS Variables | boolean |
true
|
cssvar.postcssSyntax
Details for this can be read here: Customize Extension |
Provides custom syntax parser for the mapped file extensions. E.g. {
"sugarss": ["sss"]
}
|
Record<string,string[] |
{}
|
cssvar.postcssPlugins
|
Provide PostCSS Plugins to support custom CSS features E.g. ["postcss-nested"]
|
string[] |
[]
|
NOTE: Please raise an issue for any feature request or a bug fix.
Metadata
Owner
willofindie
Metadata
VSCode extension to support CSS Variables Intellisense