Visual Studio Code

• Android Studio 和 IntelliJ
• Visual Studio Code

VS Code 是一款用于构建和调试应用的编辑器。安装 Flutter 扩展后，您可以编译、部署和调试 Flutter 应用。

要安装最新版本的 VS Code，请按照 Microsoft 针对相关平台的说明进行操作

• 在 macOS 上安装
• 在 Windows 上安装
• 在 Linux 上安装

1. 启动 VS Code。

2. 打开浏览器，访问 Visual Studio Marketplace 上的 Flutter 扩展 页面。

3. 点击 安装。安装 Flutter 扩展还会安装 Dart 扩展。

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

   你也可以按 Ctrl / Cmd + Shift + P。

2. 输入 doctor。

3. 选择 Flutter: 运行 Flutter Doctor。

   选择此命令后，VS Code 将执行以下操作

   • 打开 输出 面板。
   • 在此面板的右上角下拉菜单中显示 flutter (flutter)。
   • 显示 flutter doctor 命令的输出。

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

要自行安装更新

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

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

要从 Flutter starter app 模板创建一个新 Flutter 项目

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

   你也可以按 Ctrl / Cmd + Shift + P。

2. 输入 flutter。

3. 选择 Flutter: 新建项目。

4. 按 Enter。

5. 选择 Application。

6. 按 Enter。

7. 选择一个 项目位置。

8. 输入您想要的 项目名称。

要打开现有的 Flutter 项目

1. 转到 文件 > 打开。

   您也可以按 Ctrl / Cmd + O

2. 浏览到包含您的现有 Flutter 源代码文件的目录。

3. 点击 Open。

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

• 突出显示语言语法

• 根据丰富的类型分析完成代码

• 导航到类型声明

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

• 查找类型用法。

  • 按 Shift + F12。

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

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

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

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

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

转到 运行 > 不带调试启动。

您也可以按 Ctrl + F5。

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

2. 点击 运行 > 启动调试。您也可以按 F5。状态栏变为橙色，以显示您处于调试会话中。
   

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

Flutter 提供了许多不同的构建模式来运行您的应用。您可以在 Flutter 的构建模式 中了解更多信息。

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

   如果您没有 launch.json 文件

   1. 转到 视图 > 运行。

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

      显示 运行和调试 面板。

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

2. 在 configurations 部分，将 flutterMode 属性更改为您想要针对的构建模式。

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

   json

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

   content_copy

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

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

您可能会发现以下高级调试技巧有用

在调试会话期间，会将其他调试命令添加到 命令面板 和 Flutter inspector。当空间有限时，将使用图标作为标签的视觉版本。

切换基线绘制

导致每个 RenderBox 在其每个基线上绘制一条线。

切换重绘彩虹

在重绘时显示旋转的颜色。

切换慢动画

减慢动画速度以实现视觉检查。

切换调试模式横幅

即使在运行调试构建时，也会隐藏调试模式横幅。

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

1. 选择 设置 > 扩展 > Dart 配置。
2. 选中 Debug External Libraries 选项。

如果您有其他提示，请 告诉我们！

辅助功能是与特定代码标识符相关的代码更改。当光标放置在 Flutter 部件标识符上时，会提供许多这些辅助功能，如以下屏幕截图所示。要调用辅助功能，请点击灯泡

您也可以按 Ctrl / Cmd + .

快速修复类似，但仅在代码片段出现错误时显示，并且可以帮助纠正它。

用新部件包装辅助功能

当您希望将部件包装在周围的部件中时可以使用此功能，例如，如果您希望将部件包装在 Row 或 Column 中。

用新部件包装部件列表辅助功能

类似于上面的辅助功能，但用于包装现有的部件列表而不是单个部件。

将子项转换为子项辅助功能

将子项参数更改为子项参数，并将参数值包装在列表中。

将 StatelessWidget 转换为 StatefulWidget 辅助功能

通过创建 State 类并将代码移动到那里，将 StatelessWidget 的实现更改为 StatefulWidget 的实现。

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

Flutter 扩展包括以下代码片段

• 前缀 stless：创建一个新的 StatelessWidget 子类。
• 前缀 stful：创建一个新的 StatefulWidget 子类及其关联的 State 子类。
• 前缀 stanim：创建一个新的 StatefulWidget 子类及其关联的 State 子类，其中包含一个用 AnimationController 初始化过的字段。

Dart 扩展包含以下代码片段

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

热重载

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

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

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

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

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

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

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

Flutter 属性编辑器是由 Flutter 扩展 提供的一个强大的工具，它允许您直接从其可视化界面查看和修改小部件属性。

1. 单击 VS Code 侧边栏中的 Flutter 属性编辑器 图标 。
2. Flutter 属性编辑器将加载到侧面板中。
3. 请参阅 Flutter 属性编辑器 文档 以获取详细的使用指南。

所有已知错误都在问题跟踪器中跟踪：Dart 和 Flutter 扩展 GitHub 问题跟踪器。我们欢迎反馈，无论是关于错误/问题还是功能请求。

提交新问题之前

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

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