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 发行版中。您需要打开一个新的终端(命令提示符),以便 nodenpm 命令行工具能够加入到您的 PATH 环境变量中。

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

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

适用于 Linux 的 Windows 子系统 (WSL):如果您使用的是 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

另请注意,根据对 'Hello World' 的初始化,VS Code 知道 msg 是一个字符串。如果您键入 msg.,您将看到智能感知显示 msg 上可用的所有字符串函数。

string 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。

查看 (View) > 终端 (Terminal)(使用反引号键 ⌃`(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 and Debug) 视图

Run icon

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

hello world debugging

既然您已经见识了 VS Code 运行“Hello World”的实际效果,下一节将展示如何将 VS Code 用于全栈 Node.js Web 应用程序。

注意:我们的“Hello World”示例已经完成,因此在创建 Express 应用之前,请退出该文件夹。如果您愿意,可以删除“Hello”文件夹,因为其余演练不需要它。

一个 Express 应用程序

Express 是一个非常流行的应用程序框架,用于构建和运行 Node.js 应用程序。您可以使用 Express 生成器(Express Generator)工具来脚手架(创建)一个新的 Express 应用程序。Express 生成器作为 npm 模块发布,并使用 npm 命令行工具 npm 进行安装。

提示:要测试您的计算机上是否正确安装了 npm,请从终端输入 npm --help,您应该会看到使用说明文档。

通过在终端中运行以下命令来安装 Express 生成器

npm install -g express-generator

-g 开关将 Express 生成器全局安装在您的计算机上,因此您可以从任何地方运行它。

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

express myExpressApp --view pug

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

要安装应用程序的所有依赖项(同样作为 npm 模块发布),请进入新文件夹并执行 npm install

cd myExpressApp
npm install

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

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

npm start

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

Your first Node Express App

出色的代码编辑体验

关闭浏览器,并在 myExpressApp 文件夹的终端中,通过按 CTRL+C 停止 Node.js 服务器。

现在启动 VS Code

code .

注意:如果您一直使用 VS Code 集成终端来安装 Express 生成器并搭建应用程序的脚手架,则可以使用文件 (File) > 打开文件夹 (Open Folder) 命令从当前运行的 VS Code 实例中打开 myExpressApp 文件夹。

Node.jsExpress 文档在解释如何使用该平台和框架构建功能丰富的应用程序方面做得非常出色。Visual Studio Code 通过提供出色的代码编辑和导航体验,将使你在开发此类应用程序时更具效率。

打开文件 app.js 并将鼠标悬停在 Node.js 全局对象 __dirname 上。请注意 VS Code 是如何理解 __dirname 是一个字符串的。更有趣的是,你可以针对 Node.js 框架获得完整的智能感知。例如,你可以引入 http,并在 Visual Studio Code 中键入时针对 http 类获得完整的智能感知。

http IntelliSense

VS Code 使用 TypeScript 类型声明(typings)文件(例如 node.d.ts)向 VS Code 提供有关你在应用程序中使用的基于 JavaScript 的框架的元数据。类型声明文件是用 TypeScript 编写的,因此它们可以表达参数和函数的数据类型,从而允许 VS Code 提供丰富的智能感知体验。多亏了一项名为 Automatic Type Acquisition(自动类型获取)的功能,你不必担心下载这些类型声明文件,VS Code 会为你自动安装它们。

你还可以编写引用其他文件中模块的代码。例如,在 app.js 中,我们引入了 ./routes/index 模块,该模块导出了一个 Express.Router 类。如果你在 index 上调出智能感知,你可以看到 Router 类的结构形态。

Express.Router IntelliSense

调试你的 Express 应用

你需要为你的 Express 应用程序创建一个调试器配置文件 launch.json。点击活动栏 (Activity Bar) 中的运行和调试 (Run and Debug)⇧⌘D(Windows、Linux Ctrl+Shift+D),然后选择创建 launch.json 文件 (create a launch.json file) 链接来创建一个默认的 launch.json 文件。通过确保 configurations 中的 type 属性设置为 "node" 来选择 Node.js 环境。首次创建文件时,VS Code 将在 package.json 中查找 start 脚本,并将该值用作启动程序 (Launch Program) 配置的 program(在此情况下为 "${workspaceFolder}\\bin\\www)。

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

保存新文件,并确保在运行和调试 (Run and Debug) 视图顶部的配置下拉菜单中选择了启动程序 (Launch Program)。打开 app.js,并通过点击行号左侧的空白处,在文件顶部附近创建 Express 应用对象的地方设置一个断点。按 F5 开始调试应用程序。VS Code 将在一个新终端中启动服务器并命中我们设置的断点。从那里你可以检查变量、创建监视并单步执行代码。

Debug session

部署你的应用程序

如果你想学习如何部署你的 Web 应用程序,请查看将应用程序部署到 Azure (Deploying Applications to Azure) 教程,我们在其中展示了如何在 Azure 中运行你的网站。


下一步计划

Visual Studio Code 还有更多内容等待你去探索,请尝试以下主题

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.