前言

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

  • stlessStatelessWidget
  • stfullStatefulWidget
  • stanimStatefulWidget 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)
  • 或者点击绿色圆形箭头按钮

选择调试设备

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

  • 或者命令面板 找到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自身的快捷键可以去下载扩展

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

插件

VSCode 与 IDEA

VSCode的优势 - 开发体验更好

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

IDEA的优势 - 调试功能更强

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

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

作者:升级之路
链接:https://juejin.im/post/5c19f4b551882543871d62fc
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

使用VSCode开发Flutter的更多相关文章

  1. vsCode开发flutter项目

    Visual Studio Code 安装: 下载链接:https://code.visualstudio.com/ 下载完成后根据步骤自行安装.     使用vsCode开发flutter项目需要部 ...

  2. Flutter Android 真机器调试 、模拟器调试、Vscode 中开发 Flutter 应用

    必备条件: 1.准备一台 Android 手机 2.手机需要开启调试模式 3.用数据线把手机连上电脑 4.手机要允许电脑进行 Usb 调试 5.手机对应的 sdk 版本必须安装 注意: 1.关闭电脑上 ...

  3. .Net Core Linux centos7行—vscode开发,linux部署运行

    前面搭建好啦linux运行环境,下面搭建windows下的开发环境.并完成调试 参考地址:https://www.microsoft.com/net/core#windows. 按照步骤来就好.安装. ...

  4. vscode 开发.net core 从安装到部署 教程详解

    一:环境准备: windows系统需要 win7 sp1 / windows 8  / windows 2008 r2 sp1 / windows10: 其他版本的windows系统在安装.NET C ...

  5. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)

    最近使用vscode比较多. 学习了一下如何在mac上使用vscode开发asp.netcore项目. 这里是我写的关于vscode的一篇文章: https://www.cnblogs.com/cgz ...

  6. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(3)

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 由于 ...

  7. 使用vscode开发调试.net core应用程序并部署到Linux跨平台

    使用VS Code开发 调试.NET Core RC2应用程序,由于.NET Core 目前还处于预览版. 本文使用微软提供的示例进行开发及调试. https://github.com/aspnet/ ...

  8. vsCode 开发微信小程序插件

    用 vsCode 开发微信小程序可以配置以下插件,让开发更美好: 1. vscode weapp api 2. vscode wxml 3. vscode-wechat 4. Easy WXLESS ...

  9. 用vscode开发vue应用[转]

    https://segmentfault.com/a/1190000019055976 现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程 ...

随机推荐

  1. AtCoder-arc059 (题解)

    A - いっしょ / Be Together (结论/暴力) 题目链接 题目大意: 有 \(n\) 个数字,要将它们变成相等,对每一个数字最多操作一次,如将 \(a \to b\) 的代价为 \((a ...

  2. cmdb知识总结

    cmdb面试 1.paramiko模块的作用与原理 2.cmdb是什么 3.为什么要开发CMDB? 4.你们公司有多少台服务器?物理机?虚拟机? 5.你的CMDB是如何实现的? 6.CMDB都用到了哪 ...

  3. Java笔记_静态变量和实例变量的区别

    这里简单做一下笔记,区分Java全局变量里的静态变量与实例变量. 1.Java里的全局变量 首先了解Java里的全局变量,也叫成员变量. 特点: (1).一个类中既不在方法体内,也不在程序块内定义的变 ...

  4. python selenium IE Firxfor pyinstaller

    以前在python环境下selenium 主要用的是chromdriver,这次发现老是报错(Timeout), 实际又是正确的, 可能是和chrome版本不正确,再加上我程序蹦来就在windows环 ...

  5. js遍历数组和数组对象

    <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.l ...

  6. [转]解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’ 问题

    当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不 ...

  7. ajax分页和搜索

    //控制器function show(Request $request){ $page=$request->page?$request->page:1; $size=4; $pian=($ ...

  8. javaScript 一些小技巧

    日历 创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(D ...

  9. 另类WebShell监测机制--基于auditd

    鸣  谢 VSRC感谢业界小伙伴——老陈投稿精品原创类文章.VSRC欢迎精品原创类文章投稿,优秀文章一旦采纳发布,将有好礼相送,我们为您准备的丰富奖品包括但不仅限于:MacbookAir.VSRC定制 ...

  10. 英语partschinite芬达石partschinite锰铝榴石

    partschinite指锰铝榴石,属于石榴石的一种,由于它有芬达饮料的诱人颜色,大家也称其为“芬达石”.石榴石宝石族中重要品种之一,化学成分为锰铝硅酸盐,颜色从红到橙红,红到棕红,玫瑰红.浅玫红均有 ...