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 启动应用程序模板创建新的 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. 点击 Open。

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

• 高亮语言语法

• 基于丰富的类型分析完成代码

• 导航到类型声明

  • 前往跳转 > 转到定义。
  • 你也可以按 F12。

• 查找类型用法。

  • 按 Shift + F12。

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

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

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

当 Flutter 项目在 VS Code 中打开时，你会在状态栏中看到一系列 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"
     }
   ]

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

Flutter 提供了业内最佳的开发周期，通过有状态热重载功能，你可以几乎即时看到更改的效果。要了解更多信息，请查看热重载。

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

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

切换基线绘制

使每个 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 属性编辑器文档以获取详细使用指南。

所有已知 bug 都在问题跟踪器中：Dart 和 Flutter 扩展 GitHub 问题跟踪器。我们欢迎就 bug/问题和功能请求提供反馈。

在提交新问题之前

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

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