VSCode CSS Variable Autocomplete

#vscode #css #autocomplete #cssvariable

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.

Whats next?

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

Top comments (4)

Robert McGovern • Mar 15 '22 • Edited

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

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