需先安装 Dart 和 Flutter SDK 并配置 PATH,再安装 Dart Code 与 Flutter 官方扩展,启用 LSP;接着用 flutter create 创建项目并在 VSCode 中打开,选择设备后 Cmd+Enter 启动调试,支持断点、热重载(Cmd+S)和热重启(Cmd+Shift+H),还可自定义代码片段提升效率。
如果您希望在 visual studio code 中高效开发 dart 和 flutter 应用,则需要正确配置编辑器环境、安装必要扩展并掌握核心工作流。以下是实现这一目标的具体步骤:
本文运行环境:MacBook Air,macOS Sequoia
一、安装 Dart 和 Flutter SDK
VSCode 本身不包含 Dart 或 Flutter 运行时,必须先在系统中安装官方 SDK,才能启用语法支持、调试和热重载功能。
1、访问 https://flutter.dev/docs/get-started/install,下载对应 macOS 的 Flutter SDK 压缩包。
2、解压至 /Users/yourname/development/flutter 目录(路径中不得含空格或中文)。
3、将 flutter/bin 和 flutter/bin/cache/dart-sdk/bin 添加至系统 PATH 环境变量。
4、在终端执行 flutter doctor,确认所有依赖项状态为绿色对勾。
二、配置 VSCode 扩展与设置
VSCode 需通过扩展获取 Dart/Flutter 特定能力,包括代码补全、跳转定义、格式化及设备选择等功能。
1、打开 VSCode,进入扩展视图(快捷键 Cmd+Shift+X)。
2、搜索并安装官方扩展:Dart Code 和 Flutter(均由 Dart-Code 团队发布)。
3、重启 VSCode 后,在命令面板(Cmd+Shift+P)中输入 Dart: Open Extension Log,验证扩展已激活。
4、在设置中启用 dart.previewLsp 并设为 true,以启用基于 LSP 的语言服务。
三、创建并运行首个 Flutter 项目
使用命令行初始化项目可确保工程结构完整,并自动关联 VSCode 工作区配置。
1、在终端中执行 flutter create my_first_app,生成标准项目模板。
2、在 VSCode 中通过 File → Open Folder 打开该目录。
3、等待右下角状态栏显示 No Devices,点击后选择已连接的 iOS 模拟器或 Android 设备。
4、按下 Cmd+Enter(或点击侧边栏“Run and Debug”中的绿色三角形),启动调试会话。
四、调试与热重载操作
VSCode 提供原生集成调试界面,无需切换终端即可完成断点设置、变量检查与 UI 实时更新。
1、在 lib/main.dart 文件中,点击行号左侧空白处设置断点。
2、启动调试后,程序将在断点处暂停,右侧“VARIABLES”面板显示当前作用域变量值。
3、修改 Widget 树中的文本内容,保存文件(Cmd+S),观察模拟器中界面即时刷新。
4、若需完整重建 UI,按 Cmd+Shift+H 触发热重启(Hot Restart)。
五、自定义代码片段与快捷键
通过用户代码片段可快速插入常用 Dart/Flutter 结构,减少重复书写,提升编码一致性。
1、打开命令面板,输入 Preferences: Configure User Snippets,选择 Dart。
2、在打开的 dart.json 文件中添加新片段,例如 stless 对应 StatelessWidget 模板。
3、定义 body 字段为:"return Scaffold(body: Center(child: Text('$1')));"。
4、保存后,在 .dart 文件中输入 stless 并按 Tab 键,即可展开完整结构。










