loading...
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 profile image Dzhavat Ushev Updated on ・1 min read

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.

GitHub logo dzhavat / css-initial-value

VS Code extension that shows the initial value of each property.

CSS Initial Value (link)

VS Code extension that shows the initial value of each CSS property.

Features

Works with the following file types:

  • CSS
  • Less
  • Sass
  • Scss

Demo

demo

Credit

The data used for this extension is from MDN.




Posted on by:

dzhavat profile

Dzhavat Ushev

@dzhavat

Front-end developer trying to make useful stuff.

Discussion

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.

 

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

 
 

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

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)

 
 

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 😄