Visual Studio Code 可以做到这一点吗？

大约两年前，我第一次不情愿地打开了 Visual Studio Code（VS Code）。 我这样做的唯一原因是我正在处理一个 TypeScript 项目（也很不情愿），我厌倦了与编辑器和编译器以及使 TypeScript 项目工作所需的所有设置作斗争。 有人向我提到 TypeScript 在 VS Code 中“正常工作”，我惊喜地发现他们是对的。

不过我预料到了。 VS Code 来自 Microsoft，因此完全可以预期 TypeScript 可以正常工作。 我没想到的是，我在 VS Code 中需要做的几乎所有事情都“正常工作”。 我的意思是什么。 虽然本文主要关注 Web 和 JavaScript 开发人员的功能，但 VS Code 已与 Go、Python、Java 和 Ruby 集成——仅举几例。

在接下来的几个月里，我开始在 VS Code 中发现一些我觉得很了不起的东西。 我正式切换到 VS Code，从那以后我再也没有回头。 几个月来，我一直在整理我最喜欢的 VS Code 提示、技巧和扩展列表，这些提示、技巧和扩展可能会让您产生和我一样的反应，并将继续保持：“VS Code 可以做到这一点？！”

互动游乐场

了解 VS Code 细节的最佳方法之一是通过 Interactive Playground。

这是一个特殊的页面，它介绍了常见的键盘快捷键和多个光标、拆分窗格和键盘快捷键等概念。 每个示例都是交互式的，因此您可以在教程本身内练习教程。

首次打开编辑器时，交互式教程就在“欢迎”页面上：

许多人（包括我自己）完全错过了它，因为它位于“折叠”下方并靠近页面底部。 此外，谁会阅读欢迎屏幕？

注意：您可以通过打开 VS Code 命令面板Ctrl/Cmd + Shift + P并选择“Interactive Playground”随时返回交互式教程。

现在您已经掌握了基础知识，您将需要一种与您将要编写的代码一样漂亮的字体。 为此，只需 FiraCode 和 Font Ligatures。

字体连字

字体连字是包含特殊字符的字体，用于表示由多个字符组成的符号。 我们在编程中有很多这样的东西。 这些将是<= ， >= ， ==和===之类的字符。

FiraCode 是 VS Code 的一个可爱的字体连字。 首先，从 GitHub 下载 FiraCode 字体并将其添加到您的机器字体中。 然后将以下行添加到您的用户首选项文件Ctrl/Cmd + , 。

 "editor.fontFamily": "Fira Code", "editor.fontLigatures": true 

试试我上面列出的一些特殊字符，看看有什么区别。 字体连字出现在您通常不会想到的地方。 像www和&&这样的地方。 来吧，试一试，看看你发现了什么！

现在您已经有了一个不错的字体连字和一些令人愉快的新符号，是时候通过安装键盘映射来利用您多年来在以前的编辑器中建立的肌肉记忆了。

键盘映射

我对切换到 VS Code 的犹豫部分是因为我投入了一些挫折和努力来学习 Sublime Text 的键盘快捷键。 我也为我的键盘实力感到有点自豪，并且根本没有准备好放弃它。

幸运的是，我不必这样做。

VS Code 有一个叫做Keymaps的东西。 这些扩展将其所有快捷方式（嗯，几乎所有）映射到其他编辑器。 所有流行的编辑器都有键盘映射，包括 Sublime、Atom、Emacs 甚至 Eclipse！

要安装 Keymap，请按Ctrl/Cmd + K → Ctrl/ Cmd + X打开扩展搜索栏。 然后搜索“键盘映射”。

我应该注意到我已经删除了 Sublime Keymap。 经过足够的使用后，我能够重新连接我的大脑以使用 VS Code 快捷方式，因为它们开箱即用。 将键盘映射视为训练轮：当您刚开始时，它们是一个好主意，但在某些时候，您可能希望将它们取下来。

现在，如果您像我一样，拥有多台计算机，并且可以根据项目和日期在不同的地方进行编辑。 我们已经对我们的 VS Code 设置进行了一些更改，并且我们将进行更多更改。 我们不想在使用 VS Code 的任何地方重复这种配置。 这就是设置同步扩展的用武之地。

设置同步

使用 Settings Sync 扩展，您可以将所有 VS Code 设置导出到 Gist，然后从另一个 VS Code 安装中将它们全部拉下来并立即应用它们。

