VS Code 中的截屏模式

这篇文章最初发表在我的博客上。

本周，我发布了 VS Code 扩展的更新，允许直接在编辑器中打开 Flexbox 的速查表flex。更新包含了一些新功能，其中我特别喜欢的是在值前面显示一个小图标，方便识别。但正因为如此，我不得不制作新的演示 GIF，因为之前的 GIF 中没有这个图标。

我使用ScreenToGif录制 GIF 。这是一个很棒的小程序，但我缺少一个选项，那就是在录制过程中显示所按下的按键。我需要这个选项，因为打开速查表的方法之一是在“命令面板”中搜索特定命令，而我希望组合键在 GIF 中可见。

所以 VS Code 又一次帮了我大忙，因为它内置了这个功能！它叫做“截屏模式”。你可以在“命令面板”中搜索“截屏模式”来切换开关。操作方法如下：

• 按Ctrl+Shift+P（Win、Linux）或Cmd+Shift+P（Mac）并搜索Toggle Screencast Mode。
• 按下Enter即可激活它。
• （显然，重复这些步骤即可停用它）

现在，每个按键都会显示在覆盖层中。看看这个：

动图

但请稍等，还有更多！

默认情况下，激活此模式会在覆盖层中显示所有按键。但这通常可能并非您想要的效果。如果覆盖层仅显示键盘快捷键（组合键），而不显示其他内容，那就太好了。

好吧，VS Code 又帮你搞定了！😎

如果你打开设置（Ctrl+,（Win、Linux）、Cmd+,（Mac））并搜索Screencast Mode，你会发现两个设置。其中一个是Only show keyboard shortcuts in Screencast Mode。它的作用非常明确。

现在您知道如何在视频/gif 中显示所有这些巧妙的快捷键了。🚀