使用 Visual Studio Code

在本节中，我们将深入探讨使用 Visual Studio Code 和官方 vscode_deno 扩展开发 Deno 应用程序。

安装 跳转到标题#

vscode 扩展使用语言服务器协议直接集成到 Deno CLI。这有助于确保您获得的有关代码的信息与您尝试在 Deno CLI 下运行代码时代码的工作方式保持一致。

Deno 扩展与 vscode 中的其他扩展一样安装，方法是在 vscode 中浏览扩展，然后选择安装Deno扩展。或者，如果您已安装 vscode，则可以通过 此链接 查看扩展，如果您尚未安装，则可以安装它。

首次安装扩展后，您应该会收到一个欢迎页面，欢迎您使用该扩展。（如果您错过了它，或者想再次查看它，只需从命令面板中使用Deno: Welcome命令。）

配置扩展 跳转到标题#

以下部分将详细介绍如何配置扩展以最适合您，并将涵盖大多数可用的设置。

Deno 启用工作区 跳转到标题#

我们意识到，您可能不是使用 vscode 编辑的每个项目都是 Deno 项目。默认情况下，vscode 带有一个内置的 TypeScript/JavaScript 语言服务，在编辑 TypeScript 或 JavaScript 文件时使用该服务。

为了获得对 Deno API 的支持以及像 Deno CLI 一样解析模块的能力，您需要为工作区启用 Deno。最直接的方法是使用 vscode 命令面板 中的Deno: Initialize Workspace Configuration。这将激活一个助手，它会询问您是否还想为该项目启用代码检查和 Deno 不稳定 API。此命令将指示 vscode 将这些设置存储在工作区配置（您的工作区根目录.vscode/settings.json）中。助手完成后，您将收到一个通知，表明 Deno 已为该项目设置。

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

⚠️ vscode 具有用户和工作区设置。您可能不想在用户设置中启用 Deno，因为这样默认情况下，每个工作区都将启用 Deno。

当启用项目时，扩展将直接从已安装的 Deno CLI 获取信息。扩展还将静音内置的 TypeScript/JavaScript 扩展。

部分 Deno 启用工作区 跳转到标题#

虽然 vscode 支持 工作区文件夹，但它们可能难以配置和使用。因此，引入了选项Deno: 启用路径（或如果手动编辑则为"deno.enablePaths"）。在给定的工作区（或工作区文件夹）中，可以为 Deno 启用子路径，而这些路径之外的代码将不会被启用，并且将使用 vscode 内置的 JavaScript/TypeScript 语言服务器。

例如，如果您有一个这样的项目

project
├── worker
└── front_end

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

使用 linting 跳转到标题#

与使用deno lint时提供诊断信息的相同引擎也可以通过扩展使用。通过在设置面板中启用Deno: Lint设置（或如果在 JSON 中编辑设置则为deno.lint），编辑器应该开始在您的代码中显示 lint“警告”。有关如何使用 Deno linter 的更多信息，请参阅Linter部分。

使用导入映射 跳转到标题#

可以在编辑器中使用导入映射。选项Deno: 导入映射（或如果手动编辑则为deno.importMap）应设置为导入映射文件的 value。如果路径是相对路径，它将相对于工作区的根目录解析。

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

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

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

使用格式化 跳转到标题#

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

有关如何使用格式化程序的更多信息，请参阅代码格式化程序。

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

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

导入建议 跳转到标题#

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

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

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

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

Deno 支持远程模块，并将获取远程模块并将其存储在本地缓存中。当您在命令行上执行诸如 deno run、deno test、deno info 或 deno cache 之类的操作时，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 "https://deno.land/std@0.224.0/assert/mod.ts";

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”设置来实现。

使用调试器 跳转到标题#

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

默认情况下，如果配置的 Deno 版本大于 1.29，则配置将使用 --inspect-wait 标志，或者对于低于 1.29 的版本使用 --inspect-brk。这确保调试器有机会连接到您的程序并注册代码中指定的断点。

任务 跳转到标题#

扩展直接与语言服务器通信，但对于某些开发任务，您可能希望直接执行 CLI。扩展提供了一个任务定义，允许您创建从编辑器中执行 deno CLI 的任务。

Deno CLI 任务 跳转到标题#

Deno CLI 任务的模板具有以下接口，可以在工作区中的 tasks.json 中进行配置

interface DenoTaskDefinition {
  type: "deno";
  // This is the `deno` command to run (e.g. `run`, `test`, `cache`, etc.)
  command: string;
  // Additional arguments pass on the command line
  args?: string[];
  // The current working directory to execute the command
  cwd?: string;
  // Any environment variables that should be set when executing
  env?: Record<string, string>;
}

编辑器中一些有用的命令被配置为模板，可以通过选择命令面板中的“任务：配置任务”并搜索 deno 任务来添加到您的工作区。

以下是一个在 tasks.json 中使用 deno run mod.ts 的示例

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "deno",
      "command": "run",
      "args": [
        "mod.ts"
      ],
      "problemMatcher": [
        "$deno"
      ],
      "label": "deno: run"
    }
  ]
}

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

Deno 语言服务器和此扩展支持 多根工作区 配置，其中某些设置可以应用于工作区内的工作区文件夹。

当您将文件夹添加到工作区并打开设置时，您将可以访问每个文件夹的设置。如果您查看文件夹中的 .vscode/settings.json，您将看到一个视觉指示，指示哪些设置适用于文件夹，哪些设置来自工作区配置。

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

这些是可以在工作区文件夹上设置的设置。其余设置目前仅适用于工作区。

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

混合 Deno 项目 跳转到标题#

虽然您可以使用此功能启用混合 Deno 项目，但您可能需要考虑 部分 Deno 启用工作区。但使用此功能，您可以拥有一个混合 Deno 项目，其中一些工作区文件夹已启用 Deno，而另一些则没有。这在创建可能具有前端组件的项目时很有用，您希望为该前端代码使用不同的配置。

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

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

使用 vscode 的 开发容器 是一个很好的方法，可以拥有一个隔离的开发环境，而无需担心在本地系统上安装 Deno CLI。

要使用开发容器，您需要安装一些 先决条件

• Docker Desktop
• Visual Studio Code 或 Visual Studio Code Insiders
• 远程开发扩展包

开发容器的配置方式是在工作区中包含一个 .devcontainer 文件夹，其中包含文件夹中的配置信息。如果您打开一个已经包含 Deno 开发容器的项目，系统会提示您构建开发容器并在该容器下访问项目。一切都应该“正常工作”。

如果您有一个现有的 Deno 项目，您想为其添加开发容器支持，您需要在命令面板中执行命令 Remote-Containers: Add Development Container Configuration Files...，然后选择 Show All Definitions...，然后搜索 Deno 定义。这将为您设置一个基本的 .devcontainer 配置，它将在容器中安装最新版本的 Deno CLI。

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

故障排除 跳转到标题#

以下部分将介绍您在使用扩展程序时可能遇到的挑战，并尝试给出可能的原因。

错误/诊断信息，例如导入路径不能以“.ts”扩展名结尾。或找不到名称“Deno”。 跳转到标题#

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

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

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

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