This post was originally published on my blog.
Another week, another VS Code extension. I’ve published two so far and this is my third in just a month. I’m not participating in any sort of “30 VS Code extensions” challenge 😂. It’s just the ideas that keep popping up in my head and I can’t help myself but try to make something out of them.
It’s needless to say that I enjoy doing this quite a lot because these extensions are something I’ve been missing in my work. So by building them, I benefit directly and they make my work as a front-end developer a little bit easier.
Over the last few years flexbox got more and more popular. And rightly so, because it helps us build one-dimensional layouts much faster. Have you tried positioning something in the middle of an element using flexbox? It’s fun, right?
But there’s just one problem! Remembering all flexbox properties can be hard. I know it’s hard for me! Should I use justify-content
or align-items
to do X? What values does justify-content
accept? There are quite many of them and we’re not always sure which one does what. That’s why we have our favorite articles, guides, cheatsheets, etc., to consult during those times. But they all “live” outside of the code editor and that forces us to switch context.
A week ago I asked myself “Why not have a flexbox cheatsheet inside VS Code where I can quickly look up what I need and continue my work? Why do I need to switch context? Why isn’t there a tool that lets me do that?”. That’d be great, right?
I think so too, so I built it! 🚀
I’m thrilled to share my new extension “CSS Flexbox Cheatsheet”. Here’s a little demo:
Currently there are two ways to open the cheatsheet:
- By pressing
Ctrl+Shift+P
(Win) /Cmd+Shift+P
(Mac) and searching for theOpen Flexbox Cheatsheet
command. - Hovering any
display: flex
declaration and clicking theOpen Flexbox Cheatsheet
link in the popup (as shown in the demo).
I have a few ideas for future improvements but I’d like to share it with the world in order to get feedback. So if you work with CSS, please give it a try. I hope you find it useful.
Oldest comments (39)
Thank you so much! I love it.
Oh! Installing this as soon as I get to my computer for the morning.
Update. I'm LOVING this. The visual representation of each attribute is exactly what I needed. I learned something. I was like, so THAT'S what "align-item: stretch" does. Sweet.
Added first review to the marketplace! Time to check out your other extensions.
Question, how did you create the .svg images for each attribute?
The whole cheatsheet is based on the excellent work by Darek Kay. I'm not sure which tools he used to create them but you can check out the code on GitHub. :)
Thanks for your review! Really appreciate it 🙏
Hope you find the other extensions useful as well :)
Now make one for CSS Grid, where you can generate and export your grid 😉.
That's a really good idea :)
I might give it a try in the future, or of someone wants to take on the challenge, he/she can do it as well.
It's going to be great if my little extension inspires other people to build more tools like this embedded in the code editor.
It's not an extension but this generator is pretty amazing cssgrid-generator.netlify.com/
Yes, it is! Sarah Drasner has released a lot of amazing tools. All of them deserve to be bookmarked :)
Thank you for that. I will install it immediately. If you would make the same with Grid would be awesome.
I also love your css to MDN.
Thanks. Hope it serves you well :)
Will appreciate your feedback once you've used them for some time. If you feel like there's something that can be improved, let me know.
Awesome!! Loved it!
Very helpful and useful extension ❤️❤️❤️
If someone needs to see this cheatsheet to solve the problem, the problem wouldn't be solved!
I see what you mean and I agree. But many times the problem is remembering the right property, not much about the end result.
So good! I can stop mixing up align-items and justify-content now 🙈
I feel you! Hope this little tool can help you with that :)
Nice work @dzhavat ! 💪🏻🗳️
genius!
Do one for CSS Grid, too! Haha. Please and thank you! :)
You're welcome :)
Having one for CSS Grid will be quite handy as well. Might consider it for a future project.
Writing and choosing extensions for an editor are the surest way to making it "your" editor. I've enjoyed it for years in Emacs, and this is why Code has quickly become my new favourite. It's giving me incentive to finally learn JavaScript too.
I also like how Code gets updated on a monthly basis. So bug fixes and new features land pretty fast. Good luck with learning JavaScript! If you need some resources, I can share a few that I find useful :)
Yes please!
Sorry for the late response. Was a bit busy today.
There are quite a lot of resources on the Web but the ones I can recommend are:
Books
Courses
Building stuff
The are tons of other resources as well but I hope you'll find these useful :)
Edit: Oh, I forgot our lovely DEV.to :) You can follow the js tag. There are a lot of good posts.
Thanks for making this! It'll come in handy soon
This is exactly what I needed so I don't have to google what each property does for the 100th time 😃
This is exactly why I built it :) Hope you find it useful.
Just tried it... Awesome!
Shared with the Tech Team in the company I work for :)
That's awesome! Thanks :)