内容
description bug_report

Visual Studio Code

内容

安装和设置

按照设置编辑器说明安装 Dart 和 Flutter 扩展（也称为插件）。

更新扩展

扩展的更新会定期发布。默认情况下，VS Code 会在有更新可用时自动更新扩展。

要自己安装更新

  1. 单击侧边栏中的扩展。
  2. 如果 Flutter 扩展有可用的更新，请单击更新，然后单击重新加载。
  3. 重新启动 VS Code。

创建项目

有几种方法可以创建新项目。

创建新项目

从 Flutter 初学者应用模板创建新 Flutter 项目

  1. 转到视图 > 命令面板…。

    您还可以按 Ctrl / Cmd + Shift + P。

  2. 键入 flutter。
  3. 选择Flutter: 新项目。
  4. 按 Enter。
  5. 选择应用程序。
  6. 按 Enter。
  7. 选择项目位置。
  8. 输入所需的项目名称。

从现有源代码打开项目

打开现有 Flutter 项目

  1. 转到文件 > 打开。

    您还可以按 Ctrl / Cmd + O

  2. 浏览到包含现有 Flutter 源代码文件的目录。
  3. 单击打开。

编辑代码和查看问题

Flutter 扩展执行代码分析。代码分析可以

  • 突出显示语言语法
  • 基于丰富的类型分析完成代码

  • 导航到类型声明

    • 转到转到 > 转到定义。
    • 您还可以按 F12。

  • 查找类型用法。

    • 按 Shift + F12。

  • 查看所有当前源代码问题。

    • 转到视图 > 问题。
    • 您还可以按 Ctrl / Cmd + Shift + M。
    • 问题窗格显示任何分析问题
      Problems pane

运行和调试

通过单击主 IDE 窗口中的运行 > 开始调试或按 F5 开始调试。

选择目标设备

在 VS Code 中打开 Flutter 项目时，您应该在状态栏中看到一组 Flutter 特定的条目，包括 Flutter SDK 版本和设备名称（或消息无设备）
VS Code status bar

Flutter 扩展会自动选择最后连接的设备。但是，如果您连接了多个设备/模拟器，请单击状态栏中的设备以查看屏幕顶部的选择列表。选择您要用于运行或调试的设备。

在不设置断点的情况下运行应用

转到运行 > 不调试启动。

您还可以按 Ctrl + F5。

在设置断点的情况下运行应用

  1. 如果需要，请在源代码中设置断点。

  2. 单击运行 > 开始调试。您还可以按 F5。状态栏变为橙色，表示您处于调试会话中。
    Debug console

    • 左边的调试侧边栏显示堆栈帧和变量。
    • 底部的调试控制台窗格显示详细的日志输出。
    • 调试基于默认启动配置。要自定义，请单击调试侧边栏顶部的齿轮以创建 launch.json 文件。然后，您可以修改值。

在调试、分析或发布模式下运行应用

Flutter 提供了许多不同的构建模式来运行您的应用。您可以在 Flutter 的构建模式 中阅读更多相关内容。

  1. 在 VS Code 中打开 launch.json 文件。

    如果您没有 launch.json 文件

    1. 转到视图 > 运行。

      您还可以按 Ctrl / Cmd + Shift + D

      运行和调试面板显示。

    2. 单击创建 launch.json 文件。

  2. 在 configurations 部分中，将 flutterMode 属性更改为要定位的构建模式。

    例如，如果您要在调试模式下运行，您的 launch.json 可能如下所示

     "configurations": [
   {
     "name": "Flutter",
     "request": "launch",
     "type": "dart",
     "flutterMode": "debug"
   }
 ]

  3. 通过运行面板运行应用。

快速编辑和刷新开发周期

Flutter 提供了一流的开发周期，使您能够通过有状态热重载功能几乎立即看到更改的效果。要了解更多信息，请查看 热重载。

高级调试

您可能会发现以下高级调试提示很有用

调试视觉布局问题

在调试会话期间，几个额外的调试命令被添加到 命令面板 和 Flutter 检查器 中。当空间有限时，图标用作标签的可视版本。

切换基线绘制 基线绘制图标
导致每个 RenderBox 在其每个基线上绘制一条线。
切换重新绘制彩虹 重新绘制彩虹图标
重新绘制时在图层上显示旋转颜色。
切换慢动作动画 慢动作动画图标
减慢动画速度以进行视觉检查。
切换调试模式横幅 调试模式横幅图标
即使在运行调试版本时也隐藏调试模式横幅。

调试外部库

默认情况下，在 Flutter 扩展中禁用调试外部库。要启用

  1. 选择设置 > 扩展 > Dart 配置。
  2. 选中 调试外部库 选项。

Flutter 代码的编辑提示

如果您有其他提示需要我们分享，请告诉我们！

辅助和快速修复

辅助是与特定代码标识符相关的代码更改。当光标放置在 Flutter 小部件标识符上时，其中一些可用，黄色灯泡图标表示。要调用辅助，请单击灯泡，如下面的屏幕截图所示

Code assists

您还可以按 Ctrl / Cmd + .

快速修复类似，只是它们显示为代码片段有错误，并且它们可以帮助更正它。

使用新小部件辅助进行包装
当您有一个想要用周围小部件包装的小部件时可以使用此功能，例如，如果您想要用 Row 或 Column 包装小部件。
使用新小部件辅助包装小部件列表
类似于上面的辅助，但用于包装现有小部件列表，而不是单个小部件。
将子项转换为子项辅助
将子项参数更改为子项参数，并将参数值包装在列表中。
将 StatelessWidget 转换为 StatefulWidget 辅助
通过创建 State 类并将代码移到那里，将 StatelessWidget 的实现更改为 StatefulWidget 的实现。

代码片段

代码片段可用于加速输入典型代码结构。通过键入其前缀，然后从代码完成窗口中选择来调用它们：代码片段

Flutter 扩展包括以下代码片段

  • 前缀 stless：创建 -StatelessWidget` 的新子类。
  • 前缀 stful：创建 StatefulWidget 的新子类及其关联的 State 子类。
  • 前缀 stanim：创建一个 StatefulWidget 的新子类，以及它的关联状态子类，包括一个用 AnimationController 初始化的字段。

您还可以通过从 命令面板 执行配置用户代码段来定义自定义代码段。

键盘快捷键

热重载
要在调试会话期间执行热重载，请单击调试工具栏上的热重载。

您还可以按 Ctrl + F5（macOS 上为 Cmd + F5）。

可以通过从 命令面板 执行打开键盘快捷键命令来更改键盘映射。

热重载与热重启

热重载通过将更新的源代码文件注入到正在运行的 Dart VM（虚拟机）中来工作。这不仅包括添加新类，还包括向现有类添加方法和字段，以及更改现有函数。不过，某些类型的代码更改无法热重载

  • 全局变量初始化器
  • 静态字段初始化器
  • 应用程序的 main() 方法

对于这些更改，请在不结束调试会话的情况下重新启动应用程序。要执行热重启，请从 命令面板 运行Flutter：热重启命令。

您还可以按 Ctrl + Shift + F5 或 macOS 上的 Cmd + Shift + F5。

故障排除

已知问题和反馈

所有已知错误都在问题跟踪器中进行跟踪：Dart 和 Flutter 扩展 GitHub 问题跟踪器。我们欢迎对错误/问题和功能请求的反馈。

在提交新问题之前

  • 在问题跟踪器中快速搜索以查看问题是否已得到跟踪。
  • 确保您已 更新 到插件的最新版本。

在提交新问题时，请包含 flutter doctor 输出。