Flutter开发之 VS Code的编辑器技巧

  1. VS Code 代码格式化
Windows: Shift + Alt + F
Mac平台: Shift + Option + F

  1. VS Code 设置换行自动缩进
Preferences-->Settings
搜索:editor.wordWrap
找到Editor:WordWrap,将off修改为on即可
  1. Android Studio中的typo波浪线提示
    typo的提示:意思检查器会定位到打字以及拼写错误
    解决方法: 把拼写检查器取消掉
    Flutter开发之 VS Code的编辑器技巧_第1张图片

  2. 代码模板

    最简单的一个例子,就是在写一个有状态StatefulWidget的时候,要手动继承StatefulWidget,重写createState方法,再创建一个相应的State类并重写build方法。会写到你吐血。
    这个时候就需要一些代码模板,帮你快速生成代码。比如直接打出stf,就可以自动提示生成StatefulWidget的代码了。打出stl,就可以自动提示生成StatelessWidget的代码了。
  1. Asset资源文件的导入

Flutter中,常见类型的asset包括静态数据(例如JSON文件),配置文件,图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。

一般导入的资源都要在pubspec.yaml文件中按照下面的方式,一个一个进行声明,应用程序才能获取到。
Flutter开发之 VS Code的编辑器技巧_第2张图片
改进方法:要包含asset文件下面的所有资源,直接用下面这样方法,这样的话,只在这个目录里的文件会被包含进来。
在这里插入图片描述

  1. Flutter Outline工具,主要用于视图的预览,还有其他功能:就是右键某一个widget,可以根据提示框,快速帮你在这个widget的外面包装一层比如padding之类的代码。这个功能有时候挺方便的。
    Flutter开发之 VS Code的编辑器技巧_第3张图片
    Extract method的作用是:可以把某一个widget控件的代码,帮你封装成一个方法。不用你去手动地去找出一个widget的全部代码,再自己拉到某一个方法内。

另一方面,也可以方便地看出这个widget的相关代码,比如要复制操作起来也比较方便。

  1. 拖动widget自动生成相关代码

有一个网站:flutterstudio.app/

可以拖动widget到模拟器中,就可以生成相关的布局代码,自己手动复制粘贴就可以了。
Flutter开发之 VS Code的编辑器技巧_第4张图片
Flutter开发之 VS Code的编辑器技巧_第5张图片

你可能感兴趣的:(Flutter开发教程)