Cheat Sheet Vscode

Posted on  by 



VS Code extension that lets you open a flexbox cheatsheet directly in the editor.

Features

The cheatsheet can be opened in a few ways:

  • Press Ctrl + Shift + P (Win, Linux) / Cmd + Shift + P (Mac) and search for the Open CSS Flexbox Cheatsheet command.
  • Press Ctrl + K K (Win, Linux) / Cmd + K K (Mac) keyboard shortcut.
  • Hover any display: flex declaration and click the Open CSS Flexbox Cheatsheet link in the popup.

Besides the Open CSS Flexbox Cheatsheet link in the hover popup, there’s also an image shown for each flexbox property. This aims to make it easier to understand how each property works without opening the cheatsheet. This is available for the following file types:

  • CSS
  • Less
  • Sass
  • Scss

Most properties also have interactive playgrounds that are part of the cheatsheet.

Settings

After opening the cheatsheet, you can select the directionality to be used in the interactive playgrounds. This is especially useful for languages that write from right-to-left. Learn more.

Colors

The colors of the cheatsheet automatically adapt to the selected theme. The font is based on the user’s preferred font.

Support my work

If you find this extension useful and would like to support my work, you can buy me a cup of tea. Thank you!

Demo

Using the Open CSS Flexbox Cheatsheet command

Clicking the Open CSS Flexbox Cheatsheet link on hover

Trying the interactive playgrounds

Changing directionality in the interactive playgrounds

Showing an image on hover

Credit

The cheatsheet in this extension is based on the excellent Flexbox Cheatsheet by Darek Kay.

Flexbox cheatsheet inside VS Code

Cheat

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. The ideas keep popping up in my head and I can’t help myself but try to make something out of them.

VSCode cheat sheet. GitHub Gist: instantly share code, notes, and snippets. HTML Cheat Sheet PDF. Save the.pdf version of this interactive page to keep it on your desktop or print it and hang it on the wall and always sneak a peek while coding, composing an article or designing a website. A PDF file is available for every cheat sheet on this website: CSS, JavaScript and others.

VSCodeVim Cheat sheet Command Description esc command mode i or a insert mode and move cursor to the start or end of selection shift+v or ctrl+v visual line mode:w save:q exit or quit:wq save and close file:q! Quite and don’t save j or k move down h or l move left or right by character increment dd delete a line shift + g go down gg go on. Emmet Cheat Sheet. Check out this useful Emmet Cheat Sheet for VSCode. Take Me There VSCode Download. VSCode is the only editor I use in class and it is recommended you use this. Take Me There My VS-Code Settings. This is a link to my VSCode settings. It is recommended you install my extensions and copy my settings.

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?

Regex Cheat Sheet Vscode

But there’s a 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:

Cheat Sheet Vscode

Currently there are two ways to open the cheatsheet:

Visual Studio Shortcuts

  • By pressing Ctrl+Shift+P (Win) / Cmd+Shift+P (Mac) and searching for the Open Flexbox Cheatsheet command.
  • Hovering any display: flex declaration and clicking the Open Flexbox Cheatsheet link in the popup (as shown in the demo).

Emmet Cheat Sheet Vscode

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.

Vs Code Shortcut

Update: The cheatsheet used in the extension is available online as well and is done by Darek Kay.





Coments are closed