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.js发行版中。你需要为节点以及NPM命令行工具，让你的路径上。

为了确认你Node.js正确安装在电脑上，打开一个新终端并输入节点 --版本你应该会看到当前安装的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中工作”教程。

你好，世界

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

创建一个名为“hello”的空文件夹，进入并打开VS Code：

mkdir hello
cd hello
code .

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

在文件资源管理器工具栏中，点击“新文件”按钮：

文件资源管理器新建文件

并给文件命名app.js:

文件资源管理器app.js

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

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

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

请注意，当你打字时控制台。 IntelliSense 在控制台物体会自动呈现给你。

主机 IntelliSense

还要注意 VS Code 知道味精是基于初始化为的字符串《你好，世界》.如果你打字MSG。你会看到IntelliSense显示所有可用的字符串函数味精.

字符串 IntelliSense

在尝试IntelliSense后，将源代码示例中多余的更改还原，并保存文件（⌘S（Windows，Linux Ctrl+S））。

运行Hello World（世界问候）

运行起来很简单app.jsNode.js。在终端上，只需输入：

node 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或点击编辑器左侧的行号旁的排水槽。排水沟里会出现一个红圈。

app.js断点集

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

跑动图标

你现在可以点击调试工具栏的绿色箭头，或按F5启动并调试“Hello World”。你的断点会被触发，你可以查看并逐步完成简单的应用流程。注意 VS Code 显示不同颜色的状态栏，表示处于调试模式，同时显示调试控制台。

你好，世界调试

既然你已经在“Hello World”中看到了VS Code的实际应用，下一节将展示如何将VS Code应用于全栈Node.js网页应用。

注：我们已经完成了“Hello World”的示例，所以在创建 Express 应用之前，请先从那个文件夹中导航出来。如果你愿意，可以删除“Hello”文件夹，因为后续攻略不需要它。

快速应用

Express 是一个非常流行的应用框架，用于构建和运行Node.js应用程序。你可以用 Express Generator 工具为新的 Express 应用做支架（创建）。Express Generator 作为 npm 模块出厂，并通过 npm 命令行工具安装NPM.

提示：来测试一下你有的NPM正确安装在你的电脑上，输入NPM——求助从终端作，你应该能看到使用文档。

通过终端运行以下程序安装快速发电机：

npm install -g express-generator

该-gSwitch会在你的机器上全局安装Express生成器，所以你可以随时随地运行。

我们现在可以搭建一个新的Express应用，名为myExpress应用通过运行：

express myExpressApp --view pug

这会创建一个名为myExpress应用根据你的申请内容。该--View 巴哥犬参数告诉生成器使用PUG模板引擎。

要安装应用的所有依赖（同样是作为npm模块发布），请进入新文件夹并执行NPM 安装:

cd myExpressApp
npm install

此时，我们应该测试我们的应用程序是否能运行。生成的 Express 应用程序具有package.json文件中包含开始运行脚本节点 ./bin/www.这样就能启动Node.js应用运行。

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

npm start

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

你的第一个Node Express应用

出色的代码编辑

关闭浏览器，从终端作myExpress应用文件夹，按CTRL+C停止Node.js服务器。

现在启动VS Code：

code .

注：如果你一直在用VS Code集成终端安装Express生成器并搭建应用支架，你可以打开myExpress应用用“打开文件夹”命令>你正在运行的VS Code实例中的文件夹。

Node.js 和 Express 的文档很好地解释了如何利用平台和框架构建丰富的应用。Visual Studio Code 将通过提供出色的代码编辑和导航体验，提升你开发这类应用的效率。

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

VS Code 使用 TypeScript 类型声明（类型）文件（例如）node.d.ts）为VS Code提供关于你在应用中使用的基于JavaScript框架的元数据。类型声明文件用 TypeScript 编写，以表达参数和函数的数据类型，使 VS Code 能够提供丰富的 IntelliSense 体验。多亏了一个叫做的功能自动类型采集你无需担心下载这些类型的声明文件，VS Code 会自动为您安装。

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

Express.Router IntelliSense

调试你的 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并在文件顶部附近设置一个断点，通过点击行号左侧的 gutter 创建 Express 应用对象。按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一起执行任务。显示错误和警告。