如何设置 VSCode 来录制屏幕录像

2020年春天，我加入了Egghead，成为一名讲师，发布各种前端 Web 开发主题的视频课程。这篇简短的教程主要讲述我录制编码截屏视频的设置过程。

Egghead 有一种录制屏幕录像的特殊方法，如果您是屏幕录像新手，您也应该了解一下这种方法，它会提供一些非常好的提示。

VSCode 设置

设置 VSCode 分为几个部分。为了方便后续课程，我建议创建一个可重复使用的基础项目。主要原因是我们将创建工作区设置，包括禁用某些扩展。

VSCode 工作区设置

设置屏幕录像的一个重要部分是确保观众可以轻松看到您正在输入的内容！

如果您尚未创建工作区设置文件，则可以通过创建目录.vscode和文件在项目根目录下添加一个settings.json。

以下是我推荐的屏幕录像基本设置：

{
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "window.zoomLevel": 4,
  "editor.formatOnSave": false,
  "editor.lineNumbers":"off",
  "editor.quickSuggestionsDelay": 1500,
  "editor.hover.enabled": false,
  "gitlens.mode.active": "zen",
  "breadcrumbs.enabled": false,
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
}

前三个选项共同作用来调整字体大小。您可以选择将fontSize和 的值设置得更大lineHeight，或者不设置zoomLevel。我之所以同时设置这三个选项，是因为zoomLevel它们也会影响面板文本，例如文件夹，而且有时我也需要演示如何设置它们。

以下屏幕截图显示了使用这些设置的相对大小：

顺便说一下，我现在的主题是Apollo Midnight。虽然我们每个人都有自己的偏好，但对于屏幕录制来说，考虑到可访问性，建议选择高对比度的主题。

接下来，如果你通常使用像 Prettier 这样格式化的代码，你可能希望关闭它，也就是"editor.formatOnSave": false。我关闭它有两个原因：

1. 教程通常非常注重小块代码，这些代码块不太难保持格式化
2. 当此功能关闭时，我可以强制将某些块移出视图，以便更好地关注正在进行的块。

接下来，我会删除行号，以进一步减少混乱。如果我想引起人们对某一行或某段代码的注意，我会用鼠标来吸引眼球，或者暂时高亮显示它。

虽然我喜欢在日常代码流程中使用 Intellisense，但它在教程中可能会非常分散注意力（我花了一段时间才弄清楚如何关闭它，所以你会看到它干扰了我之前的课程！）。有几种方法可以隐藏这些弹出窗口。

我的设置偏好"editor.quickSuggestionsDelay": 1500本质上意味着，在我正常的打字速度下，Intellisense 和其他类型的建议弹出窗口不太可能出现。但是，我偶尔需要的一种是 Emmet。因此，使用此设置，即使我等待 1500 毫秒（1.5 秒），我仍然可以访问 Emmet。

如果您希望完全禁用所有建议弹出窗口，您可以设置"editor.quickSuggestions": false。

我还禁用了“悬停”信息弹出窗口，这些窗口可能会阻碍内容显示，尤其是在实时编码时会非常烦人。使用 可以禁用该悬停行为"editor.hover.enabled": false。

下一个可能不需要，但我花了一段时间才找到合适的设置，所以我想把它加进去。如果你是GitLens用户，并且不想为了隐藏逐行追责信息而在你的工作区禁用它，那么你需要的设置是"gitlens.mode.active": "zen"。

最后三个设置有助于隐藏工作区杂乱。如果您不熟悉它们的名称，它们activityBar是侧边图标菜单，它们statusBar是默认显示在 VSCode 底部的消息面板。

如果您通常不打开自动换行功能，您可能还需要"editor.wordWrap": "on"为课程添加此功能，以防止行长超过编辑器宽度，而编辑器宽度会因字体大小增加而减小。

额外的工作区清理

您无法控制settings.json侧边栏中可见的内容。不过，您可以通过点击“资源管理器”标题旁边的“三个点”菜单来更改它。

我倾向于在课程中隐藏除“文件夹”之外的所有内容：

虽然你无法在设置中隐藏侧边栏，但我建议你学习使用键盘快捷键，以便在学习过程中快速切换。你也可以通过“视图”>“外观”>“显示侧边栏”下的菜单来隐藏侧边栏（点击即可切换）。

推荐扩展：Explorer Exclude

通常有一些额外的文件 - 或者可能是敏感文件 - 您不想在课程中显示。

示例包括：

• node_modules
• .gitignore
• .env
• .vscode

为了清理这些内容，请安装扩展程序Explorer Exclude，它将创建一个额外的“隐藏项目”资源管理器面板，您可以在其中添加要隐藏的文件、文件类型和目录。

调整侵入式扩展设置

还有一些其他扩展程序可能会增加课程视图的杂乱程度，您需要将其从课程视图中移除。为此，请找到并选择相应的扩展程序，然后在“禁用”旁边的下拉菜单中选择“工作区”。

对于我自己，我禁用了 GitLens 和 stylelint。

屏幕显示设置

现在 VSCode 已设置完毕，您需要准备好屏幕进行录制。

首先，将屏幕分辨率调整为 16x9 会很有帮助。Egghead 建议使用 1280x720 或 1920x1080。

如果你用的是 Mac，可能需要找个工具来辅助调整。我用的是SwitchResX（一次性购买的小工具）。

接下来，我将 VSCode 设置为全屏。如果还需要浏览器，我会将其放置在显示内容所需的最小空间内，以便大多数情况下代码都能有尽可能多的空间。由于我倾向于分享响应式设计技巧，因此这在课程之间甚至在课程进行中都会灵活调整。

如果我需要终端，我只会在主动使用它来解释课程概念时才允许它显示。使用时，我会（尽量记住）将它拖到大约一半的位置，以帮助它聚焦于代码。

记住：屏幕录制最棒的地方在于你可以修改错误！如果你需要在桌面之间切换来查看参考代码和笔记（如果你像我一样，通常只使用笔记本电脑屏幕），你也可以编辑转场效果。

我喜欢在 Mac 上设置虚拟桌面，这样参考代码和笔记就会显示在主录制屏幕的右侧。保持一致的设置有助于我在学习过程中保持流畅，同时又能快速访问参考资料。

希望这些技巧能帮助你做好录制截屏视频的准备。如果你还有其他技巧或其他问题，欢迎留言！

请务必查看我在 egghead 上的前端课程，并在 Twitter 上关注 @5t3ph以获取前端 Web 开发技巧和教程。