Visual Studio Code 中的 Node.js 教程

Node.js 是一个使用 JavaScript 构建快速且可扩展的服务器应用程序的平台。Node.js 是运行时，而 npm 是 Node.js 模块的包管理器。

Visual Studio Code 原生支持 JavaScript 和 TypeScript 语言，以及 Node.js 调试。但是，要运行 Node.js 应用程序，您需要在计算机上安装 Node.js 运行时。

要开始本演练，请为您的平台安装 Node.js。Node 包管理器包含在 Node.js 发行版中。您需要打开一个新的终端（命令提示符）才能让 node 和 npm 命令行工具位于您的 PATH 上。

要测试您的计算机上是否已正确安装 Node.js，请打开一个新的终端并输入 node --version，您应该会看到已安装的当前 Node.js 版本。

Linux：各种 Linux 版本都提供特定的 Node.js 包。请参阅通过包管理器安装 Node.js，以查找适合您 Linux 版本的 Node.js 包和安装说明。

Windows Subsystem for Linux：如果您使用的是 Windows，WSL 是进行 Node.js 开发的绝佳方式。您可以在 Windows 上运行 Linux 发行版并在 Linux 环境中安装 Node.js。结合使用 WSL 扩展，您可以在 WSL 上下文中运行时获得完整的 VS Code 编辑和调试支持。要了解更多信息，请访问在 WSL 中开发或尝试在 WSL 中工作教程。

Hello World

让我们从创建最简单的 Node.js 应用程序“Hello World”开始。

创建一个名为“hello”的空文件夹，导航到该文件夹并打开 VS Code

mkdir hello
cd hello
code .

提示：您可以直接从命令行打开文件或文件夹。句点“.” 指的是当前文件夹，因此 VS Code 将启动并打开 Hello 文件夹。

从文件资源管理器工具栏中，按下“新建文件”按钮

File Explorer New File

并将文件命名为 app.js

File Explorer app.js

通过使用 .js 文件扩展名，VS Code 将此文件解释为 JavaScript 并使用 JavaScript 语言服务评估其内容。请参阅 VS Code JavaScript 语言主题，详细了解 JavaScript 支持。

在 app.js 中创建一个简单的字符串变量，并将字符串内容发送到控制台

var msg = 'Hello World';
console.log(msg);

请注意，当您输入 console. 时，console 对象上的 IntelliSense 会自动显示给您。

console IntelliSense

另外请注意，VS Code 知道 msg 是一个字符串，因为它是初始化为 'Hello World'。如果您输入 msg.，您将看到 IntelliSense 显示 msg 上可用的所有字符串函数。

string IntelliSense

在尝试使用 IntelliSense 后，请还原上述源代码示例中的任何额外更改并保存文件（⌘S（Windows、Linux Ctrl+S））。

运行 Hello World

使用 Node.js 运行 app.js 很简单。从终端中，只需输入

node app.js

您应该会看到“Hello World”输出到终端，然后 Node.js 返回。

集成终端

VS Code 具有一个集成终端，您可以使用它来运行 Shell 命令。您可以直接从那里运行 Node.js，并在运行命令行工具时避免切换出 VS Code。

查看 > 终端（⌃`（Windows、Linux Ctrl+`）使用反引号字符）将打开集成终端，您可以在其中运行 node app.js

integrated terminal

在本演练中，您可以使用外部终端或 VS Code 集成终端来运行命令行工具。

调试 Hello World

如引言所述，VS Code 附带了用于 Node.js 应用程序的调试器。让我们尝试调试简单的 Hello World 应用程序。

要在 app.js 中设置断点，请将编辑器光标放在第一行并按下 F9 或单击行号旁边编辑器左侧的边距。边距中将出现一个红色圆圈。

app.js breakpoint set

要开始调试，请在活动栏中选择运行和调试视图

Run icon

现在，您可以单击调试工具栏的绿色箭头或按下 F5 来启动和调试“Hello World”。您的断点将被命中，您可以查看并逐步执行简单的应用程序。请注意，VS Code 显示了不同的颜色状态栏以指示它处于调试模式，并且显示了调试控制台。

hello world debugging

既然您已经看到了 VS Code 如何与“Hello World”配合使用，下一部分将介绍如何在完整的堆栈 Node.js Web 应用程序中使用 VS Code。

注意：我们已经完成了“Hello World”示例，因此在创建 Express 应用程序之前，请导航出该文件夹。如果需要，可以删除“Hello”文件夹，因为它在演练的剩余部分中不需要。

Express 应用程序

Express 是一个非常流行的应用程序框架，用于构建和运行 Node.js 应用程序。您可以使用 Express Generator 工具来搭建（创建）新的 Express 应用程序。Express Generator 作为 npm 模块提供，并通过使用 npm 命令行工具 npm 进行安装。