这也是与同事共享配置的好方法。 只需将 ID 发送给您的 Gist，他们就可以将您的所有设置同步到他们的安装中。 一些商店保持中心要点，团队的所有新开发人员都可以通过一个简单的命令获得确切的配置。 这就是生产力！

说到生产力，让我们直接进入我最喜欢的 Web 开发人员生产力工具之一：Emmet。

埃米特

Emmet 是一种流行的标记和 CSS 扩展工具，已经存在了很长一段时间。 但是，我几乎每天都会遇到一些人，他们要么没有听说过，要么是开发新手，只是在学习它。 没关系！ 我们都在不同的时间学习不同的东西。

Emmet 已融入 VS Code，因此无需额外的努力即可使其运行。 只需开始在 HTML 或 CSS 文件中输入您的 Emmet 语法，然后让编辑器完成剩下的工作。 默认情况下，VS Code 甚至会向您展示即将推出的 Emmet 扩展的预览。

与 Emmet 一起使用的一个巧妙技巧是将键盘快捷键（ Ctrl/Cmd + K → Ctr/Cmd + S打开键盘映射）映射到“用缩写换行”命令。 这类似于 Textmate 中旧的“将所选内容包装为链接”，但具有额外的好处，即能够通过更复杂的扩展一次包装多行。

Emmet 也可以用在 markdown、JSX 和.vue文件中。 要启用这些，请将正确的语言映射添加到您的用户首选项文件Ctrl/Cmd + , .

 "emmet.includeLanguages": { "javascript": "javascriptreact", "markdown": "html" },

对于 JSX，Emmet 足够聪明，可以在扩展中使用className而不是class 。

Emmet 的另一个对我来说很新的简洁功能是 Emmet 能够通过查看src中链接的图像文件来自动提供图像宽度和高度。 这适用于 HTML 和 CSS。 它还适用于项目本地托管的图像和其他 URL 上的图像。 要使用此功能，请将光标放在图像标签上，打开命令面板Ctrl/Cmd + Shift + P并选择“更新图像大小”。 魔法！

要深入了解 Emmet 是什么以及在 VS Code 中使用它的所有不同方式，请查看这篇 CSS 技巧文章。

虽然 Emmet 负责标记和 CSS 的生产力，但 VS Code 本身以智能感知的形式提供代码完成； 它可以在您可能没想到的地方工作。

JSON 文件中的智能感知

Intellisense 是一个相当知名的编辑器功能，但主要被认为只在代码文件内部。 VS Code 扩展了智能感知的经典定义，并将其添加到 JSON 文件中。 如果您将任何设置添加到用户首选项文件，您将看到这一点。 VS Code 也为package.json文件提供智能感知。 更令人印象深刻的是，它为package.json中的 npm 包提供了智能感知。 需要一个特定的包并且不记得版本？ 没问题！ VS Code 将查看 npm 并在智能感知中返回最新版本。

有些人说他们没有手动编辑他们的package.json文件。 但是，我发现自己时不时会出于某种奇怪的原因这样做，并且必须查找软件包版本对我来说总是一个巨大的痛苦。 现在它只是由 VS Code 提供给我的。 少一件事我必须猜测。

即使使用 Intellisense，这也是 JavaScript，所以除非我们非常勇敢（或沉迷于痛苦），否则我们将需要一个 linter。 VS Code 通过 ESLint 扩展具有很好的 ESLint 集成，但还有其他选项，它涉及对无类型 JavaScript 的类型检查。

键入检查您的 JavaScript

还记得我之前告诉过您的出色的 TypeScript 集成吗？ 鲜为人知的技巧之一是您也可以使用 TypeScript 编译器来检查纯 JavaScript 文件。 您可以通过在任何 JavaScript 文件的顶部添加//@ts-check来做到这一点，您将立即获得对文件的 TypeScript 错误检查。

您不想将该行添加到每个文件中，因此您可以使用 TypeScript 通过将以下行添加到用户首选项文件中来检查项目中的每个 JavaScript 文件Ctrl/Cmd + , .

 "javascript.implicitProjectConfig.checkJs": true

如果你想控制 TypeScript 的特定检查功能，只需在你的项目中放置一个.tsconfig文件。 当我说 TypeScript 在 VS Code 中“正常工作”时，我的意思是它工作得非常好，对开发人员来说几乎是无缝的。

现在您已经有了代码 linting 甚至在需要时进行类型检查，是时候让 VS Code 使用 Prettier 处理那些讨厌的格式问题了。

