Deno 和 Visual Studio Code

本页介绍如何使用 Visual Studio Code 和官方 vscode_deno 扩展开发 Deno 应用程序。

安装 跳转到标题#

Deno VS Code 扩展程序使用语言服务器协议直接与 Deno CLI 集成。这有助于确保您获得的代码信息与使用 Deno CLI 运行代码时的工作方式一致。

Deno 扩展程序的安装方式与 VS Code 中的其他扩展程序相同。在 VS Code 的扩展程序选项卡中搜索 Deno 并点击安装按钮，或者点击此链接将打开扩展程序页面，您可以在其中选择安装。

首次安装扩展程序后，您应该会看到一个欢迎使用该扩展程序的初始页面。（如果您错过了，或者想再次查看，请按 ⌘ ⇧ P 打开命令面板，然后运行Deno: Welcome 命令。）

在 VS Code 工作区中启用 Deno 跳转到标题#

我们意识到并非您在 VS Code 中处理的每个项目都是 Deno 项目。默认情况下，VS Code 附带内置的 TypeScript/JavaScript 语言服务，在编辑 TypeScript 或 JavaScript 文件时使用。

为了支持 Deno API，以及像 Deno CLI 一样解析模块的能力，您需要为工作区启用 Deno。最直接的方法是从 VS Code 命令面板中使用Deno: 初始化工作区配置。

]

这将激活一个助手，询问您是否要为项目启用 linting 和 Deno 不稳定 API。此命令将指示 VS Code 将这些设置存储在工作区配置（您的工作区根目录 .vscode/settings.json）中。助手完成后，您将收到一条通知，告知 Deno 已为项目设置。

这些设置（以及其他设置）可通过 VS Code 设置面板获得。在面板中，该设置是Deno: 启用，手动编辑 JSON 时，该设置是 deno.enable。

工作区文件夹设置 跳转到标题#

这些是可以针对工作区文件夹设置的设置。其余设置当前仅适用于工作区。

• deno.enable - 控制是否启用 Deno 语言服务器。启用后，扩展程序将禁用内置的 VS Code JavaScript 和 TypeScript 语言服务，并使用 Deno 语言服务器代替。布尔值，默认为 false
• deno.enablePaths - 控制是否仅为工作区文件夹的特定路径启用 Deno 语言服务器。默认为空列表。
• deno.codeLens.test - 控制是否启用测试代码镜头。布尔值，默认为 true
• deno.codeLens.testArgs - 激活测试代码镜头时传递给 deno test 的参数列表。字符串数组，默认为 ["--allow-all"]

启用项目后，扩展程序将直接从已安装的 Deno CLI 获取信息。该扩展程序还将禁用内置的 TypeScript/JavaScript 扩展程序。

在 VS Code 工作区中部分启用 Deno 跳转到标题#

在工作区（或工作区文件夹）中，可以为 Deno 启用子路径，而这些路径之外的代码将不会启用，并且将使用 VS Code 内置的 JavaScript/TypeScript 语言服务器。使用 **Deno: 启用路径** 设置（或手动编辑时使用 deno.enablePaths）。

例如，如果您有如下项目：

project
├── worker
└── front_end

如果您只想启用 worker 路径（及其子路径）以支持 Deno，则需要将 ./worker 添加到配置中的 **Deno: 启用路径** 列表中。

混合 Deno 项目 跳转到标题#

使用此功能，您可以拥有一个混合 Deno 项目，其中某些工作区文件夹启用 Deno，而某些则未启用。这在创建可能具有前端组件的项目时非常有用，您希望为该前端代码使用不同的配置。

为了支持这一点，您需要创建一个新的工作区（或将文件夹添加到现有工作区），并在设置中将其中一个文件夹的 deno.enable 设置为 true，另一个设置为 false。保存工作区配置后，您会注意到 Deno 语言服务器仅对启用的文件夹应用诊断，而其他文件夹将使用 VS Code 内置的 TypeScript 编译器为 TypeScript 和 JavaScript 文件提供诊断。

代码检查 跳转到标题#

使用 deno lint 时提供诊断的引擎也可以通过扩展程序使用。通过在设置面板中启用 **Deno: 代码检查** 设置（或在 JSON 中编辑设置时使用 deno.lint），编辑器将开始在代码中显示代码检查“警告”。有关如何使用 Deno 代码检查器的更多信息，请参阅代码检查器部分。

