loading...
Cover image for Screencast Mode in VS Code

Screencast Mode in VS Code

dzhavat profile image Dzhavat Ushev Originally published at dzhavat.github.io ・2 min read

This post was originally published on my blog.


This week I released an update to my VS Code extension that lets you open a flexbox cheatsheet directly in the editor. The update contains a couple of things but something I really like in particular is a small icon shown in front of the flex value to make it easily recognizable. But because of it, I had to make new demo gifs since the old ones didn’t have the icon in them.

For recording gifs I use ScreenToGif. It’s an excellent little program but something I miss in it is the option to show the keys being pressed during a recording. I needed this because one way to open the cheatsheet is by searching for a specific command in the “Command Pallete” and I wanted the key combination to be visible in the gif.

So VS Code, once again, helped me out because it has this exact functionality already build-in! It’s called “Screencast Mode”. You can toggle it on and off by searching for it in the “Command Pallete”. Here’s how:

  • Press Ctrl+Shift+P (Win, Linux) or Cmd+Shift+P (Mac) and search for Toggle Screencast Mode.
  • Press Enter to activate it.
  • (Obviously, repeat the steps to deactivate it)

Now every keystroke will be shown in an overlay. Check this out:

Showing pressed keys in an overlay

But wait, there’s more!

By default, activating this mode will show all keystrokes in the overlay. And oftentimes this might not be what you want. It’d be nice if the overlay only showed the keyboard shortcuts (key combinations) and nothing more.

Well, VS Code has got you covered! Again! 😎

If you open the settings (Ctrl+, (Win, Linux), Cmd+, (Mac)) and search for Screencast Mode, you’ll find two settings. One of them is Only show keyboard shortcuts in Screencast Mode. It’s pretty clear what it does.

Now you know how to show all those nifty key shortcuts in your videos/gifs. 🚀

Posted on by:

dzhavat profile

Dzhavat Ushev

@dzhavat

Front-end developer trying to make useful stuff.

Discussion

pic
Editor guide
 

Cool!
Currently there is no autocompletion/intellisense for flex properties in the editor. There is only some short memory suggestions.
What do you is the best way to add this to vscode?
Basically I am writing inline styles like this flexDirection="column"

 

Can you explain in a bit more details what you need? Where do you write the inline style? Inside an html file? I'm not sure how you can extend the IntelliSense for already existing properties but vscode-custom-data might help you.

 

I write react functional component in js file. It looks like this:

<Flex flexDirection="column">...</Flex>

Sorry but your comment appears to be truncated. Have you seen the custom data link? Do you think that might help you?

I edited it.
I saw the custom extension.
I think it need just to recognize that it is possibly a css and give css suggestions.
Like this question
stackoverflow.com/questions/481079...

Or this extension
marketplace.visualstudio.com/items...

I see now. It's going to be hard. I have this exact same problem with my extensions. I need to figure out a way to detect the CSS in Vue, HTML, style components or whatever but haven't found it yet :(

Maybe looking at the source code for that "CSS in JS" extension can help you create your own.

 

This is amazing! thanks for sharing.

 

This is really good, thanks!

 

That's a great feature! I will use it for my talk next week.
Thanks for sharing!

 

You're welcome. Hope you find it useful! Good luck with your talk!

 

Oh my freaking God! Thanks dude!

 

You're welcome. You sound like you've needed this feature a lot :)