PhpStorm 2025.2 Help

Dart

借助 PhpStorm，您可以开发、运行并调试 Dart Web 应用和命令行应用。 PhpStorm 帮助您提供代码补全、错误和语法高亮、代码检查与快速修复、搜索和导航、重构等更多功能。 PhpStorm 还与 pub tool 和 Dart Analysis Server 集成。

安装 Dart 插件

此功能依赖于 Dart 插件，您需要安装和启用。

  1. 按 Ctrl+Alt+S 打开设置，然后选择 Plugins。

  2. 打开 Marketplace 选项卡，找到 Dart 插件，然后点击 安装 （如有提示请重启 IDE）。

正在下载 Dart 工具

下载并安装 Dart SDK。

Dart SDK 包含了开发命令行和 Web Dart 应用程序的所有工具。 它结合了 Dart Virtual Machine、 Dart core Libraries以及所有命令行工具，包括编译器（dart2js 和 dartdevc）、 dartfmt 代码格式化工具和 pub 工具。

了解更多关于 Dart 开发工具的信息，请访问 Dart 官方网站。

创建一个新的 Dart 应用程序

如果您还没有应用程序，您可以通过运行 dart create 命令 来 生成 一个 PhpStorm 项目 ，并使用 Dart 特定的结构。

或者，创建一个空的 PhpStorm 项目，并按照下文 从现有的 Dart 应用程序开始 中所述配置 Dart 支持。

创建一个新的 Dart 项目

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

  2. 在左侧窗格中，选择 Dart。

  3. 在右侧窗格中，指定项目名称和存储项目相关文件的文件夹路径。

  4. 指定已下载的 Dart SDK 的位置。

    如果您按照 Dart 官方网站 上描述的标准安装程序进行操作，PhpStorm 会自动检测到 Dart SDK 的路径。

    或者，手动输入路径或点击 “浏览”按钮 并在打开的对话框中选择路径。

    如果 PhpStorm 正确识别 Dart SDK，其修订号将显示在 Version 只读字段中。

  5. 要在项目中创建一个示例应用程序，请选择 生成样本内容 复选框，并从下面的列表中选择相关模板。 如果您清除此复选框，PhpStorm 将创建一个空项目。

  6. 点击 创建。 PhpStorm 会根据所选模板设置项目结构并生成一些源文件。

创建一个空的 PhpStorm 项目

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

  2. 在左侧窗格中，选择 PHP 空项目。 在右侧窗格中，指定应用程序文件夹并单击 创建。

从现有的 Dart 应用程序开始

如果您将继续开发现有的 Dart 应用程序，请在 PhpStorm 中打开它，配置 Dart，并按下文 管理 Dart 依赖项 中的描述下载所需的依赖项。

打开您机器上已有的应用程序源代码

