WebStorm 2025.2 Help

Deno

WebStorm 与 Deno 集成,这是一个 JavaScript 与 TypeScript 的运行时,提供所有编码辅助功能,例如代码补全、跨代码库导航、重构、快速文档查看以及运行、调试和测试。

开始之前

请按照 从 JetBrains Marketplace 安装插件中的说明,在 设置 | 插件 页签 Marketplace 上安装并启用 Deno 插件。

安装 Deno

打开您的命令行 shell 或嵌入的 终端Alt+F12 ),然后根据操作系统输入下列命令之一:

  • 适用于 macOS 的 curl -fsSL https://deno.land/install.sh | sh

  • 适用于 Windows 的 irm https://deno.land/install.ps1 | iex

  • 适用于 Linux 的 curl -fsSL https://deno.land/install.sh | sh

详细信息请参见 Deno 官方网站

创建新 Deno 项目

  1. 欢迎 屏幕上点击 新建项目 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 项目 对话框

  2. 在左侧窗格中选择 Deno

  3. 在右侧窗格:

    1. 指定将存储项目相关文件的文件夹路径。

    2. Deno 字段中指定要使用的 Deno 可执行文件的位置。 如果您按照标准安装流程操作,WebStorm 会自动检测可执行文件并填充该字段。

    新建项目向导 - Deno
  4. 当您点击 创建 时,WebStorm 会在后台运行 deno init <project_name> 命令。 将生成包含 deno.json main.ts main_test.ts 文件的 Deno 项目。 详细信息请参见 Deno 官方网站

从版本控制中检出应用程序源代码

  1. 欢迎 屏幕上点击 克隆存储库克隆

    或者,您也可以从主菜单选择 文件 | 新建 | 来自版本控制的项目…Git | 克隆…版本控制 | 从版本控制获取

    在主菜单中,与项目关联的版本控制系统可能不是 Git。 例如, MercurialPerforce

  2. 在打开的对话框中,从列表中选择您的版本控制系统,并指定检出应用程序源代码的存储库。 详细信息请参见 检出项目(克隆)

在 WebStorm 中配置 Deno

默认情况下,Deno 会基于项目文件夹或其父文件夹中的配置文件,在 WebStorm 中自动启用并完成配置。 您可以自定义此行为,在当前项目中手动配置 Deno,甚至禁用 Deno。

Deno 配置设置
  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | Deno

  2. 请选择配置模式:

    • 为此项目自动配置 Deno — 自动检测项目文件夹或父文件夹中的配置文件,并根据其配置 Deno。 此选项为默认选项。

    • 为此项目启用 Deno 支持 — 手动指定 Deno 可执行文件与缓存位置,以及 Deno LSP 配置设置。

    • 为此项目禁用 Deno 支持

  3. 如果选择了 手动配置 ,请指定以下信息:

    • Deno 可执行文件的路径。

    • Deno 所有缓存文件将存储到的 Deno 缓存

    • WebStorm 将使用的用于配置 Deno LSP 服务 的设置文件 初始化命令

    使用 自动 Deno 配置 时,这些字段将自动填充,但如有需要,仍可手动更新。

  4. 指定是否使用 Deno 语言服务器或 WebStorm 的内部格式化设置来格式化 TypeScript 和 TSX 代码,适用于 .ts .tsx 文件。

编写和编辑代码

所有编码辅助功能,如 代码补全跨代码库导航快速文档查看自动导入 等在 Deno 项目中与常规 TypeScript 项目相同,详情请参见 编辑 TypeScript 代码

格式化代码

默认情况下,在 Deno 项目中 格式化代码时,WebStorm 使用其内置格式化器。

  • 要使用 Deno 语言服务器重新格式化代码,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | Deno ,然后勾选 使用 Deno 语言服务器格式化 .ts 和 .tsx 文件 复选框。

  • 要重新启动 Deno 语言服务器,请点击状态栏上的 语言服务 小部件,然后点击 “重新启动服务器”图标 ,该按钮位于 Deno <版本> 旁边。

    重新启动 Deno 语言服务器

运行应用程序

您可以直接从编辑器、 项目 工具窗口或使用专用的运行/调试配置运行应用。

  • 打开用于启动应用的文件(默认情况下为 main.ts main.tsx ),在编辑器中任意位置右键单击,然后从上下文菜单中选择 运行 'Deno: <file_name>'

  • 或者,在 项目 工具窗口中选择用于启动应用的文件,然后从上下文菜单中选择 运行 'Deno: <file_name>'

无论哪种方式,WebStorm 都会生成一个 临时运行/调试配置 ,您可以根据需要进行保存和重复使用。

创建 Deno 运行/调试配置

保存临时 Deno 运行/调试配置
  1. 转到 运行 | 编辑配置。 或者,从工具栏的 运行 小部件中选择 编辑配置

    在打开的 编辑配置 对话框中,点击工具栏上的 添加 按钮(添加按钮 ),然后从列表中选择 Deno

    或者,选择一个 自动生成的临时配置 ,然后点击工具栏上的 保存

    运行/调试配置:Deno 对话框随即打开。

  2. Deno 字段中指定 Deno 可执行文件的路径。 如果您按标准安装程序进行了操作,WebStorm 会检测到可执行文件并自动填充该字段。

  3. 命令 字段中输入 run

  4. 文件 字段中指定用于启动应用的文件。 默认情况下为 main.ts main.tsx

  5. 工作目录 字段中指定应用的 工作目录。 默认情况下,该字段会显示 项目根文件夹

调试应用程序

  1. 根据需要设置 断点

  2. 打开用于启动应用的文件(默认情况下为 main.ts main.tsx ),或在 项目 工具窗口中选择该文件。 然后从上下文菜单中选择 调试 'Deno: < file_name>'

    通过编辑器上下文菜单调试 Deno 应用

使用 Deno 运行/调试配置进行调试

  1. 创建运行/调试配置或保存 临时自动生成的运行/调试配置

  2. 在工具栏的 运行 小部件列表中,选择新创建或已保存的 Deno 配置,然后点击其旁边的 调试按钮

当应用在第一个断点处挂起时,切换到 调试工具窗口 ,然后照常操作: 逐步执行程序暂停和继续程序执行、 在挂起状态下检查程序 、查看调用栈和变量、设置监视、计算变量值、 查看实际 HTML DOM 等。

最后修改日期: 2025年 9月 26日