DEV Community

Cover image for VS Code extension that shows the initial value of a CSS property

VS Code extension that shows the initial value of a CSS property

Dzhavat Ushev on August 13, 2019

This post was originally published on my blog. I few days ago I got an idea for a VS Code extension that shows the initial (default) value of a...
Collapse
 
ciel profile image
Ciel

Great idea. Love it. Like a mini skirt; Long enough to cover the subject, short enough to be interesting.

Collapse
 
dzhavat profile image
Dzhavat Ushev

Interesting comparison 😂
Yes, it's meant to be very simple. Just small bits of information.

Collapse
 
emptyother profile image
emptyother

Quick request: LESS support. 😊

Collapse
 
dzhavat profile image
Dzhavat Ushev

This can be added quite easily. You're more than welcome to do it if you want. Otherwise, I'll do it later today :)

Collapse
 
dzhavat profile image
Dzhavat Ushev

Ok, I couldn’t resist. Just pushed a new version (0.2.0) which has support for less files :)

Collapse
 
nicolalc profile image
Nicola

You did it! Great job dude!

Collapse
 
dzhavat profile image
Dzhavat Ushev

Thanks. The hardest part was finding the data. I asked MDN on Twitter if they had it available somewhere and, luckily, they did. That helped me a lot. The rest was not more than 30 lines of code. :)

Collapse
 
nicolalc profile image
Nicola

I think you might sponsor this plugin with MDN or VSCode community, I think is an essential IDE behaviour

Thread Thread
 
dzhavat profile image
Dzhavat Ushev

I wouldn’t call it essential just yet. Hopefully people will try it and find it useful. But, of course, it will benefit way more people if this info was part of VS Code (or other editors) to start with :)

Collapse
 
jamesmkenny profile image
James Kenny • Edited

This is a really clever idea. Thanks going to give it a try.

Collapse
 
chrisachard profile image
Chris Achard

Neat! Did you follow any good tutorials about creating VS Code extensions? Or: how did you learn how to do it?

Collapse
 
dzhavat profile image
Dzhavat Ushev

I just followed the official docs. They explain it quite well how to get started. Also how to publish it once it's done. Had a bit of a problem with the API, though. Couldn't really find good examples of how to do my thing. At the end I just combined things from here and there because my focus was on making it work rather than figuring out the perfect and most correct way. I can always improve afterwards :)

Another good article about publishing is

Good luck if you decide on giving it a try. It's a lot of fun :)

Collapse
 
chrisachard profile image
Chris Achard

Awesome, thanks! I'll at least give it a shot on my own machine :)

Collapse
 
arturoaviles profile image
Arturo Avilés

I will install your extension today! Great job Dzhavat!

Collapse
 
dzhavat profile image
Dzhavat Ushev

It only shows the initial value(s) of a property according to the specs.

Can you elaborate on your question? What is it that you expect to see? Maybe that can be added.

Collapse
 
zed_m profile image
Amine Hammou

Great idea, its on my extension pack now x)

Collapse
 
dzhavat profile image
Dzhavat Ushev

Thanks. Appreciate it :)

Collapse
 
duttaoindril profile image
Oindril Dutta

This is awesome! Now it just needs to work with JSX and also show inherited CSS values based on a vscode browser simulation of the entire codebase and potential places the CSS is used 😂

Collapse
 
dzhavat profile image
Dzhavat Ushev

Yeah, right 😂
It shouldn't take long to implement 😄