前言
为什么使用VSCode?
flutter官方推荐的编辑器有IDEA/Android Studio和VSCode, 之前开发Flutter用的IDEA, 不过IDEA始终比较重,于是换用VSCode 发现开发体验也非常的好。
安装开发环境
安装Flutter
还没有安装flutter的小伙伴可以先看Flutter Install或者Google，这里就不贴了。
安装VSCode
VSCode也是flutter官方推荐的编辑器，小伙伴可以先看官方使用教程
安装Flutter插件
搜索并安装Dart和Flutter插件
验证配置
- 在终端中运行
flutter doctor,查看输出是否有问题 - 或者在VSCode中打开命令面板 找到
Flutter: Run Flutter Doctor执行
VSCode 命令面板(cmd+shift+p)支持搜索所以一般输入
flutter就可以方便找到我们需要的命令
使用VSCode开发
新建Flutter项目
- 在终端中可以使用
flutter create - 也可以在VSCode中打开命令面板 找到
Flutter: New Project执行
Assists & Quick Fixes
- 命令面板
Quick fix或者快速修复(没错支持中文输入=。=) - 或者使用快捷键cmd + .
Sort Members
- 命令面板
Sort Members - 或者 右键->源代码操作->Sort Members
- 也可以自定义
Sort Members的快捷键
Organize Imports
- 命令面板
Organize Imports - 或者 右键->源代码操作->Organize Imports
- 或者 快捷键shift + option + o
格式化(Fotmat Document)
- 命令面板
Fotmat Document - 或者 右键->设置文档的格式
- 或者 快捷键 shift + option + f
Go to Definition
- 右键
转到定义 - 快捷键f12 或者 cmd+左键
Find All References
- 右键
Find All References
代码片段
Flutter扩展包含了一些常用的代码片段
stlessStatelessWidgetstfullStatefulWidgetstanimStatefulWidget with AnimationController
我们也可以增加自己自定义的代码片段
- 在控制台输入
Configure User Snippets/ 首选项:配置用户代码片段 - 选择dart.json
- 编写自己的代码片段
使用VSCode调试
运行Flutter项目
- 调试->启用调试(F5)
可以在命令面板送找到
Debug:Select and Start Debugging执行->选择添加配置->选择Dart&Flutter,这样就不用每次都选调试环境了。 也可以在调试界面 选择小齿轮 选择Dart&Flutter
hot reload
- save(cmd+s)
- 或者点击绿色圆形箭头按钮
选择调试设备
- 在界面右下角可以选择设备
- 或者命令面板 找到
Flutter: Select Devices
视图调试
在运行flutter的时候打开命令面板输入 Flutter:Toggle 即可看到熟悉的命令
- Toggle Baseline Painting
- Toggle Repaint Rainbow
- Toggle Slow Animations
- Toggle Slow-Mode Banner
Observatory
命令面板 Dart: Open Observatory
调试控制台
很多时候VSCode开发体验都蛮好的，但是调试控制台真的难用，还不支持搜索。 不过我们可以设置flutter log输出文件，用其他软件来看log。
- 在用户设置中搜索 flutter run log 中设置
- 用其他软件打开这个文件 比如自带的控制台
open -a Console .vscode/run.log
VSCode使用Tips
强大的cmd+p 和 cmd+shift+p
cmd+p可以跳转到文件，但是可以输入？获得更多操作
cmd+shift+p 是命令面板，有各式各样的命令，还会提示命令的快捷键 比如我忘了Quick Fix的快捷键，就可以方便的找到
快捷键
有小伙伴不喜欢VSCode自身的快捷键可以去下载扩展
或者去设置中修改键盘快捷方式
插件
- Bracket Pair Colorizer 2 Flutter代码括号很多 这个插件可以很方便的区分
- GitLens 神器 用了完全离不开=。=
VSCode 与 IDEA
VSCode的优势 - 开发体验更好
- 轻，开多个工程毫无压力
- 更换主题方便
- GitLens插件真的好用
IDEA的优势 - 调试功能更强
- flutter调试功能更多更方便 Flutter Inspector中Widgets,Render Tree,Performance
- 调试功能更强大 Grep Console插件很方便
本文版权属于再惠研发团队，欢迎转载，转载请保留出处。@白尔摩斯