点击 打开 屏幕上的 欢迎 或从主菜单中选择 文件 | 打开目录。 在打开的对话框中，选择存储源文件的文件夹。

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

    1. 在 欢迎 屏幕上点击 克隆仓库克隆。

      或者，从主菜单中选择 文件｜新建｜ 来自版本控制的项目…、 Git ｜ 克隆… 或 VCS | 从版本控制获取。

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

    2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。

    在现有项目中配置 Dart 支持

    1. 在 设置 对话框 Ctrl+Alt+S 中，选择 Dart 下的 语言和框架。 Dart 页面将打开。

    2. 请选择 为项目 <project name> 启用 Dart 支持 复选框。

    3. 在 Dart SDK 路径 字段中，指定已下载的 Dart SDK 的位置。

      如果您按照 Dart 官方网站 上描述的标准安装程序进行操作，PhpStorm 会自动检测到 Dart SDK 的路径。

      或者，手动输入路径或点击 “浏览”按钮 并在打开的对话框中选择路径。

      如果 PhpStorm 正确识别 Dart SDK，其修订号将显示在 Version 只读字段中。

    在一个 PhpStorm 项目中处理多个 Dart 项目（包）

    要将 Dart 项目（包）附加到现有的 PhpStorm 项目，您需要将其根文件夹添加为内容根。

    将一个 Dart 项目（包）添加到现有的 PhpStorm 项目中

    1. 在 设置 对话框 (Ctrl+Alt+S) 中，前往 目录。 将打开 目录页面。

    2. 在右侧窗格的现有内容根列表中，单击 添加内容根目录。 然后在打开的对话框中，选择要附加的 Dart 项目（包）的根文件夹。

    管理 Dart 依赖

    PhpStorm 与 pub 工具 集成，并允许您直接从编辑器运行其操作。 一旦您打开 pubspec.yaml 文件，PhpStorm 就会在编辑器选项卡的顶部显示一个窗格。 请使用此窗格上的链接来调用 pub get、 pub upgrade 和 pub outdated 操作。

    Dart：pub 操作面板

    或者在编辑器中打开 """ pubspec.yaml """ 或在 Project 工具窗口中选择它，并从选择的上下文菜单中调用 pub操作。

    您还可以从 终端 使用该工具的命令行模式。

    pub 工具会将下载的包保存到缓存中，并在 .packages 文件和 pubspec.lock 文件旁创建一个 """ pubspec.yaml """ 文件。

    PhpStorm 会在 消息工具窗口中记录 pub 命令的执行情况，您还可以通过点击工具栏上的 重新运行 Pub 命令 重新运行最后执行的命令。

    构建 Dart 应用程序

    1. 请在编辑器中打开 """ pubspec.yaml """ 文件或切换到已经打开该文件的标签。

    2. 在选项卡顶部的窗格中，点击 Webdev 构建...。 这将调用 webdev build操作。

      Dart 操作窗格：Webdev build

    3. 在打开的对话框中，指定要从中获取源代码的输入文件夹和要存储已编译应用程序的输出文件夹。

    运行和调试 Dart 命令行应用程序

    借助 PhpStorm ，您可以运行和调试 Dart 命令行应用程序。 PhpStorm 支持两种调试模式：

    • 本地调试 ：在此模式下，您的应用程序从 PhpStorm 启动，并在您的计算机上本地运行。 要运行或调试它，请使用 Dart 命令行应用 配置。

    • 调试远程应用程序 ：在这种模式下，您的应用程序运行在远程环境中，例如，在 Docker 容器中。 如需调试，请使用 Dart Remote Debug配置。

    运行 Dart 命令行应用程序

    1. 打开 Dart 文件以启动应用程序，或在 项目工具窗口 中选择它。 此文件必须包含一个 main() 方法。

    2. 从所选内容的上下文菜单中选择 运行“<dart_file_name>”。 PhpStorm 生成类型为 Dart Command Line App 的运行/调试配置，并使用该配置启动您的应用程序。

    在本地调试 Dart 命令行应用程序

    1. 在 Dart 代码中 配置和设置断点。

    2. 打开 Dart 文件以启动应用程序，或在 项目工具窗口 中选择它。 此文件必须包含一个 main() 方法。

    3. 从所选内容的上下文菜单中选择 调试 '<dart_file_name>'。 PhpStorm 生成一个类型为 Dart Command Line App的运行/调试配置，并启动调试会话。

    4. 在打开的 调试工具窗口 中， 逐步执行程序、 暂停和恢复程序执行、 在挂起时检查程序等。

    创建 Dart Remote Debug 运行/调试配置

    1. 在工具栏上的 运行/调试配置 小部件中选择 编辑配置 ，点击 添加新配置 按钮 (添加新配置按钮 )，从列表中选择 Dart 远程调试 以打开 配置设置。

      开始创建运行/调试配置

    2. 在 在 搜索源 中 字段中，如果您的 PhpStorm 项目包含配置为内容根的 多个 Dart 项目 ，请指定要调试的 Dart 项目。 请从列表中选择 Dart 项目，或点击 “浏览”按钮 并在打开的对话框中选择所需的文件夹。

    启动远程调试会话

    1. 使用 VM 选项启动远程 Dart 应用程序，例如，使用 --enable-vm-service --pause_isolates_on_start。 应用程序启动后，立即由于 --pause_isolates_on_start 参数而暂停，并等待调试器连接。

    2. 在 运行 工具窗格中，复制应用程序正在运行的 URL 地址和生成的身份验证令牌以进行访问。

      Dart：远程调试。 复制 URL 及 token

    3. 在 选择运行/调试配置 列表中选择新创建的 Dart Remote Debug配置并点击 调试按钮。

    4. 在 连接到正在运行的应用程序 对话框中，粘贴您复制的URL地址和身份验证令牌 如上所述。

      Dart：远程调试。 粘贴 URL 和 token

    5. 在打开的 调试工具窗口 中， 逐步执行程序、 暂停和恢复程序执行、 在挂起时检查程序等。

    运行和调试 Dart Web 应用程序

    您可以在任何浏览器中运行 Dart web 应用程序，但调试仅支持 Chrome。 要运行 Dart 网页应用程序，请在浏览器中打开应用程序的主 HTML 文件。 调试 Dart Web 应用程序是通过 Dart Web 类型的运行配置启动的。

    PhpStorm 在必要时与 webdev server 工具集成，以将 Dart 代码编译为 JavaScript。 对于 Dart SDK 2 之前的版本，使用 pub serve 工具。

    当您在浏览器中打开一个 Dart 网页应用程序时，它通常会以内置服务器 URL 开头，如 http://localhost:63342/project-name/web/index.html 。 但是，不使用内置服务器来提供应用程序服务。 相反，PhpStorm 会自动在 Dart 对话框 中指定的端口上启动 webdev 服务器，并将浏览器页面重定向到 webdev 服务器 URL（如 http://localhost:53322/index.html ）。

    webdev server 的工作记录在专用的 Dart Webdev 工具窗口中。 在当前 PhpStorm 会话中首次开始运行或调试 Dart 网络应用程序时，会打开工具窗口。 您可以通过点击工具栏上的 停止 Dart Webdev 服务器按钮 来停止工具。 当您再次开始运行或调试时，webdev server 会自动重启。

    调试 Dart 网络应用程序的推荐方式是使用 Dart Web 配置。 在该模式下，webdev server 启动时会启用 Dart DevTools。

    然而，您仍然可以使用 JavaScript Debug配置。 如需更多信息，请参阅 运行和调试 Dart web 应用程序的替代方法。

    创建运行/调试配置

    1. 创建 Dart Web 运行/调试配置：

      转到 运行(U) ｜ 编辑配置(E) ，在打开的 编辑配置 对话框中，单击工具栏上的 Add 按钮（"添加"按钮 ），然后从列表中选择 Dart Web。

      在打开的 运行/调试 配置：Dart Web 对话框中，指定引用 Dart 代码以运行或调试的 HTML 文件路径，以及 webdev 服务器将启动 Dart Web 应用的端口。

    运行您的应用程序

    • 从工具栏的 运行/调试配置 小部件列表中，选择新创建的 Dart Web 配置，然后点击旁边的 “运行”按钮。

      浏览器在 127.0.0.1:<webdev_port>/<specified_HTML_file> 打开。

    调试您的应用程序

    1. 请根据需要在 Dart 代码中设置 断点。

    2. 从工具栏的 运行 小部件列表中，选择新创建的 Dart Web 配置，然后点击旁边的 调试按钮。

    运行和调试 Dart Web 应用程序的替代方法

    除了使用 Dart Web 运行/调试配置，这是推荐的工作流程外，使用 PhpStorm，您仍然可以使用 JavaScript Debug 配置运行和调试 Dart Web 应用程序。

    运行 Dart web 应用程序

    1. 打开带有 Dart 参考的 HTML 文件或在 项目工具窗口 中选择它。

    2. 从编辑器或选择的上下文菜单中，选择 在浏览器中打开 ，然后在列表中选择所需的浏览器。

    创建 JavaScript Debug 运行/调试配置

    1. 打开引用 Dart 的 HTML 文件或在 项目工具窗口 中选择该文件。

    2. 从上下文菜单中选择 创建 '<HTML_file_name>'。 运行/调试配置：JavaScript 调试对话框 打开。

    3. 指定来自 Chrome 系列的浏览器以调试应用程序。

    4. URL 字段已经以 http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file> 的格式显示了应用程序的 URL 地址。 在调试会话期间，浏览器将从此 URL 重定向到 webdev 服务器 URL。

    开始调试

    1. 在 Dart 代码中 配置和设置断点。

    2. 开始调试会话：从工具栏上的 编辑配置 列表中选择创建的运行配置，然后点击 调试按钮。 PhpStorm 在选定的浏览器中打开指定的 URL。

    3. 在打开的 调试工具窗口 中， 逐步执行程序、 暂停和恢复程序执行、 在挂起时检查程序等。

    测试 Dart 应用程序

    PhpStorm 支持运行和调试使用 dart test 包编写的 Dart 测试。 您可以在任何 target platform上运行测试，调试仅支持 VM 测试。

    您可以运行和调试单个测试、测试组以及整个文件和文件夹中的测试。 PhpStorm 会使用默认设置创建一个运行/调试配置并启动测试。 您可以稍后保存此配置以便重复使用。

    运行或调试单个测试

    在编辑器中打开测试文件，右键点击 test() method 的调用，然后从上下文菜单中选择 运行“<test_name>” 或 调试 '<test_name>'。

      运行或调试组

      在编辑器中打开测试文件，右键点击 group() method 的调用，然后从上下文菜单中选择 运行“<group_name>” 或 调试 '<group_name>'。

        从文件运行或调试 Dart 测试

        在 项目工具窗口 中，选择要运行测试的文件，然后从上下文菜单中选择 运行“<file_name>” 或 调试 '<file_name>'。

          从文件夹运行或调试 Dart 测试

          在 项目工具窗口 中，选择要运行测试的文件夹，并从上下文菜单中选择 运行“<folder_name>” 或 调试 '<folder_name>'。

            保存自动生成的默认配置

            测试会话结束后，从测试、测试组、测试文件或文件夹的上下文菜单中选择 保存 <default_test_configuration_name>。

              使用之前保存的运行/调试配置来运行或调试测试

              • 请选择工具栏列表中的所需 Dart Test配置，然后点击 “运行”按钮 或 调试按钮。

              配置语法高亮

              您可以根据您的偏好和习惯配置 Dart 语法高亮显示。

              1. 在 设置 对话框 (Ctrl+Alt+S) 中，前往 编辑器 | 颜色方案 | Dart。

              2. 选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。

              最后修改日期： 2025年 9月 26日
              HTTP 客户端 CLIDart 分析工具窗口