阅读 15600

使用VSCode开发Flutter

前言

为什么使用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扩展包含了一些常用的代码片段

  • stless StatelessWidget
  • stfull StatefulWidget
  • stanim StatefulWidget with AnimationController

我们也可以增加自己自定义的代码片段

  1. 在控制台输入Configure User Snippets / 首选项:配置用户代码片段
  2. 选择dart.json
  3. 编写自己的代码片段

这是我们写的代码片段可做参考

使用VSCode调试

运行Flutter项目

  • 调试->启用调试(F5)

可以在命令面板送找到Debug:Select and Start Debugging执行->选择添加配置->选择Dart&Flutter,这样就不用每次都选调试环境了。 也可以在调试界面 选择小齿轮 选择Dart&Flutter

hot reload

  • save(cmd+s)
  • 或者点击绿色圆形箭头按钮

选择调试设备

  • 在界面右下角可以选择设备

-w259

  • 或者命令面板 找到Flutter: Select Devices

视图调试

在运行flutter的时候打开命令面板输入 Flutter:Toggle 即可看到熟悉的命令

  • Toggle Baseline Painting
  • Toggle Repaint Rainbow
  • Toggle Slow Animations
  • Toggle Slow-Mode Banner

-w518

Observatory

命令面板 Dart: Open Observatory

调试控制台

很多时候VSCode开发体验都蛮好的,但是调试控制台真的难用,还不支持搜索。 不过我们可以设置flutter log输出文件,用其他软件来看log。

  • 在用户设置中搜索 flutter run log 中设置

-w499

  • 用其他软件打开这个文件 比如自带的控制台open -a Console .vscode/run.log

VSCode使用Tips

强大的cmd+p 和 cmd+shift+p

cmd+p可以跳转到文件,但是可以输入?获得更多操作

-w539

cmd+shift+p 是命令面板,有各式各样的命令,还会提示命令的快捷键 比如我忘了Quick Fix的快捷键,就可以方便的找到

-w546

快捷键

有小伙伴不喜欢VSCode自身的快捷键可以去下载扩展

-w389

或者去设置中修改键盘快捷方式

插件

VSCode 与 IDEA

VSCode的优势 - 开发体验更好

  • 轻,开多个工程毫无压力
  • 更换主题方便
  • GitLens插件真的好用

IDEA的优势 - 调试功能更强

  • flutter调试功能更多更方便 Flutter Inspector中Widgets,Render Tree,Performance
  • 调试功能更强大 Grep Console插件很方便

本文版权属于再惠研发团队,欢迎转载,转载请保留出处。@白尔摩斯

关注下面的标签,发现更多相似文章
评论