使用配置文件 跳转到标题#

Deno 项目不需要配置文件，但在某些情况下它可能很有用。如果您希望应用与在命令行上指定 --config 选项时相同的设置，则可以使用 **Deno: 配置文件** 选项（或手动编辑时使用 deno.config）。

Deno 扩展程序还会通过在工作区根目录中查找配置文件并应用它来自动识别和应用 deno.jsonc 或 deno.json。手动指定 **Deno: 配置文件** 选项将覆盖此自动行为。

格式化 跳转到标题#

Deno CLI 带有内置格式化程序，可以使用 deno fmt 访问，但也可以配置为由 VS Code 使用。Deno 应该在 **编辑器: 默认格式化程序** 设置的下拉列表中（或者如果您手动编辑设置，则应为 "editor.defaultFormatter": "denoland.vscode-deno"）。

设置 Deno CLI 的路径 跳转到标题#

扩展程序会在主机的 PATH 中查找 Deno CLI 可执行文件，但有时这并不理想，可以设置 **Deno: 路径**（或手动编辑时使用 deno.path）以指向 Deno 可执行文件。如果提供的路径是相对路径，它将相对于工作区的根目录进行解析。

导入建议 跳转到标题#

当尝试导入模块时，扩展程序会提供建议来完成导入。建议中将包含本地相对文件以及任何缓存的远程文件。

该扩展程序支持注册表自动完成，其中远程注册表/模块网站可以选择提供元数据，允许客户端发现模块。默认情况下，扩展程序将检查主机/来源以查看它们是否支持建议，如果支持，扩展程序将提示您是否要启用它。可以通过取消选中设置中**Deno > 建议 > 导入：自动发现**下的复选框来更改此行为。（或者，如果手动编辑，则为 `deno.suggest.imports.autoDiscover`）。

可以通过编辑相应的 `settings.json` 中的**Deno > 建议 > 导入：主机**设置 - `deno.suggest.imports.hosts` 来启用或禁用单个主机/来源。

缓存远程模块 跳转到标题#

Deno 支持远程模块，并将获取远程模块并将其本地存储在缓存中。当您在命令行上执行 `deno run`、`deno test`、`deno info` 或 `deno install` 等操作时，Deno CLI 将尝试获取任何远程模块及其依赖项并填充缓存。

在编辑器中开发代码时，如果模块不在缓存中，您将收到一个诊断信息，例如针对任何缺失的远程模块的 `未缓存或缺少远程 URL："https://deno.land/example/mod.ts"`。Deno 不会自动尝试缓存模块，除非它是来自注册表导入建议的完成（见上文）。

除了在命令行上运行命令外，扩展程序还提供了在编辑器中缓存依赖项的方法。缺少的依赖项将有一个*快速修复*，即让 Deno 尝试缓存依赖项。当编辑器位于导入说明符中时，可以通过按 CTRL . 或 ⌘ . 来访问修复，或者将鼠标悬停在说明符上并选择**快速修复...**。

命令面板中还有**Deno：缓存依赖项**命令，该命令将尝试缓存当前在编辑器中活动的模块的任何依赖项。

代码透镜 跳转到标题#

语言服务器当前支持多个代码透镜（穿插在代码中的可操作上下文信息），使您可以更深入地了解代码。大多数默认情况下是禁用的，但可以轻松启用。

Deno > 代码透镜：实现 跳转到标题#

`deno.codeLens.implementations` - 提供一个透镜，将列出代码中其他位置的任何项目的实现。

Deno > 代码透镜：引用 跳转到标题#

`deno.codeLens.references` - 提供一个透镜，将列出代码中其他位置对项目的任何引用。

Deno > 代码透镜：引用所有函数 跳转到标题#

`deno.codeLens.referencesAllFunctions` - 提供一个透镜，将列出代码中对所有函数的所有引用。所有函数都从上面提到的*引用*设置中排除。

测试代码透镜 跳转到标题#

Deno CLI 包含一个内置测试 API，可在 `Deno.test` 下使用。扩展程序和语言服务器默认启用了一个代码透镜，它提供了从编辑器内部运行测试的功能。

当您有一段提供测试的代码时

import { assert } from "jsr:@std/assert@1";

Deno.test({
  name: "a test case",
  fn() {
    let someCondition = true;
    assert(someCondition);
  },
});

您将在测试上方看到一个代码透镜

▶ Run Test

