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 given CSS property on hover. This solves a real problem for me because most of the time I use the default value to “reset” a property.
What this means is if I have background-color: tomato on an element and want to set it to its initial value, I’d probably use transparent instead of initial, unset or something else. So instead of remembering the initial values of all CSS properties, I created myself an extension.
With that in mind I present you CSS Initial Value.
Here’s a small demo:
The extension is quite simple and there are probably cases where it display something weird but I’d like to share it with the world in order to get feedback. It’s also my first extension so I’m pretty sure there are things that can be improved. The code is open-sourced if anyone wants to take a look or contribute.
If you work with CSS, please give it a try. I hope you find it useful.
Top comments (19)
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.
Quick request: LESS support. 😊
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
lessfiles :)You did it! Great job dude!
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.
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
How YOU can build and publish your own extension to VS Code Marketplace
Chris Noring ・ Aug 8 ・ 10 min read
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 :)
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.
Great idea, its on my extension pack now x)
Thanks. Appreciate it :)
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 😄