Node.js教程在Visual Studio Code中

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的发行版中。你需要为节点和npm将命令行工具添加到你的 PATH 中。

要测试你是否在电脑上正确安装了Node.js，请打开一个新的终端并输入节点 --版本你应该能看到当前安装的Node.js版本。

Linux：针对各种 Linux 发行版，有特定的 Node.js 软件包。请参阅 通过包管理器安装 Node.js 以找到适合您 Linux 版本的 Node.js 软件包和安装说明。

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

Hello World

让我们通过创建最简单的 Node.js 应用程序 "Hello World" 来开始吧。

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

创建目录 你好
更改目录 你好
代码 .

提示： 你可以直接从命令行中打开文件或文件夹。 点 '.' 表示当前文件夹，因此 VS Code 将启动并打开 你好文件夹。

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

并命名文件app.js输入：:

通过使用.js 文件扩展名，VS Code 将此文件解释为 JavaScript 并将使用 JavaScript 语言服务评估内容。请参阅 VS Code JavaScript 语言 专题以了解更多有关 JavaScript 支持的信息。

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

变量 消息 = 'Hello World';
控制台.记录(消息);

请注意，当你输入控制台。 IntelliSense 在 控制台对象已自动呈现给您。

同时请注意，VS Code 知道消息是一个基于初始化的字符串'Hello World'. 如果你输入消息。你会看到IntelliSense显示所有可用的字符串函数消息输入：.

在尝试了IntelliSense之后，撤销上面源代码示例中的任何额外更改并保存文件 (⌘S (Windows, Linux Ctrl+S))。

运行 Hello World

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

节点 app.js

你应该会看到 "Hello World" 在终端中输出，然后 Node.js 会返回。

集成终端

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

视图 > 终端 (⌃` (Windows, Linux Ctrl+`) 与反引号字符) 将打开集成终端，您可以运行 节点 app.js那里：

对于此操作指南，您可以使用外部终端或 VS Code 集成终端来运行命令行工具。

调试 Hello World

正如介绍中提到的，VS Code 随附了一个用于 Node.js 应用程序的调试器。让我们尝试调试我们的简单 Hello World 应用程序。

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

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

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

既然你已经通过“Hello World”看到了 VS Code 的使用情况，下一节将展示如何使用 VS Code 与一个全栈 Node.js 网络应用程序一起工作。

注意：我们已经完成了“Hello World”示例，所以请在创建Express应用之前导航出该文件夹。如果您不打算在后续步骤中使用，可以删除“Hello”文件夹。

一个 Express 应用程序

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

提示： 测试你是否已经获得了 npm正确安装在您的计算机上，输入npm --帮助从终端输入并查看使用文档。

在终端中运行以下命令安装Express Generator：

npm install -g express-generator

该输入：-g切换将全局安装 Express Generator 到你的机器上，这样你就可以在任何地方运行它。

我们现在可以搭建一个新的名为Express应用程序我的快递应用通过运行：

表达 我的Express应用 --视图 pug

这创建了一个名为的新文件夹我的快递应用与您的申请内容。--查看 pug参数告诉生成器使用pug模板引擎。

要安装所有应用程序的依赖项（再次作为npm模块提供），请转到新文件夹并执行npm 安装输入：:

cd myExpressApp
npm 安装

此时，我们应该测试我们的应用程序是否能正常运行。生成的Express应用程序有一个package.json文件包括一个开始脚本运行节点./bin/www这将启动Node.js应用程序。

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

npm 开始

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

很棒的代码编辑

关闭浏览器，并从终端中我的快递应用 文件夹，按 CTRL+C 停止 Node.js 服务器。

现在启动 VS Code:

代码 .

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

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

打开文件app.js并悬停在Node.js全局对象上__dirname注意 VS Code 理解到__dirname是一个字符串。更有趣的是，你可以在Node.js框架中获得完整的IntelliSense。例如，你可以要求对不起，我无法处理你提供的内容。并获得对 的完整 IntelliSense 支持对不起，我无法处理你提供的内容。在 Visual Studio Code 中按需编写类。

VS Code 使用 TypeScript 类型声明 (typings) 文件（例如node.d.ts) 提供关于您在应用程序中使用的基于JavaScript的框架的元数据。类型声明文件是用TypeScript编写的，因此它们可以表达参数和函数的数据类型，使VS Code能够提供丰富的IntelliSense体验。感谢一个名为 的功能。自动类型获取, 你不必担心下载这些类型的声明文件，VS Code 会自动为你安装它们。

你也可以编写引用其他文件中模块的代码。例如，在app.js我们需要./routes/index模块，导出一个Express.Router类。如果你在 索引，你可以看到的形状路由器类。

调试你的 Express 应用程序

您需要创建一个调试器配置文件launch.json 为你的 Express 应用程序。点击 运行和调试 在 活动栏 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 然后选择 创建 launch.json 文件 链接以创建默认的 launch.json 文件。选择 Node.js 环境，确保 类型物业在配置设置为"节点"当文件首次创建时，VS Code 会查找package.json为一个开始脚本并会将该值用作程序（在这种情况中是"${workspaceFolder}\\bin\\www") 对于 启动程序 配置。

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

保存新文件并确保启动程序在运行和调试视图顶部的配置下拉菜单中已选中。打开app.js 并在文件顶部创建 Express 应用程序对象的位置设置一个断点，通过点击行号左侧的 gutter 来实现。按 F5 以开始调试应用程序。VS Code 将在新终端中启动服务器，并到达我们设置的断点。从那时起，您可以检查变量，创建观察点，并逐步执行您的代码。

部署您的应用程序

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

下一步

Visual Studio Code 中有许多内容值得探索，请尝试以下主题：

• Node.js 个人资料模板 - 创建一个新的 个人资料，包含精选的扩展、设置和片段。
• 设置 - 了解如何根据您的工作方式定制 VS Code。
• 调试 - 这是VS Code真正闪耀的地方。
• 视频：在 VS Code 中开始调试 - 了解如何在 VS Code 中使用调试。
• Node.js 调试 - 了解更多关于 VS Code 内置的 Node.js 调试的信息。
• 调试指南 - 客户端和容器调试等场景的示例。
• 任务 - 使用 Gulp、Grunt 和 Jake 运行任务。显示错误和警告。