试试 VS Code 中的 ！

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 Package Manager 包含在 Node.js 发行版中。您需要打开一个新的终端（命令提示符），以便 node 和 npm 命令行工具位于您的 PATH 中。

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

Linux：针对不同版本的 Linux 提供了特定的 Node.js 包。请参阅通过包管理器安装 Node.js，以找到适合您 Linux 版本的 Node.js 包和安装说明。

适用于 Linux 的 Windows 子系统：如果您使用的是 Windows，WSL 是进行 Node.js 开发的绝佳方式。您可以在 Windows 上运行 Linux 发行版，并将 Node.js 安装到 Linux 环境中。与 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 是一个字符串。如果您键入 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”，下一节将演示如何使用 VS Code 开发一个全栈 Node.js Web 应用。

注意：我们已经完成了“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，这样您就可以在任何地方运行它。

现在，我们可以通过运行以下命令来脚手架一个新的 Express 应用，名为 myExpressApp

express myExpressApp --view pug

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

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

cd myExpressApp
npm install

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

在 Express 应用文件夹的终端中，运行

npm start

Node.js Web 服务器将启动，您可以浏览到 http://localhost: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。例如，您可以在 Visual Studio Code 中导入 http 并获取针对 http 类的完整 IntelliSense，就像您键入一样。

http IntelliSense

VS Code 使用 TypeScript 类型声明（typings）文件（例如 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 还有很多值得探索的地方，请尝试以下主题：

06/12/2025