DEV Community

Cover image for VSCode CSS Variable Autocomplete
Vu Nguyen
Vu Nguyen

Posted on

VSCode CSS Variable Autocomplete

Problem:

As a developer I love intellisense and autocomplete, it's fast, precise and I rely on it a lot because I actually dont remember all the options.

But, something is missing with css variables, vscode does not support autocomplete if the variables on another file.

Solution:

CSS Variable Autocomplete Extension to rescue.

The extension will scan all the css-like files(support SASS, LESS, CSS) and create a dictionary of all variables.

Then use the variables dictionary to show all the completion.

Demo

Whats next?

  • Color preview box beside variable, it would be nice to know the color value of the variable
  • Your suggestion

Discussion (2)

Collapse
tarasis profile image
Robert McGovern • Edited on

Looks very useful. Two questions:

1) In there a way to get rid of the dupe intellisense options? (So right now I get two sets of the CSS Variables, those from this plugin with the color swatch, and the default completion without color swatch, SOMETIMES when I re-open the window the default completions don't appear)

2) How would I limit the plugin to the current directory and any subdirectories?

I have a structure that includes many practice projects, but I'm only editing one at a time. Normally I'm just working on a single project at a time, but I have the whole tree open in VSCode, rather than a specific directory (so I can look at code as needed without having to open a second instance of VSCode)

root
    --index.html
    --css/style.css
    projects
        project1
           --index.html
           --css/style.css
        project2
           --index.html
           --css/style.css
        project3
           --index.html
           --css/style.css
        project4
           --index.html
           --css/style.css
Enter fullscreen mode Exit fullscreen mode

So If I have only project 4's index.html and any still sheets it refers to open, is there a way to limit the plugin to only those files?

Cheers

Collapse
milanwake profile image
Moon Presence

Thank you! Wonderful extension :)