Visual Studio Code 中的 Node.js 教程

文章目录

你好世界#
运行 Hello World #
综合终端#
调试 Hello World #
Express 应用程序#
伟大的代码编辑#
调试您的 Express 应用程序#
部署您的应用程序#
下一步#

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 环境中。与Remote – WSL扩展结合使用时，您可以在 WSL 上下文中运行时获得完整的 VS Code 编辑和调试支持。要了解更多信息，请转到在 WSL 中进行开发或尝试在 WSL 中工作教程。

你好世界#

让我们从创建最简单的 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. IntelliSense 时，它console会自动呈现给您。

还要注意，VS Code 知道这msg是一个基于初始化的字符串'Hello World'。如果您键入，msg.您将看到 IntelliSense 显示上可用的所有字符串函数msg。

使用 IntelliSense 进行试验后，从上面的源代码示例中恢复任何额外的更改并保存文件 ( Ctrl+S )。

运行 Hello World #

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

node app.js

您应该会看到“Hello World”输出到终端，然后 Node.js 返回。

综合终端#

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

查看>终端（Ctrl+`带反引号）将打开集成终端，您可以在node app.js那里运行：

对于本演练，您可以使用外部终端或 VS Code 集成终端来运行命令行工具。

调试 Hello World #

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

要在中设置断点app.js，请将编辑器光标放在第一行并按F9或单击行号旁边的编辑器左侧装订线。排水沟中将出现一个红色圆圈。

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

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

既然您已经看到 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参数告诉发生器用哈巴狗模板引擎。

要安装应用程序的所有依赖项（再次作为 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 生成器并构建应用程序，您可以myExpressApp使用文件>打开文件夹命令从正在运行的 VS Code 实例打开文件夹。

在Node.js的和快速的文件做了伟大的工作，解释如何建立一个使用平台和框架，丰富的应用程序。Visual Studio Code 将通过提供出色的代码编辑和导航体验来提高开发这些类型应用程序的效率。

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

VS Code 使用 TypeScript 类型声明（类型）文件（例如node.d.ts）向 VS Code 提供有关您在应用程序中使用的基于 JavaScript 的框架的元数据。类型声明文件是用 TypeScript 编写的，所以它们可以表达参数和函数的数据类型，让 VS Code 提供丰富的 IntelliSense 体验。多亏了一个名为的功能Automatic Type Acquisition，您不必担心下载这些类型声明文件，VS Code 会自动为您安装它们。

您还可以编写引用其他文件中模块的代码。例如，在app.js我们需要./routes/index导出一个Express.Router类的模块中。如果在上调出 IntelliSense index，则可以看到Router类的形状。

调试您的 Express 应用程序#

您需要launch.json为 Express 应用程序创建一个调试器配置文件。单击活动栏中的运行图标，然后单击运行视图顶部的配置齿轮图标以创建默认launch.json文件。通过确保将in 属性设置为来选择Node.js环境。当第一次创建的文件，VS代码将在一个脚本，将使用该值作为（在这种情况下）的启动程序的配置。typeconfigurations"node"package.jsonstartprogram"${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 将在新终端中启动服务器并点击我们设置的断点。从那里您可以检查变量、创建监视并逐步执行代码。