提示：要测试您的计算机上是否已正确安装 npm，请从终端中输入 npm --help，您应该会看到用法文档。

通过从终端中运行以下命令来安装 Express Generator

npm install -g express-generator

-g 开关会在您的计算机上全局安装 Express Generator，以便您可以从任何地方运行它。

现在，我们可以通过运行以下命令来搭建一个名为 myExpressApp 的新的 Express 应用程序

express myExpressApp --view pug

这将创建一个名为 myExpressApp 的新文件夹，其中包含应用程序的内容。--view pug 参数告诉生成器使用 pug 模板引擎。

要安装所有应用程序的依赖项（同样也作为 npm 模块提供），请转到新文件夹并执行 npm install

cd myExpressApp
npm install

此时，我们应该测试应用程序是否可以运行。生成的 Express 应用程序包含一个 package.json 文件，其中包含一个 start 脚本，用于运行 node ./bin/www。这将启动正在运行的 Node.js 应用程序。

从 Express 应用程序文件夹中的终端中运行

npm start

Node.js 网页服务器将启动，您可以浏览到 https://127.0.0.1:3000 查看正在运行的应用程序。

Your first Node Express App

出色的代码编辑

关闭浏览器，从 `myExpressApp` 文件夹中的终端，按 CTRL+C 停止 Node.js 服务器。

现在启动 VS Code

code .

注意：如果您一直在使用 VS Code 集成终端安装 Express 生成器并构建应用程序，您可以使用 **文件** > **打开文件夹** 命令从正在运行的 VS Code 实例中打开 `myExpressApp` 文件夹。

Node.js 和 Express 文档很好地解释了如何使用该平台和框架构建丰富的应用程序。Visual Studio Code 将通过提供出色的代码编辑和导航体验，使您在开发此类应用程序时更加高效。

打开文件 `app.js` 并将鼠标悬停在 Node.js 全局对象 `__dirname` 上。注意 VS Code 如何理解 `__dirname` 是一个字符串。更有趣的是，您可以针对 Node.js 框架获得完整的 IntelliSense。例如，您可以要求 `http` 并针对 `http` 类获得完整的 IntelliSense，就像您在 Visual Studio Code 中输入一样。

VS Code 使用 TypeScript 类型声明（类型定义）文件（例如 `node.d.ts`）为 VS Code 提供有关您在应用程序中使用的基于 JavaScript 的框架的元数据。类型声明文件是用 TypeScript 编写的，因此它们可以表达参数和函数的数据类型，从而使 VS Code 提供丰富的 IntelliSense 体验。由于一项名为 `自动类型获取` 的功能，您无需担心下载这些类型声明文件，VS Code 会自动为您安装它们。

您还可以编写引用其他文件中的模块的代码。例如，在 `app.js` 中，我们要求 `./routes/index` 模块，该模块导出一个 `Express.Router` 类。如果您在 `index` 上调出 IntelliSense，您可以看到 `Router` 类的形状。

Express.Router IntelliSense

调试 Express 应用程序

您需要为您的 Express 应用程序创建一个调试配置文件 `launch.json`。点击 **运行和调试** 在 **活动栏** (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 中，然后选择 **创建 launch.json 文件** 链接以创建一个默认的 `launch.json` 文件。通过确保 `configurations` 中的 `type` 属性设置为 `“node”` 来选择 **Node.js** 环境。当文件首次创建时，VS Code 将在 `package.json` 中查找 `start` 脚本，并将该值用作 **启动程序** 配置的 `program`（在本例中为 `"${workspaceFolder}\\bin\\www`）。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\bin\\www"
    }
  ]
}

保存新文件，并确保在 **运行和调试** 视图顶部的配置下拉列表中选择了 **启动程序**。打开 `app.js`，在 Express 应用程序对象创建的顶部附近设置一个断点，方法是点击行号左侧的边距。按 F5 启动调试应用程序。VS Code 将在一个新终端中启动服务器，并命中我们设置的断点。从那里您可以检查变量、创建监视器和逐步执行您的代码。

Debug session

部署应用程序

如果您想学习如何部署您的 Web 应用程序，请查看将应用程序部署到 Azure 教程，其中我们展示了如何在 Azure 中运行您的网站。

后续步骤

有关 Visual Studio Code 的更多内容，请尝试以下主题

Node.js 配置文件模板 - 使用一组精选的扩展、设置和片段创建一个新的配置文件。
设置 - 了解如何根据您的工作习惯自定义 VS Code。
调试 - 这是 VS Code 真正发光的地方。
视频：VS Code 调试入门 - 了解如何在 VS Code 中使用调试。
Node.js 调试 - 详细了解 VS Code 内置的 Node.js 调试功能。
调试技巧 - 针对客户端和容器调试等场景的示例。
任务 - 使用 Gulp、Grunt 和 Jake 运行任务。显示错误和警告。

10/29/2024