使用VSCode开发Flutter

栏目: IOS · Android · 发布时间: 6年前

内容简介：还没有安装flutter的小伙伴可以先看Flutter Install或者Google，这里就不贴了。

还没有安装flutter的小伙伴可以先看Flutter Install或者Google，这里就不贴了。

安装VSCode

本体

语言包插件

VSCode也是flutter官方推荐的编辑器，小伙伴可以先看官方使用教程

安装Flutter插件

搜索并安装Dart和Flutter插件

验证配置

flutter doctor
Flutter: Run Flutter Doctor

VSCode 命令面板(cmd+shift+p)支持搜索所以一般输入 flutter 就可以方便找到我们需要的命令

使用VSCode开发

新建Flutter项目

flutter create
Flutter: New Project

Assists & Quick Fixes

命令面板 Quick fix 或者 快速修复 (没错支持中文输入=。=)
或者使用快捷键cmd + .

Sort Members

Sort Members
Sort Members

Organize Imports

Organize Imports

格式化(Fotmat Document)

Fotmat Document

Go to Definition

转到定义

Find All References

右键 Find All References

代码片段

Flutter扩展包含了一些常用的代码片段

stless
stfull
stanim

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

Configure User Snippets

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

使用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开发Flutter》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

白帽子讲浏览器安全

钱文祥 / 电子工业出版社 / 2016-3 / 79.00元

浏览器是重要的互联网入口，一旦受到漏洞攻击，将直接影响到用户的信息安全。作为攻击者有哪些攻击思路，作为用户有哪些应对手段？在《白帽子讲浏览器安全》中我们将给出解答，带你了解浏览器安全的方方面面。《白帽子讲浏览器安全》兼顾攻击者、研究者和使用者三个场景，对大部分攻击都提供了分析思路和防御方案。《白帽子讲浏览器安全》从攻击者常用技巧的“表象”深入介绍浏览器的具体实现方式，让你在知其然的情况下也知其所以......一起来看看《白帽子讲浏览器安全》这本书的介绍吧!

码农工具