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... [Read Full]
markdown guide
 

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

 

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

 
 

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

 

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

 

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

 

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 :)

 

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

 
 

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. :)

 

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

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 :)

 

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

 

I will install your extension today! Great job Dzhavat!

 
 

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.

 
 

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 😂

 

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

code of conduct - report abuse