跳至主要内容
内容

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 开始调试。

选择目标设备

#

当 Flutter 项目在 VS Code 中打开时，您应该会在状态栏中看到一组特定于 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 可能如下所示

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

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

快速编辑和刷新开发周期

#

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

高级调试

#

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

调试视觉布局问题

#

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

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

调试外部库

#

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

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

Flutter 代码的编辑技巧

#

如果您还有其他建议，请告诉我们！

辅助 & 快速修复

#

辅助功能是与特定代码标识符相关的代码更改。当光标放在 Flutter 小部件标识符上时，可以使用许多此类功能，如以下屏幕截图中所示的黄色灯泡图标所示。要调用辅助功能，请点击灯泡，如下面的屏幕截图所示

Code assists

您也可以按 Ctrl / Cmd + .。

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

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

代码片段

#

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

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', () { });

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

键盘快捷键

#
热重载

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

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

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

热重载与热重启

#

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

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

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

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

故障排除

#

已知问题和反馈

#

所有已知错误都将在错误跟踪器中跟踪：Dart 和 Flutter 扩展程序 GitHub 错误跟踪器。我们欢迎您提供反馈，包括错误/问题和功能请求。

在提交新问题之前

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

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-23。 查看源代码 或 报告问题.