WebStorm 2025.3 Help

Deno

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

开始之前

在 设置 | 插件 页面上的 Marketplace 选项卡中安装并启用 Deno 插件,如 从 JetBrains Marketplace 安装插件 中所述。

安装 Deno

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

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

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

  • 适用于 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 | 克隆… 或 VCS | 从版本控制系统获取。

    在主菜单中,您可能会看到与您的项目关联的其他任何版本控制系统,而不是 Git。 例如, Mercurial 或 Perforce。

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

在 WebStorm 中配置 Deno

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

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript 运行时。

  2. 从 首选运行时 列表中选择 Deno。

  3. 在 Deno 区域中,指定以下内容:

    • Deno 可执行文件的路径。

    • 存储所有 Deno 缓存文件的 Deno 缓存。

    • WebStorm 用于设置 Deno LSP 服务 的设置所在的 初始化命令。

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

编写和编辑代码

所有代码辅助功能,例如 代码补全、 代码库导航、 快速文档查找、 自动导入 等,在 Deno 项目中与任何 TypeScript 项目中的工作方式相同,详情请参阅 编辑 TypeScript 代码。

格式化代码

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

  • 要使用 Deno 语言服务器重新格式化代码,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript 运行时 ,并在 Deno 区域中选中 使用 Deno Language Server 格式化 .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年 12月 8日