Visual Studio Code

如何在 Visual Studio Code 中开发 Flutter 应用。

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

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

启动 VS Code。
打开浏览器，前往 Visual Studio Marketplace 上的 Flutter 扩展页面。
点击 Install（安装）。安装 Flutter 扩展的同时也会安装 Dart 扩展。

前往 View（视图） > Command Palette...（命令面板...）。
你也可以按 Ctrl / Cmd + Shift + P。
输入 doctor。
选择 Flutter: Run Flutter Doctor。
选择此命令后，VS Code 将执行以下操作
- 打开 Output（输出）面板。
- 在面板右上角的下拉菜单中显示 flutter (flutter)。
- 显示 flutter doctor 命令的输出结果。

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

若要手动安装更新

点击侧边栏中的 Extensions（扩展）。
如果 Flutter 扩展有可用更新，请点击 Update（更新），然后点击 Reload（重新加载）。
重新启动 VS Code。

创建新项目有几种方法。

要从 Flutter 入门应用模板创建新项目

前往 View（视图） > Command Palette...（命令面板...）。
你也可以按 Ctrl / Cmd + Shift + P。
输入 flutter。
选择 Flutter: New Project。
按下 Enter 键。
选择 Application（应用）。
按下 Enter 键。
选择 Project location（项目位置）。
输入您想要的 Project name（项目名称）。

要打开现有的 Flutter 项目

前往 File（文件） > Open（打开）。
您也可以按下 Ctrl / Cmd + O
浏览到包含现有 Flutter 源代码文件的目录。
点击 Open。

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

高亮显示语言语法
基于丰富的类型分析进行代码补全
导航到类型声明
- 前往 Go（转到） > Go to Definition（转到定义）。
- 您也可以按下 F12。
查找类型用法。
- 按下 Shift + F12。
查看当前所有源代码问题。
- 前往 View（视图） > Problems（问题）。
- 您也可以按下 Ctrl / Cmd + Shift + M。
- “问题”面板会显示任何分析出的问题

点击主 IDE 窗口中的 Run > Start Debugging（运行 > 开始调试）开始调试，或者按下 F5。

当在 VS Code 中打开 Flutter 项目时，您应该会在状态栏中看到一系列 Flutter 特有的条目，包括 Flutter SDK 版本和设备名称（或显示 No Devices/无设备）。
VS Code status bar

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

前往 Run（运行） > Start Without Debugging（不带调试运行）。

您也可以按下 Ctrl + F5。

如果需要，在源代码中设置断点。
点击 Run（运行） > Start Debugging（开始调试）。您也可以按下 F5。状态栏将变为橙色，表示您处于调试会话中。
- 左侧的 Debug Sidebar（调试侧边栏）显示堆栈帧和变量。
- 底部的 Debug Console（调试控制台）面板显示详细的日志输出。
- 调试基于默认的启动配置。若要自定义，请点击 Debug Sidebar（调试侧边栏）顶部的齿轮图标以创建 launch.json 文件。然后您可以修改其中的值。

Flutter 提供了多种构建模式来运行您的应用。您可以在 Flutter 的构建模式中阅读更多相关信息。

在 VS Code 中打开 launch.json 文件。
如果您没有 launch.json 文件
1. 前往 View（视图） > Run（运行）。
  您也可以按下 Ctrl / Cmd + Shift + D
  显示 Run and Debug（运行和调试）面板。
2. 点击 create a launch.json file（创建 launch.json 文件）。
在 configurations 部分中，将 flutterMode 属性更改为您想要的目标构建模式。
例如，如果您想在调试模式下运行，您的 launch.json 可能如下所示
json
```
"configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]
```
通过 Run（运行）面板运行应用。

Flutter 提供了一流的开发者循环，使您可以通过有状态热重载 (Stateful Hot Reload) 功能几乎瞬间看到更改的效果。要了解更多信息，请查看热重载。

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

在调试会话期间，多个额外的调试命令会被添加到命令面板和 Flutter Inspector 中。当空间有限时，图标将作为标签的视觉版本。

Toggle Baseline Painting（切换基线绘制）: 使每个 RenderBox 在其每个基线处绘制一条线。
Toggle Repaint Rainbow（切换重绘彩虹显示）: 重绘时在图层上显示旋转的颜色。
Toggle Slow Animations（切换慢动作动画）: 减慢动画速度以进行视觉检查。
Toggle Debug Mode Banner（切换调试模式横幅）: 即使在运行调试构建时也隐藏调试模式横幅。

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

选择 Settings > Extensions > Dart Configuration（设置 > 扩展 > Dart 配置）。
勾选 Debug External Libraries（调试外部库）选项。