更漂亮

Prettier 是一个很棒的开源代码格式化工具。 它被团队（和个人）广泛使用，以确保编码风格在项目和开发人员中是通用的。 它会自动重新格式化您的代码以匹配某些已定义的标准，例如将代码包装在哪一列、如何格式化承诺以及是否使用单引号或双引号。

Prettier 在 VS Code 中通过 Prettier 扩展启用。 要安装它，打开扩展面板Ctrl/Cmd + K → Ctrl/Cmd + X并搜索“prettier”。

安装后，您将在任务栏中看到 Prettier 知道如何格式化的任何文件的 Prettier。 您可以使用“格式化文档”命令对文件调用 Prettier： Alt/Option + Shift + F。

这里有一个巧妙的技巧（如上面的视频所示）是将 VS Code 设置为保存时自动格式化。 每当保存文件时，这将调用 Prettier。 要获得此功能，请将以下设置添加到您的用户首选项文件 ( Ctrl/Cmd )。

 "editor.formatOnSave": true

更漂亮的设置也可以从用户首选项文件中进行调整。 如果您希望 Prettier 使用您的 ESLint 配置进行设置，只需指定“eslintIntegration”设置。

 "prettier.singleQuote": true, "prettier.eslintIntegration": true, "prettier.tabWidth": 2

看看你的代码现在有多漂亮！ 美丽的。 你再也不想离开你的编辑器了。 感谢 VS Code 中的终端选项，您可能永远不必这样做！

终端访问

您可能已经从上面的视频中注意到 VS Code 有一个集成的终端。 您可以通过按Ctrl + ,来启动它。 可以打开多个终端会话，并将显示在终端窗口右上角的下拉列表中。

我很难打破对 Mac 内置终端的习惯。 您可以随时使用键盘快捷键Ctrl/Cmd + Shift + C从 VS Code 在您当前正在查看的文件的确切位置打开外部终端。

除了愚蠢的终端技巧，开发人员可以做的最重要的事情之一就是与其他开发人员简单地协作来提高他们的生产力。 我们一直这样做。 我们中的一些人很幸运能坐在一起。 我们中的一些人通过 Skype 进行。 无论您如何配对程序，VS Code 都刚刚添加了一项功能，该功能可能会改变您对协作方式的看法。

实时分享

VS Code Live Share 上周刚刚在 Microsoft Connect 上发布。 它允许多个开发人员立即对一个项目进行配对。 无需将代码签入 repo 或启动屏幕共享工具。 其他开发人员可以立即在他们的编辑器中加载您的项目并实时查看您的光标，而无需对其进行任何配置。

这也适用于调试。 如果您启动调试会话，其他人在他们的编辑器中获得相同的完整调试体验。 他们甚至可以通过步入、退出和遍历代码来控制调试过程。 如果其他人更改了您的代码，它也会在您的编辑器中更改。 在你看到它在行动之前，这真的很难让你头晕目眩。 我强烈推荐观看这个简短的演示。 我仍然不确定我们是如何做到这一点的，因为开发人员没有这样的功能。

在撰写本文时，VS Code Live 共享处于预览状态，但在您阅读本文时可能已经普遍可用。 事实上，您可能已经在使用它了！

现在您的同事已经成功修复了您的所有错误（合作万岁！），是时候将所有错误都签入 GitHub。 我最喜欢的 VS Code 功能之一是 Git 集成非常好，甚至我也可以使用 Github。

Git 集成

我也很难在终端上使用 Git，因为它是一个黑盒子。 你在你的编辑器之外盲目地飞行，只有你的终端技能和 Git CLI 知识才能让你通过。 这对某些人来说可能已经足够了，但我已经开始严重依赖 VS Code 提供的可视化 Git 集成。

VS Code 会自动获取项目中的任何 Git 配置。 有一个专门用于 Git 选项的整个选项卡。 开箱即用，VS Code 支持添加、提交和推送、分支、存储和弹出，以及许多其他选项。 在 Git 选项卡中查看文件时，您会得到原始文件和差异文件之间的并排比较。 您现在还可以在代码文件中直接查看差异，甚至可以从那里恢复。

到目前为止，我们主要关注文本编辑本身，但 VS Code 非常适合一些更繁重的工作； 我们通常期望从集成开发环境（IDE）而不是文本编辑器中得到的东西。 这里有一些我的最爱。

