本文将与你一起回顾如何在 VS Code 里进行 Flutter 应用的开发。
1. 安装和配置
根据 编辑工具设定 的指引来安装 Dart 和 Flutter 扩展（也叫做插件）。
1.1 更新扩展程序
扩展的更新会定期发布。默认情况下，当有可用的更新时 VS Code 会自动更新扩展。
手动安装更新：
（1）点击侧边栏的扩展按钮
（2）如果 Flutter 扩展显示有可用更新，点击更新按钮，然后重载。
（3）重启 VS Code。
2. 创建项目
2.1 新建项目
通过 Flutter 入门应用模板新建 Flutter 项目：
（1）打开命令面板（Ctrl+Shift+P （macOS 用 Cmd+Shift+P））。
（2）选择 Flutter: New Project 命令然后按 Enter。
（3）输入你想要的项目名。
（4）选择项目地址。
2.2 从现有源代码打开项目
打开现有 Flutter 项目：
（1）在 IDE 主窗口点击 File > Open。
（2）选择存放现有 Flutter 源代码文件的目录。
（3）点击 Open。
3. 编写代码及查看问题
Flutter 扩展执行代码分析，它提供：
- 语法高亮。
- 基于丰富输入分析的代码补全。
- 导航到类型声明（Go to Definition 或 F12）和查找类型引用（Find All References 或 Shift+F12）。
- 查看所有当前代码问题（View > Problems 或 Ctrl+Shift+M (macOS 用 Cmd+Shift+M)）。所有问题分析都会在 Problems 面板展示：
4. 运行和调试
备忘
有多种方式能够调试你的应用
- 使用 DevTools，它是一个运行在浏览器中的调试以及性能测试工具集。DevTools 取代了前一代基于浏览器的性能测试工具 Observatory，它包含了以前仅适用于 Android Studio 和 IntelliJ 的功能，例如 Flutter inspector。
- 使用 VS Code 的内置调试功能，例如设置断点。
以下说明描述了 VS Code 可用的功能。更多使用 DevTools 的详细信息请参考 DevTools 中的 Running DevTools from VS Code 文档。
在 IDE 主窗口点击 Debug > Start Debugging 或按 F5 开启调试。
4.1 选择目标设备
当一个 Flutter 项目在 VS Code 中打开，你会在状态栏看到一些 Flutter 特有项，包括 Flutter SDK 版本和设备名称（或者无设备信息）。
备忘
- 如果你没看到 Flutter 版本号或者设备信息，你的项目可能不被识别为一个 Flutter 项目。请确认 VS Code Workspace Folder 的目录中是否含有 pubspec.yaml。
- 如果状态栏显示无设备表明 Flutter 没有发现任何已连接的 IOS、Android 或者模拟器。你需要连接设备或者启动模拟器。
Flutter 扩展会自动选择上次连接的设备。然而，如果你有多个设备/模拟器连接，点击状态栏的 device 查看屏幕顶部的选择列表。选择你要用来运行或调试的设备。
备忘
如果你尝试运行 web 应用，但是 Chrome (web) 并不在目标列表中，请检查是否启用了 web，在 Building a web application 中进行了介绍。
4.2 无断点运行
（1）在 IDE 主窗口点击 Debug > Start Without Debugging，或者按 Ctrl+F5。状态栏变橙色说明你正处于调试模式。
4.3 断点运行
（1）如果需要，在源代码中设置断点。
（2）在 IDE 主窗口点击 Debug > Start Debugging 或按 F5。
- 左侧的调试侧边栏显示堆栈帧和变量。底部的调试控制台面板显示输出的日志详情。调试基于默认的配置。也可以通过点击调试侧边栏顶部的齿轮创建 launch.json 文件自定义调试。你可以修改里面的值。
5. 快速编辑和刷新开发周期
Flutter 提供一流的开发周期，通过 Stateful Hot Reload 特性使你在几乎修改代码的同时就能看到变化。详情请看 使用热重载。
6. 进阶调试
6.1 可视化布局问题调试
在调试会话期间，命令面板 和 Flutter inspector 会添加一些额外的调试命令，包括：
- 切换 Baseline 绘制
- 每个 RenderBox 在底部绘制一条线。
- 切换重绘 Rainbow
- 重新绘制时在图层上改变颜色。
- 切换慢模式横幅
- 减慢动画以启用视觉检查。
- 切换 debug 模式横幅显示
- 在运行调试构建时隐藏 debug 模式的横幅 (banner)。
6.2 调试外部库
默认情况下，Flutter 扩展禁止调试外部库。启用步骤：
（1）选择 Settings > Extensions > Dart Configuration
（2）勾选 Debug External Libraries 选项。
7. Flutter 代码编辑提示
如果你有其他我们应该提供的代码提示建议，请 [告诉我们][]!
7.1 代码辅助和快速修复
代码辅助功能是特定代码标识符相关的代码修改。当光标放在 Flutter widget 上时，黄色灯泡图标会指示可用的修改，可以通过点击灯泡进行修改，或者使用快捷键 Ctrl+. (macOS 用 Cmd+.)，如图所示：
快速修复跟辅助类似，当一段代码有错误并且可以辅助修正时才会显示。
Widget 嵌套辅助
当你有个 widget 想包装进一个容器 widget 时，例如你想把 widget 放入一个 Row 或者 Column。
Widget 列表嵌套辅助
和上面的辅助类似，但它嵌套的是一个 widget 的列表，而不是单个的 widget。
child 和 children 转换辅助
将 child 转换成 children，并且把参数值写进一个 list。
7.2 代码片段
代码片段可以用来加速输入通用类型代码段。通过输入前缀来调用，然后从代码完成窗口中选择：
Flutter 扩展包含以下片段：
- 前缀 stless：创建一个 StatelessWidget 子类。
- 前缀 stful：创建一个 StatefulWidget 子类，并且和 State 子类关联。
- 前缀 stanim：创建一个 StatefulWidget 子类，并且把包含字段初始化的 State 子类和一个 AnimationController 关联。
你也可以通过在 命令面板 执行Configure User Snippets来自定义片段。
7.3 键盘快捷键
热重载
调试期间，在调试工具栏点击重启按钮，或者按 Ctrl+Shift+F5 (macOS 用 Cmd+Shift+F5)执行热重载。
键盘映射可以在 命令面板 执行Open Keyboard Shortcuts修改。
7.4 热重载和热重启
热重载的工作原理是将更新后的代码注入 Dart VM（虚拟机）。不仅包括添加新类，还包括添加方法和字段到已有的类中。但有些类型的代码是无法被热重载的：
- 全部变量的初始化
- 静态变量的初始化
- 应用的 main() 方法
对于这些更改，你无需结束调试过程而直接热重启 (hot restart) 你的应用。要执行热重启，执行 命令面板 的 Flutter：热重启命令，或者按 Ctrl+F5。
8. 故障排除
8.1 已知问题和反馈
所有已知 bug 在这个 issue 列表中记录：Dart 和 Flutter 扩展 GitHub issue 追踪。
我们非常欢迎 bugs/issues 和特性请求的反馈。在提交新 issue 之前：
- 在 issue 列表中查找看该问题是否已被记录。
- 确保你已经更新最新版本插件。
提交新 issue 时，请包含 flutter doctor 输出。