在 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 包和安装说明。
适用于 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
文件夹。
在文件资源管理器工具栏中,按下“新建文件”按钮
并将文件命名为 app.js
通过使用 .js
文件扩展名,VS Code 会将此文件解释为 JavaScript,并将使用 JavaScript 语言服务评估其内容。请参阅 VS Code JavaScript 语言主题以了解有关 JavaScript 支持的更多信息。
在 app.js
中创建一个简单的字符串变量,并将字符串内容发送到控制台
var msg = 'Hello World';
console.log(msg);
请注意,当你键入 console.
时,会自动向你显示 console
对象的 IntelliSense。
另请注意,VS Code 根据初始化为 'Hello World'
来判断 msg
是一个字符串。如果你键入 msg.
,你将看到 IntelliSense 显示 msg
上可用的所有字符串函数。
在尝试使用 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
在本演练中,你可以使用外部终端或 VS Code 集成终端来运行命令行工具。
调试 Hello World
如引言中所述,VS Code 内置了 Node.js 应用的调试器。让我们尝试调试我们简单的 Hello World 应用。
要在 app.js
中设置断点,将编辑器光标放在第一行,然后按 F9,或单击行号旁边的编辑器左侧空白处。空白处将出现一个红色圆圈。
要开始调试,请在活动栏中选择运行和调试视图
现在你可以点击调试工具栏的绿色箭头或按 F5 启动并调试“Hello World”。断点将被命中,你可以查看和单步执行简单的应用。请注意,VS Code 会显示不同颜色的状态栏以指示它处于调试模式,并且会显示调试控制台(DEBUG CONSOLE)。
现在你已经看到 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 全局安装在你的机器上,这样你就可以从任何地方运行它。
现在我们可以通过运行以下命令脚手架一个新的名为 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 Web 服务器将启动,你可以浏览到 http://localhost:3000 查看正在运行的应用。
出色的代码编辑
关闭浏览器,并在 myExpressApp
文件夹的终端中,按 CTRL+C 停止 Node.js 服务器。
现在启动 VS Code
code .
注意:如果你一直在使用 VS Code 集成终端安装 Express generator 并脚手架应用,你可以使用文件 > 打开文件夹命令从正在运行的 VS Code 实例中打开
myExpressApp
文件夹。
Node.js 和 Express 文档很好地解释了如何使用该平台和框架构建丰富的应用。Visual Studio Code 将通过提供出色的代码编辑和导航体验,让你在开发这些类型的应用时更加高效。
打开 app.js
文件并将鼠标悬停在 Node.js 全局对象 __dirname
上。请注意 VS Code 如何识别 __dirname
是一个字符串。更有趣的是,你可以对 Node.js 框架获得完整的 IntelliSense。例如,你可以在 Visual Studio Code 中键入时 require http
并获得完整的 http
类 IntelliSense。
VS Code 使用 TypeScript 类型声明(typings)文件(例如 node.d.ts
)为 VS Code 提供关于你在应用中使用的基于 JavaScript 的框架的元数据。类型声明文件使用 TypeScript 编写,因此它们可以表达参数和函数的数据类型,从而使 VS Code 提供丰富的 IntelliSense 体验。得益于一个名为 自动类型获取
的功能,你无需担心下载这些类型声明文件,VS Code 会自动为你安装它们。
你还可以编写引用其他文件中模块的代码。例如,在 app.js
中,我们 require 了 ./routes/index
模块,该模块导出一个 Express.Router
类。如果你在 index
上调出 IntelliSense,你可以看到 Router
类的结构。
调试你的 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 将在新终端中启动服务器并命中我们设置的断点。从那里你可以检查变量、创建监视和单步执行代码。
部署你的应用
如果你想了解如何部署你的 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 运行任务。显示错误和警告。