零配置 Node.js 运行和调试

VS Code 将运行并将调试器附加到任何 JavaScript 代码，而无需任何扩展或配置。 只需按 F5 键并从下拉列表中选择“节点”。 您还可以切换到调试选项卡Ctrl/Cmd + Shift + D并单击顶部的绿色箭头按钮。 这将启动您的应用程序并附加调试器，以提供功能齐全的调试体验。

列断点

VS Code 还支持内联或列断点。 这是您在代码行中间设置断点的时候。 这对于调试 Promise 链以及在一行上执行多个函数的任何其他地方特别有用。

只需在调试会话期间右键单击并选择“添加列断点”。

构建、运行、调试和部署 Docker

Microsoft 为 VS Code 提供了一个 Docker 扩展，它允许您在 VS Code 中执行几乎所有的 Docker 操作。 事实上，VS Code 会根据你选择的运行时和项目结构自动为你的项目创建必要的 Docker 文件（尽其所能）。 对于简单的 Node.js 应用程序，这意味着零配置的 Docker 设置。

在此示例中，我使用 Express 应用程序并使用 VS Code 创建所有 Docker 和 Docker 组合文件。 VS Code 还创建了正确的调试配置，因此在我运行映像后，我可以附加 VS Code 调试器，一切正常。 该扩展还支持将映像发布到 Docker Hub 或 Azure Container Registry。

复合启动配置

虽然 Webpack 等构建工具彻底改变了我们构建应用程序的方式，但它们也带来了以前不存在的新开发挑战。 Webpack 使用它自己的内存中开发服务器来提供“热重载”，但是当你转移到生产环境时，Webpack 就不在等式了，你的服务器会接管。

基本上，现在需要作为两个独立的开发项目和一个生产项目运行。 这意味着我们通常使用 Chrome DevTools 在浏览器中调试前端应用程序，并在我们的文本编辑器中调试服务器部分。

VS Code 能够启动多个进程并通过单个启动命令将调试器附加到这两个进程。 这意味着可以直接在 VS Code 中调试前端 JavaScript 代码和服务器端 Node.js 代码。

这称为“复合启动配置”。 在上面的视频中，我使用以下代码来调试一个应用程序，该应用程序使用 Express/Cosmos DB 作为后端，使用 React 作为前端。

 { "compounds": [ { "name": "Launch Browser/Server", "configurations": ["Launch Browser", "Launch Server"] } ], "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Browser", "url": "https://localhost:3000", "webRoot": "${workspaceRoot}/src" }, { "type": "node", "request": "launch", "name": "Launch Server", "program": "${workspaceRoot}/server/server.js" } ] }

请注意，这需要安装 Chrome 调试器扩展。 MongoDB 管理

MongoDB 管理

VS Code 可以帮助您使用 Cosmos DB 扩展直观地管理和查询任何 MongoDB 或 Cosmos DB 数据库（本地或远程）。

Cosmos DB 扩展将连接到 Azure 中的任何现有 Cosmos DB 实例，但它还将连接到可通过mongodb:// URL 访问的任何 MongoDB 实例。

您可以在侧边栏中创建和删除数据库和集合，以及创建和使用 MongoDB 剪贴簿来测试您的查询。 VS Code 为 Mongo Scrapbooks 中的集合和 MongoDB API 提供了完整的智能感知。 您甚至可以在结果窗格中更改查询结果，并且更改将保留回数据库。

部署应用程序

VS Code 的另一个简洁扩展是 Azure AppService 扩展。 如果您想将应用程序部署到云端，您无需离开编辑器即可完成。

Microsoft 提供了一个名为 AppService Tools for VS Code 的扩展程序，它可以让您创建新站点、管理现有站点并通过右键单击或预构建的 shell 脚本部署代码，从而自动将代码检查到正确的 Git 中。端点来设置持续交付。

是的，VS Code 可以做到这一点

到目前为止，您可能已经理解了 VS Code 确实没有什么不能做的主题。 如果您想要某个功能，很可能编辑器已经支持它（我们甚至没有涉及 Git 集成），或者有人为您的特定用例创建了扩展。 即使这会将 Markdown 变成 Reveal.js 演示文稿！

其他资源

• “VS Code Insiders Build”，Visual Studio Code，Microsoft
• “VS Code 很棒的列表”​​，Valerii Iatsko，GitHub
• “VS Code 提示和技巧”，Valerii Iatsko，GitHub