如果您有其他我们应该分享的技巧，请告诉我们！

辅助功能（Assists）是与特定代码标识符相关的代码更改。当光标位于 Flutter Widget 标识符上时，会出现一个黄色灯泡图标，表示有许多此类辅助功能可用。要调用辅助功能，请点击如下截图所示的灯泡

Code assists

您也可以按下 Ctrl / Cmd + .

快速修复（Quick fixes）类似，只是它们在一段代码有错误时显示，并且可以协助进行更正。

使用新 Widget 包裹 (Wrap with new widget assist): 当您有一个想要用外部 Widget 包裹的 Widget 时可以使用此功能，例如如果您想将一个 Widget 包裹在 Row 或 Column 中。
使用新 Widget 包裹 Widget 列表 (Wrap widget list with new widget assist): 类似于上面的辅助功能，但用于包裹现有的 Widget 列表，而不是单个 Widget。
将 child 转换为 children (Convert child to children assist): 将 child 参数更改为 children 参数，并将参数值包裹在列表中。
将 StatelessWidget 转换为 StatefulWidget (Convert StatelessWidget to StatefulWidget assist): 通过创建 State 类并将代码移动到其中，将 StatelessWidget 的实现更改为 StatefulWidget。

代码片段 (Snippets) 可用于加快输入典型代码结构的速度。它们通过输入其前缀并从代码补全窗口中选择来调用：

Flutter 扩展包含以下代码片段

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

Dart 扩展包含以下代码片段

前缀	描述	代码示例
`main`	插入一个用作入口点的 main 函数。	`void main(List<String> args) { }`
`try`	插入一个 try/catch 块。	`try { } catch (e) { }`
`if`	插入一个 if 语句。	`if (condition) { }`
`ife`	插入一个带有 else 块的 if 语句。	`if (condition) { } else { }`
`switch`	插入一个 switch 语句。	`switch (variable) { case value1: break; case value2: break; default: }`
`for`	插入一个 for 循环。	`for (var i = 0; i < 10; i++) { }`
`fori`	插入一个 for-in 循环。	`for (var item in list) { }`
`while`	插入一个 while 循环。	`while (condition) { }`
`do`	插入一个 do-while 循环。	`do { } while (condition);`
`fun`	插入一个函数定义。	`void myFunction(String name) { }`
`class`	插入一个类定义。	`class MyClass { }`
`typedef`	插入一个 typedef。	`typedef MyFunction = void Function(String);`
`test`	插入一个测试块。	`test('My test description', () { });`
`group`	插入一个测试组块。	`group('My test group', () { });`

您还可以通过执行命令面板中的 Configure User Snippets（配置用户代码片段）来定义自定义代码片段。

热重载

要在调试会话期间执行热重载，请点击 Debug Toolbar（调试工具栏）上的 Hot Reload（热重载）。

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

可以通过执行命令面板中的 Open Keyboard Shortcuts（打开键盘快捷方式）命令来更改键盘映射。

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

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

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

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

Flutter 属性编辑器是由 Flutter 扩展提供的强大工具，让您可以直接从其视觉界面查看和修改 Widget 属性。

点击 VS Code 侧边栏中的 Flutter Property Editor（属性编辑器）图标。
Flutter 属性编辑器将在侧面板中加载。
请参阅 Flutter 属性编辑器文档以获取详细的使用指南。

Flutter Property Editor side panel in VS Code

所有已知 Bug 都在问题跟踪器中进行追踪：Dart 和 Flutter 扩展 GitHub 问题跟踪器。我们欢迎关于 Bug/问题以及功能请求的反馈。

在提交新问题之前

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

提交新问题时，请附上 flutter doctor 的输出。

此页面内容有帮助吗？

除非另有说明，本网站上的文档反映的是 Flutter 3.41.5 版本。页面最后更新于 2026-05-05。查看源码或报告问题。

Visual Studio Code

安装与设置

安装 Flutter 扩展

验证 VS Code 设置

更新扩展

创建项目

创建新项目

从现有源代码打开项目

编辑代码并查看问题

运行与调试

选择目标设备

不带断点运行应用

带断点运行应用

以调试、性能分析或发布模式运行应用

快速编辑与刷新开发周期

高级调试

调试视觉布局问题

调试外部库

Flutter 代码编辑技巧

辅助功能与快速修复

代码片段 (Snippets)

键盘快捷键

热重载与热重启

Flutter 属性编辑器

如何在 VS Code 中打开 Flutter 属性编辑器

故障排除

已知问题与反馈