Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vunguyentuan/vscode-css-variables
CSS variables autocomplete for vscode
https://github.com/vunguyentuan/vscode-css-variables
autocomplete css-variables extension vscode vscode-extension
Last synced: 3 days ago
JSON representation
CSS variables autocomplete for vscode
- Host: GitHub
- URL: https://github.com/vunguyentuan/vscode-css-variables
- Owner: vunguyentuan
- License: mit
- Created: 2020-12-14T03:04:11.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-26T01:52:40.000Z (7 months ago)
- Last Synced: 2024-12-29T14:09:51.664Z (10 days ago)
- Topics: autocomplete, css-variables, extension, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
- Size: 22.3 MB
- Stars: 141
- Watchers: 4
- Forks: 22
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> Working with CSS Variables is a pain, this extension enhances the Web Development experience by providing advanced features such as autocomplete, color preview, and go to definition.
## Installation
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables)**
By default the extension only scan files with this glob patterns:
```json
[
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less"
]
```
And ignore files in these folders:
```json
[
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/node_modules",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
]
```
And provides suggestions to files for the following languages
```json
[
"astro",
"svelte",
"vue",
"vue-html",
"vue-postcss",
"scss",
"postcss",
"less",
"css",
"html",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"source.css.styled"
]
```
## Features
### Autocomplete & Color Preview
Intelligent suggestions for all css variables in the project
### Go to definition
You can easily knows where the variable coming from by hold Alt/Cmd and click to the variable.
## FAQ
### I want to add files in `node_modules` folder
*.vscode/settings.json*
```json
{
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/open-props/open-props.min.css"
]
}
```
### I want to add files from public url, CDN
*src/style.css*
```css
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css';
body {
color: var(--indigo-50);
}
...
```
### Example source code https://github.com/vunguyentuan/test-css-var
## Full demo
