VS Code 简介

与 VS Code 的集成工具

正如我们在前一章中所学，测试驱动开发的核心在于快速迭代。你不必等到完成整个功能后才得知代码是否正常工作，而是将功能拆分为小块，在每完成一块时就能立即获得反馈。

理想情况下，用于 TDD 的反馈应当是自动且快速的。我们已经看到 Jest 的监视模式在这一点上非常有帮助。但通过将反馈直接整合到你的代码编辑环境中，你可以做得更好。

本章将介绍这个开发环境。我们将从 VS Code 开始——一款功能强大且高度可定制的编辑器。随后，你会在这个开发环境中引入一些新工具：ESLint（用于检测常见的编码错误）和 Prettier（自动格式化代码，让你专注于代码实质而非样式）。最后，你还将体验 Wallaby。这是一款神奇的软件，它连接你的代码与测试，为你提供实时反馈。

目标是让你熟悉现代 JavaScript 开发栈中的各项工具。虽然本章略显偏离主线，但当你开始挑战 React 开发时（从《使用 Enzyme 测试 React》一章开始），你会发现这里介绍的一整套辅助工具极为宝贵。

如果你对当前开发环境已感到舒适，可以快速浏览本章。我们的目的不是说服你切换到 VS Code，而是通过配置你的测试库和代码检查工具，让它们默默监控你的代码，从而最小化你与工具之间的摩擦。你无需手动运行命令即可查看测试结果。

什么是 VS Code

微软的 Visual Studio Code（简称 VS Code）是代码编辑器领域的一个较新成员。它于 2015 年首次发布，迅速成为 JavaScript 社区最受欢迎的编辑器之一。事实上，根据 2018 年的《JavaScript 状态报告》，它是最受欢迎的编辑器。让 VS Code 独特之处在于其极强的可扩展性。围绕它的插件生态系统非常丰富，尤其是在 JavaScript 开发方面，我们很快就会看到这一点。

Visual Studio 与 VS Code
不要将 Visual Studio Code 与 Visual Studio 混淆。两者之间的相似度，就像 JavaScript 和 Java 一样，是一对奇怪地共用品牌名称的产物。Visual Studio 是专为 Windows 设计的企业级商业 IDE，而 VS Code 是一款简洁、跨平台的文本编辑器，灵感来自 Sublime Text 和 Atom。它也是 完全开源的。

在本节中，我们将通过使用 VS Code 来启动一个新的测试驱动型 JavaScript 项目，逐步了解它的功能。

快速入门：VS Code 与集成终端

首先，下载并安装 最新的 VS Code 版本。打开它并四处看看。本课程仅涵盖编辑器的基本功能。如需了解界面中所有元素的详细信息，请参阅官方文档中的 用户界面 页面。

在 VS Code 中最重要的功能是 命令面板，如下方截图所示。命令面板是一个可搜索的完整命令列表，包含 VS Code 支持的所有操作。每当听到某个命令名称时，你都可以通过命令面板找到并执行它。打开命令面板的方法是按下 ⇧ ⌘ P（macOS）或 ⇧ ⌃ P（Windows 和 Linux）。你也可以点击工作区左下角的齿轮图标，在上下文菜单中选择“命令面板……”。

如果你习惯使用其他编辑器的快捷键，可以通过安装键盘映射来更容易地过渡到 VS Code。键盘映射是一种 VS Code 插件，用于添加快捷键绑定。从命令面板中选择“首选项：键盘映射”，侧边栏会显示所有可用的键盘映射。点击对应你最喜爱编辑器的那个绿色“安装”按钮，然后点击替换出现的蓝色“重启”按钮。现在，熟悉的快捷键就准备好了。

如果你使用的是 macOS，还有一条 VS Code 命令建议立即运行：“Shell Command: 将 code 命令添加到 PATH”。code 工具允许你从命令行打开文件和目录。如果你使用的是 Windows 或 Linux，code 应该已经自动安装。

现在再仔细看看界面。大部分工作区被编辑区域占据。默认情况下，该区域显示欢迎页面。关闭这个标签页。当没有文件打开时，编辑区域会显示一个方便的常用快捷键列表，如截图所示。

• 现在尝试其中一个快捷键：“切换终端”（^ `）。一个终端窗口将从屏幕底部弹出。对于习惯在编辑器和终端之间频繁切换的开发者来说，这个集成终端堪称革命性的改进。试着用它创建本章项目的目录 test-driven-palindromes：

  1$ mkdir test-driven-palindromes

• 然后使用 code 命令行工具打开该目录。默认情况下，code [dir] 会在新窗口中打开指定目录。由于我们不需要保留现有工作区，可以加上 -r 标志（即 --reuse-window）：

  1$ code -r test-driven-palindromes

  现在 VS Code 知道你正在 test-driven-palindromes 目录下进行项目开发，这使得编辑器能够以多种方式协助你。

• 例如，每个新的终端实例都会以 test-driven-palindromes 作为工作目录。试试看：

  1$ pwd
  2/Users/tburnham/code/test-driven-palindromes

• 现在开始构建我们的新项目。第一个需要的文件是 package.json。使用 npm init -y 以默认设置创建一个：

  1$ npm init -y
  2Wrote to /Users/tburnham/code/test-driven-palindromes/package.json:
  3
  4{
  5  "name": "test-driven-palindromes",
  6  "version": "1.0.0",
  7  "description": "",
  8  "main": "index.js",
  9  "scripts": {
  10    "test": "echo \"Error: no test specified\" && exit 1"
  11  },
  12  "keywords": [],
  13  "author": "",
  14  "license": "ISC"
  15}

  通过点击资源管理器侧边栏中的文件，或使用便捷的“转到文件”命令（macOS 上为 ⌘ P，Windows 和 Linux 上为 ^ P）来打开新的 package.json。如第一章所述，添加 "private": true 字段，注意 JSON 要求每个字段末尾都有逗号。（如果忘记，VS Code 会用红色高亮显示无效的 JSON 语法，提醒你。）

• 然后安装 Jest：

  1$ npm install --save-dev jest@23.6.0

• 最后，将模板脚本 "test" 替换为 "jest"，如前一章所示：

1{
2  "name": "test-driven-palindromes",
3  "private": true,
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "test": "jest"
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "jest": "^23.6.0"
15  }
16}

然后再次切换终端（^ `）将其隐藏。接下来的部分你将不再需要它。