5 个被低估的 VSCode 内置功能

引言

包起来

将 DEV VS Code 扩展包添加到推荐的 VS Code 扩展中 #5202

引言

首先要说明的是，这篇文章并不是一份“你必须安装的顶级扩展”清单。虽然这类清单很有帮助（尽管有点“标题党”），而且我也很喜欢 VSCode 拥有极其“健康”的扩展和插件生态系统，但我注意到很少有文章介绍VSCode 本身就内置的强大功能，而这正是我想讨论的。

这些是 VSCode 编辑器内置的功能（无需安装任何扩展或工具），但我个人认为它们没有得到足够的重视，应该发布一个 PSA（公共服务公告）。

#1：JavaScript 类型安全

虽然榜单上的其他内容并没有严格的排名，但这个功能绝对当之无愧地位列第一，而且优势非常明显。我不会强迫你接受 TypeScript 或类型安全的 JS（什么？！），但我只想指出 VSCode 的一个功能，它能让你获得类型安全的部分优势，而无需切换到 TS 文件、进行转译/编译，也不需要其他开发者使用 TypeScript 才能使用你的代码库。

对于那些希望以最小的更改和设置立即在 JS 代码中引入类型安全的人来说，这是一个绝妙的折中方案。

我不想对此进行过于深入的探讨，因为网上有很多相关的指南，但我会介绍一些“快速入门”的基础知识：

启用 JS 类型检查

启用 JS 文件中的类型检查有多种方法，但如果您只是想尝试一下，最简单的方法是// @ts-check在文件顶部添加代码。

有关更多详细信息，请参阅VSCode“使用 JavaScript”文档中的“JavaScript 类型检查”部分。

这样做能给你带来什么好处？

如果您不想做任何额外的工作（例如标注类型或设置配置），只需添加// @ts-check即可立即在 VSCode 中获得 TypeScript 支持的类型检查。

例如，请查看以下屏幕截图，对比启用和未启用 TS 检查的 JS 文件：

在上面的例子中，开发者忘记了querySelectorAll`int` 并不返回 `Array` array，它返回的是一个特殊的对象——`int`——NodeList它没有map()数组所具备的内置方法。启用类型检查后，VSCode 会捕获并标记出由使用 `int` 触发的致命错误map。

对于那些想知道如何将 NodeList 转换为数组的人来说，一个简单的方法是使用Array.from：Array.from(document.querySelectorAll('a[href]'))

使用 JSDoc 注解类型及高级用法

此功能的“高级用户”部分在于能够使用 JSDoc 注释来告知 VSCode 基于 TypeScript 的智能感知系统，你的 JS 代码中包含哪些高级类型。TypeScript 文档页面“JavaScript 文件类型检查”对此进行了深入讲解，但为了简洁起见，我只粘贴一个很棒的示例：

对于更高级的用法，网上有很多很棒的资源，首先推荐我的 VSCode 速查表，其中有一个章节专门介绍 JSDoc 驱动的类型检查和智能感知 🙂。它还包含其他相关实用资源的链接列表。

#2：让贡献者更容易参与

花时间简化其他人向你的代码库贡献代码的流程可能感觉很麻烦，但从长远来看，这对每个人都有好处。开发者贡献代码的流程越简单、越不容易出错，你就越不需要回答重复的问题、拒绝违反规范的 PR，以及处理不必要的反复沟通。

你可能会惊讶地发现，VSCode 有一些内置功能可以帮助实现这一目标。

推荐扩展程序

其中一项功能是我在研究Dev.to 的源代码时才发现的，因为这是我第一次见到它—— “推荐扩展”。它的工作原理是，.vscode/extensions.json在项目根目录下添加一个特殊文件，列出你希望所有贡献者使用的扩展（例如 Prettier），VSCode 会识别到该文件，并在开发者克隆并打开你的仓库时弹出建议，提示他们安装这些扩展。

您可以在 VSCode 的工作区推荐扩展文档中找到有关如何使用此功能的更多详细信息。

工作区工具和设置

VSCode 内置了多个可以覆盖用户设置和为每个项目创建配置的地方，这两点都可以让贡献者更容易使用 VSCode 在您的代码库中工作。

例如，如果您管理一个具有不同部分的单体仓库，您可能需要了解一下“多根工作区”。

对于默认缩进和间距选项等设置，您可以将覆盖.vscode/settings.json设置提交到存储库的根目录，但请尊重您的贡献者，不要覆盖任何您希望他们能够更改的内容。

#3：用户自定义代码片段

虽然 VSCode 目前还不支持高级宏（除非使用扩展程序），但您知道它已经支持高级代码片段吗？乍一看，这些代码片段似乎只能插入基本的文本块，但实际上您可以利用它们执行一些高级操作。

例如，以下是我快速编写的一段代码，用于将 Markdown 风格的项目符号列表转换为 GitHub 风格的复选框列表：

{
    "MD List to GH Checkbox": {
        "scope": "markdown",
        "prefix": "list-to-checkbox",
        "body": [
            "${TM_SELECTED_TEXT/^([\t ]*-) ?(.*)$/$1 [ ] $2/gm}"
        ],
        "description": "Transform MD list to MD checkbox list"
    }
}

以下是它的实际应用示例：

创建自定义代码片段的主要文档页面在这里。

#4：自动重新排序导入内容

首先，我要感谢 Ryan Chenkie，是他的这条推文让我注意到了这件事：

瑞安·陈基

@ryanchenkie

刚发现 VS Code 里有个快捷键可以删除未使用的导入语句并重新排列已使用的导入语句：Shift + Option + O。

清理导入语句的时候，这个快捷键能帮你节省不少时间 🙌

2019年12月3日 下午3:17

对于 Windows 用户来说，默认情况下，该组合键为 SHIFT + ALT + O。

正如那条推文的回复所指出的，你也可以通过在配置settings.json文件中进行配置，让 VSCode 自动执行此操作，如下所示：

{
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

#5：能够为自己或公司构建自定义扩展程序

VSCode 最棒的优点之一就是它的可扩展性，以及构建和测试新扩展的便捷性。人们在讨论扩展时，往往关注的是那些炫酷或功能强大的扩展，但我想提醒大家，那些解决特定小众问题的扩展同样重要，尤其是在某些组织内部。

在讨论“工具”时，你应该思考是否可以为公司（或你自己）构建一个自定义扩展，以改进你的开发工作流程、帮助你转换遗留代码，以及/或者实现特定于你工作的流程之间的互操作。构建这样的扩展可能比你想象的要容易，而且它肯定能给人留下深刻印象。

包起来

希望这些信息对您有所帮助！感谢 VSCode 团队和开源贡献者们打造了这款革命性的代码编辑器！