This post was originally published on my blog.
Update: As of v1.38, VS Code supports the functionality provided by this extension natively as well! I’m quite happy about it because I didn’t know they were going to implement something similar. And what’s even better is that they also show a link to MDN for HTML elements! Now go and update to the latest version of VS Code. It’s worth it!
After releasing my first VS Code extension last week, I got an idea for another one. This one lets you open the MDN docs of a CSS property. Quite simple! The link appears on hover.
The extension is conveniently called CSS to MDN.
Here’s a demo:
Before making the extension, if I wanted to open the docs of background-size, for example, I’d switch to a browser, open a new tab, search for something like “mdn bkg size”, then click on the first result.
With this extension I don’t have to go through these steps. I can simply hover a property and click on the link. Nice, isn’t it? 😉
If you work with CSS, please give it a try. I hope you find it useful.
Top comments (24)
Awesome! If you develop a JS MDN please let us know!
Thanks! There’s already an extension that does that with JS. It works a bit differently but maybe you will find it useful. :)
Excellent, thank you! ;)
Thank you so much! Was just about to recommend you make one for JS.
I read the title of this and installed it immediately. Incredible idea, flawless execution!
Thanks a lot. Hope it makes your work a bit easier :)
The biggest credit should actually go to the awesome people at MDN who collected the data with all urls and made it available for use.
This is awesome. I don’t know how many times a day I Google “mdn (whatever)”, especially with CSS.
Me too! And having a direct link to docs is so obvious, I don’t know why it’s not part of the editor in first place (at least under a setting). Hope this tool will make your CSS-to-docs experience a bit more pleasant :)
Brilliant idea! Thank You sooooo much! :)
That's pretty awesome. Just thought maybe you can add a link to "caniuse.com" as well?
I just checked and it seems like there are already several extensions that show browser support from Can I Use. Here’s one. Maybe that one can help you.
This can be quite useful as well! Thanks for the suggestion. It will take some time to collect all links thought. And sometimes they combine several properties under one collection :)
Thanks so much for this contribution. This is very helpful!
You're welcome. If you work with CSS, I have two other extensions which you might find beneficial as well :)
Just gave it a try! Really good work, thanks!! :)
Glad to hear that. Hope it benefits you :)
This looks very helpful! Much thanks 👍
You're welcome! Hope it benefits you :)
This is really awesome, thanks!
You're welcome. Hope it makes your work a bit easier :)
Is there a shortcut-key for that in keyboard to open MDN?
I'm not aware of any native shortcut commands. Quickly searched on the Marketplace and found this (Go to MDN) extension. Maybe it's close to what you need?
I really love this extension. Ut would be great to have it with js too.
Thanks for trying it! Actually, there’s already an extension that does that with JS. It works a bit differently but maybe you will find it useful. :)