本页内容
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: 初始化工作区配置 命令。
此命令会将 "deno.enable": true 添加到工作区配置（您的工作区根目录 .vscode/settings.json）。命令完成后，您将收到 Deno 工作区已初始化的通知。
这些设置（和其他设置）可通过 VS Code 设置 面板获得。在面板中，该设置为 Deno: Enable。
VS Code 具有用户和工作区设置。您可能不想在用户设置中启用 Deno，而是将其设置在工作区设置中，否则每个工作区都将默认启用 Deno。
工作区文件夹设置 跳转到标题
这些是可以设置在工作区文件夹上的设置。其余设置目前仅适用于工作区
deno.enable- 控制是否启用 Deno 语言服务器。启用后，扩展程序将禁用内置的 VS Code JavaScript 和 TypeScript 语言服务，并改用 Deno 语言服务器。布尔值，默认为falsedeno.enablePaths- 控制是否仅对工作区文件夹的特定路径启用 Deno 语言服务器。默认为空列表。deno.codeLens.test- 控制是否启用测试代码镜头。布尔值，默认为truedeno.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）。
可以通过编辑 Deno > 建议 > 导入: 主机 设置来启用或禁用单个主机/源 - 适当的 settings.json 中的 deno.suggest.imports.hosts。
缓存远程模块 跳转到标题
Deno 支持远程模块，并将获取远程模块并将其本地存储在缓存中。当您在命令行上执行诸如 deno run、deno test、deno info 或 deno install 之类的操作时，Deno CLI 将尝试获取任何远程模块及其依赖项并填充缓存。
在编辑器中开发代码时，如果模块不在缓存中，您将收到诊断信息，例如 Uncached or missing remote 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: Add Development Container Configuration Files...，选择 Show All Definitions...，然后搜索 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 报告给语言服务器的配置。
另请检查名为 TypeScript › Tsserver › Experimental: Enable Project Diagnostics 的 VS Code 配置 enableProjectDiagnostics 是否为禁用。此设置允许 TypeScript 语言服务器在后台执行以一次检查整个项目，并且 Deno 无法禁用其行为，因此即使所有其他设置都正确设置，错误仍会继续显示。
如果那里的 "enable" 设置为 true，并且错误消息仍然存在，您可能需要尝试重启 VS Code，因为扩展程序中“静音”文件内置 TypeScript 诊断的部分未按设计工作。如果重启后问题仍然存在，您可能遇到了我们没有预料到的错误，下一步是在 https://github.com/denoland/vscode_deno 上搜索问题并报告错误。