flutter vscode环境搭建+vscode插件推荐
?VSCode是一款轻量且强大的代码开发工具,有着强大的代码编辑功能和丰富的插件生态系统,备受程序猿青睐,我写markdown文档也是使用的Vscode。现在,写flutter我也要用Vscode,这样一来,我就不用再配置其他的环境了。
vscode安装
?直接到官网下载最新版安装包:https://code.visualstudio.com/ ,下载完成后,点击安装包,然后一直下一步安装就行了。 ?安装完成后,我们先安装一些插件,点击图示位置就可以下载插件了。 
vscode插件安装
中文插件
?如果你喜欢使用中文环境,那么中文插件是必须的,在搜索框输入chinese,中文插件就会跳出,点击安装就可以了。安完以后你的vscode就是中文的了。 
code runner插件
?code runner是一个很实用的插件,安装之后可以在右上角(如图)会出现一个三角形,直接点击就可以运行你的代码了,支持的语言有很多,基本可以满足大多数程序猿的需求。 
Material Icon Theme插件
?主题图标库,为你的代码添加上好看的图标 
Bracket Pair Colorizer插件
?给匹配的括号上色。此扩展已弃用,因为此功能现已内置于VS代码中。 
Color Highlight插件
?这个插件用于给代码中的颜色进行高亮展示。 
小霸王插件
?有了这个插件,你就可以在写代码的间隙玩上一把坦克大战了。 
?除了上边几个插件以外,还有很多实用或者有意思的插件,针对的语言也有很多,大家可以自己多多探索。
vscode flutter插件安装
?上边是一些通用插件,写什么语言都可以用到,现在进入正题,看看我们写flutter需要用到哪些插件。
flutter插件
?flutter基本插件肯定是必须的,直接搜索flutter,安装第一个就行: 
dart插件
?flutter是基于dart语言的,所以再安装一个dart的基本插件: 
Flutter Widget Snippets插件
?Flutter Widget Snippets插件提供 Widget 代码片段快捷生成功能,输入fstful快捷键就可以生成对应代码段: 
Awesome Flutter Snippets插件
?Awesome Flutter Snippets是flutter开发最常用的扩展之一,可以更轻松地将 pub 添加到pubspec.yaml,它也可以用于更新现有的 pub。Awesome Flutter Snippets 集成了 Flutter 常用类和方法,通过分别输入快捷键 streamBldr 和 singleChildSV ,可以创建诸如 StreamBuilder 和 SingleChildScrollView 之类的小部件。 
Image Preview插件
?鼠标悬浮在超链接上会显示预览图片: 
Error lens插件
?错误高亮显示,错误提示在代码后面显示: 
?上述插件安装完了以后,基本上可以满足日常flutter开发的需求了,当然还有很多实用、有趣的插件等待着大家去发现。现在,我们可以开始愉快的开发旅途了。
|