如果您点击代码镜头图标，扩展程序将启动 Deno CLI 为您运行测试并显示输出。根据您的其他设置，扩展程序将尝试使用相同的设置运行您的测试。如果您需要调整执行 deno test 时提供的参数，您可以通过设置 deno.codeLens.testArgs 来实现。

扩展程序还会尝试跟踪您是否在同一模块中解构了 Deno.test 函数或将其赋值给了一个变量。因此，您可以执行类似的操作，代码镜头仍然可以工作。

const { test: denoTest } = Deno;

denoTest({
  name: "example test",
  fn() {},
});

如果您想禁用此功能，可以通过取消设置 **Deno > 代码镜头：测试** 设置 - deno.codeLens.test 来实现。

您可以从测试资源管理器视图、代码镜头装饰或通过命令面板运行测试。您还可以使用测试资源管理器视图中的筛选器功能，从测试运行中排除某些测试。

当测试失败时，包括堆栈跟踪在内的失败消息将在 VS Code 中检查测试结果时可用。

测试配置 跳转到标题#

默认情况下，测试的执行方式类似于您在命令行上使用 deno test --allow-all。可以通过在用户或工作区设置中设置 **Deno > 测试：参数** 选项（或者如果您手动配置，则为 deno.testing.args）来更改这些默认参数。在此处添加您将与 deno test 子命令一起使用的各个参数。

根据您拥有的其他设置，这些选项将自动合并到运行测试时使用的“命令行”中，除非在 **Deno > 测试：参数** 设置中明确提供。

使用调试器 跳转到标题#

该扩展程序提供了与内置 VS Code 调试器的集成。您可以通过以下方式生成配置：转到“运行和调试”面板，单击“创建 launch.json 文件”，然后从可用的调试器选项中选择“Deno”选项。

任务 跳转到标题#

虽然扩展程序直接与语言服务器通信，但有时您可能更喜欢通过 CLI 运行 Deno 命令。您可以在工作区根目录下的 deno.json 文件的 tasks 字段 中定义任务。

使用开发容器 跳转到标题#

使用 VS Code 的开发容器是拥有隔离开发环境的好方法，无需担心必须在本地系统上安装 Deno CLI。Deno 支持开发容器，并且 Deno 扩展程序可以与其一起使用。

如果您有一个现有的 Deno 项目，并且想要为其添加开发容器支持，请在命令面板中执行 **Remote-Containers: 添加开发容器配置文件...**，选择 **显示所有定义...**，然后搜索 Deno 定义。这将设置一个基准 .devcontainer 配置，该配置将在容器中安装最新版本的 Deno CLI。

添加后，VS Code 将提示您是否要在开发容器中打开项目。如果选择是，VS Code 将构建开发容器并使用开发容器重新打开工作区，该容器将在其中安装 Deno CLI 和 vscode_deno 扩展程序。

故障排除 跳转到标题#

以下章节涵盖了您在使用扩展程序时可能遇到的挑战，并尝试给出可能的原因。

错误/诊断 跳转到标题#

导入路径不能以 '.ts' 扩展名结尾。 或 找不到名称 'Deno'。

这通常是 Deno 项目未启用 Deno 的情况。如果您查看诊断的来源，您可能会看到 ts(2691)。 ts 表示它来自 VS Code 内置的 TypeScript/JavaScript 引擎。您需要检查您的配置是否设置正确，以及 Deno: 启用 设置 - deno.enable 是否为 true。

您还可以使用命令面板中的 Deno: 语言服务器状态 来检查 Deno 语言服务器认为您当前的活动配置是什么。这将显示来自语言服务器的文档，其中包含名为“工作区配置”的部分。这将为您提供 VS Code 报告给语言服务器的配置。

还要检查名为 enableProjectDiagnostics 的 VS Code 配置（位于 TypeScript › Tsserver › 实验性：启用项目诊断）是否已**禁用**。此设置允许 TypeScript 语言服务器在后台执行以一次检查整个项目，而 Deno 无法禁用其行为，因此即使所有其他设置都正确设置，错误仍然会显示。

如果其中的 "enable" 设置为 true，并且错误消息仍然存在，您可能需要尝试重新启动 VS Code，因为扩展程序中“静音”内置 TypeScript 诊断文件的部分未按设计工作。如果重新启动后问题仍然存在，您可能遇到了我们未预料到的错误，下一步是在 https://github.com/denoland/vscode_deno 搜索问题并报告错误。