完美 VS Code 视频和 GIF 录制的 3 个技巧

由于我们中的许多人现在花费了更多时间录制开发截屏视频，因此我想分享一些简单的技巧来改善VS Code的录制，无论是制作视频还是 GIF。

1. 设置像素完美的窗口大小

在找到一个可以接受的解决方案之前，我对这个问题进行了一番努力：

如何将 VS Code 窗口调整为给定的像素大小？

当我录制 1080p 视频时，我希望 VS Code 窗口的尺寸恰好为 1920x1080 像素，以实现完美的渲染效果。我知道一些高级第三方应用可以调整任何应用窗口的大小，但我希望找到一种始终有效的方式，无论我当前的显示器设置和操作系统是什么（我经常在 Mac OS 和 Windows 之间切换）。

事实证明，VS Code 扩展无法做到这一点，因为它们既无法访问 Electron API，也无法访问 DOM API。但你可以直接使用开发者工具：

• Ctrl+Shift+P使用(Windows/Linux) 或Cmd+Shift+P(Mac)打开命令面板
• 搜索Toggle Developer Tools，然后按Enter。
• 在显示的 Chrome 开发者工具窗口中，选择控制台选项卡并输入以下代码window.resizeTo(1920, 1080)：

这将完美地将您当前的 VS Code 窗口调整为您选择的大小🎉。

2. 启用屏幕录制模式

您知道吗？VS Code 可以高亮显示您的鼠标点击并显示正在按下的按键。内置的Screencast 模式功能可以实现此功能，方便观众轻松跟踪您的操作。要启用 Screencast 模式，请执行以下操作：

• Ctrl+Shift+P使用(Windows/Linux) 或Cmd+Shift+P(Mac)打开命令面板
• 搜索Toggle Screencast Mode，然后按Enter激活

启用此模式后，每次鼠标点击都会被红色圆圈圈出，并且按键将显示为覆盖层，如下所示：

您可能会认为显示每个击键很快就会变得令人厌倦，但幸运的是，有一个设置可以实现这一点：

• Ctrl+,使用(Windows/Linux) 或Cmd+,(Mac)打开用户设置
• 搜索Screencast Mode
• 点击Only show keyboard shortcuts in Screencast Mode复选框

现在只有快捷方式会以叠加层的形式显示，太棒了！😎

3.放大

这一点看似微不足道，却常常被忽视。我知道，在开发过程中，拥有尽可能多的屏幕空间非常重要。但对于你的浏览者来说，可读性更为重要，你绝对应该尽可能放大你的编辑器窗口。

您的观众可能会使用智能手机等小屏幕，在多任务处理时会打开小窗口，或者仅仅是网络连接不佳，从而迫使他们使用低分辨率，并产生压缩伪影。出于所有这些原因，您放大的越多，观众的观看体验就越好：

• 使用Ctrl+=和Ctrl+-(Windows/Linux) 或Cmd+=和Cmd+-(Mac) 放大/缩小

奖励：制作 GIF

如果您正在寻找好的 GIF 录制工具，我最喜欢的是Windows/Mac 上的LICECap和Linux 上的Peek，两者都可以免费使用。

这就是我的个人建议，但如果您知道其他有用的视频录制技巧，请在评论中分享！

在Twitter上关注我，我很乐意讨论并接受您的建议！