WebStorm 2021.1 Help

镖

使用 WebStorm，您可以开发、运行和调试Dart Web 和命令行应用程序。WebStorm 帮助您提供代码完成、错误和语法突出显示、代码检查和快速修复、搜索和导航、重构等等。WebStorm 还与pub 工具和Dart 分析服务器集成。

在你开始前

在Settings/Preferences |安装并启用Dart插件 插件页面，选项卡Marketplace，如从 JetBrains 存储库安装插件中所述。

下载 Dart 工具

下载并安装Dart SDK。

Dart SDK 包含用于开发命令行和 Web Dart 应用程序的所有工具。它包含Dart 虚拟机、Dart 核心库以及所有命令行工具，包括编译器（dart2js和dartdevc）、dartfmt代码格式化程序和pub工具。

从Dart 官网了解更多关于 Dart 开发工具的信息。

创建一个新的 Dart 应用程序

如果您还没有应用程序，您可以从Stagehand 模板生成具有 Dart 特定结构的 WebStorm 项目。或者，创建一个空的 WebStorm 项目并在其中配置 Dart 支持，如下面的从现有 Dart 应用程序开始中所述。

从 Stagehand 模板创建 Dart 项目

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

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

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

  4. 指定 Dart SDK 的路径。WebStorm 检测并显示Dart 版本。

  5. 要在项目中创建示例应用程序，请选中Generate sample content复选框并从下面的列表中选择相关的 Stagehand 模板。如果清除该复选框，WebStorm 将创建一个空项目。

    创建一个 Dart 应用程序

  6. 单击创建。WebStorm 设置项目结构并根据选定的 Stagehand 模板生成一些源。

创建一个空的 WebStorm 项目

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

  2. 在左侧窗格中，选择Empty Project。在右侧窗格中，指定应用程序文件夹并单击Create。

从现有的 Dart 应用程序开始

如果您要继续开发现有的 Dart 应用程序，请在 WebStorm 中打开它，在其中配置 Dart，然后下载所需的依赖项，如下面的管理 Dart 依赖项中所述。

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

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

    从您的版本控制中查看应用程序源

    1. 在欢迎屏幕上单击从 VCS 获取。或者，选择文件 | 来自版本控制或<Your_VCS> 的项目 | 从主菜单中获取版本控制。

      <Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。

    2. 在打开的对话框中，从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息，请参阅签出项目（克隆）。

    在现有项目中配置 Dart 支持

    1. 在Settings/Preferences对话框Ctrl+Alt+S中，选择Languages and Frameworks下的Dart。Dart 页面打开。

    2. 选中为项目 <项目名称> 启用 Dart 支持复选框。

    3. 在Dart SDK Path字段中，指定下载的Dart SDK的位置。手动键入路径或单击浏览按钮并在打开的对话框中选择路径。如果 WebStorm 正确识别了 Dart SDK，它的修订号会显示在Version只读字段中。

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

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

    将 Dart 项目（包）添加到现有的 WebStorm 项目中

    1. 在“设置/首选项”对话框 ( Ctrl+Alt+S) 中，转到“目录” 。

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

    管理 Dart 依赖项

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

    Dart：发布操作面板

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

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

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

    WebStorm 在消息工具窗口中记录 pub 命令的执行，您还可以通过单击工具栏重新运行上次执行的命令重新运行 Pub 命令。

    构建 Dart 应用程序

    1. 在编辑器中打开pubspec.yaml文件或切换到打开它的选项卡。

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

      Dart 操作面板：Webdev 构建

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

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

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

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

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

    运行 Dart 命令行应用程序

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

    2. 从选择的上下文菜单中，选择Run '<dart_file_name>'。WebStorm 生成Dart 命令行应用程序类型的运行/调试配置，并使用它启动您的应用程序。

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

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

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

    3. 从选择的上下文菜单中，选择Debug '<dart_file_name>'。WebStorm 生成Dart 命令行应用程序类型的运行/调试配置，并使用它启动调试会话。

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

    创建一个 Dart 远程调试运行/调试配置

    1. 在主菜单上，转到运行 | 编辑配置，单击并从列表中图标一般添加选择Dart Remote Debug 。运行/调试配置：Dart 远程调试打开。

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

    启动远程调试会话

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

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

      Dart：远程调试。 复制 URL 和令牌

    3. 在Select run/debug configuration列表中选择新创建的Dart Remote Debug配置，然后单击。调试按钮

    4. 在Connect to a Running App对话框中，粘贴 URL 地址和您复制的身份验证令牌，如上所述。

      Dart：远程调试。 粘贴 URL 和令牌

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

    运行和调试 Dart Web 应用程序

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

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

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

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

    调试 Dart Web 应用程序的推荐方法是使用Dart Web配置。在这种模式下，webdev 服务器启动时启用了Dart DevTools。

    但是，您仍然可以使用JavaScript 调试配置。有关详细信息，请参阅运行和调试 Dart Web 应用程序的替代方法。

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

      从主菜单中，选择运行 | 编辑配置，单击工具栏上的 并从列表中添加按钮选择Dart Web 。

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

    2. 要运行您的应用程序，请从工具栏上的Select run/debug configuration列表中选择新创建的Dart Web配置，然后单击列表旁边的 。运行按钮

      浏览器在127.0.0.1:<webdev_port>/<specified_HTML_file>.

    3. 要调试您的应用程序，请根据需要在 Dart 代码中设置断点。然后从工具栏上的Select run/debug configuration列表中选择新创建的Dart Web配置，然后单击列表旁边的 。调试按钮

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

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

    运行 Dart Web 应用程序

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

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

    创建 JavaScript 调试运行/调试配置

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

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

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

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

    开始调试

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

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

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

    测试 Dart 应用程序

    WebStorm 支持运行和调试使用dart 测试包编写的 Dart 测试。您可以在任何目标平台上运行测试，仅 VM 测试支持调试。

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

    运行或调试单个测试

    在编辑器中打开测试文件，右键单击test() 方法的调用，然后从上下文菜单中选择Run '<test_name>'或Debug '<test_name>' 。

      运行或调试组

      在编辑器中打开测试文件，右键单击group() 方法的调用，然后从上下文菜单中选择Run '<group_name>'或Debug '<group_name>' 。

        从文件运行或调试 Dart 测试

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

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

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

            保存自动生成的默认配置

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

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

              • 从工具栏上的列表中选择所需的Dart 测试配置，然后单击运行按钮或调试按钮。

              配置语法高亮

              您可以根据自己的喜好和习惯配置 Dart 感知语法突出显示。

              1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 配色方案 | 飞镖。

              2. 选择配色方案，接受从默认值继承的突出显示设置，或按照颜色和字体中的说明自定义它们。

              最后修改：2021 年 10 月 29 日
              CoffeeScript 运行/调试配置：Dart 命令行应用程序