初识Flutter之VS Code 的基本使用

Flutter编辑器 Visual Studio Code 基本使用

前言：为何笔记强烈推荐VS Code,而非传统的Android Studio。
虽然二者都有强大的插件库以及可视化操做界面的支持。
但通过我实际使用来讲（我是一名Xcoder，此前并未经常使用这二者编辑器）。
Android Studio给个人感受就是过重了（包太大,不包括android SDK就已经1.3个G了），
而我用VS Code只有几十M的安装包。
而后就是代码风格外观，一用到VS Code第一眼就把我惊艳了，
而Android Studio...我就不说了。（但愿广大的安卓开发者不要锤我...）
总之，VS Code轻量级，以及强大的插件库支持，实在是Flutter开发的利器之一。
复制代码

若是你阅读过个人上一篇文章初识Flutter之入门前的准备,并安装好dart,flutter开发环境，以及VS Code，那请继续阅读下文，如若还未安装好，请先安装好对应环境。

一.快速从插件市场安装插件

如图：(通常安装Dart，Flutter便可，另外两个都是更新快速的自定义代码补全插件，可根据我的喜欢是否添加)

二.快速建立属于你的第一个Flutter项目 并用模拟器打开。

1. 快速建立一个属于你的项目 在termainal任意目录：

flutter create helloworld
复制代码

如无心外当前目录就会生成一个helloworld的项目，咱们用vs code打开这个项目,并用vs code打开terminal面板：

2. 使用Flutter命令启动模拟器

执行启动命令

flutter run
复制代码

这个时候因为没有没有打开相应模拟器他会提示你打开相应的安卓或iOS模拟器先。

先执行：

flutter emulators
复制代码

选择一款模拟器并启动：

flutter emulators --launch apple_ios_simulator 
复制代码

这个时候咱们的模拟器就此启动了，再次执行：

flutter run
复制代码

咱们的第一个flutter程序就启动成功了

若是咱们启动了多个模拟器或真机，执行flutter run 可能会提示你加入-d参数 选择相应模拟器去启动如图：

咱们带上相应的device id 便可 如：

flutter run -d B8031BA6-5FD4-4657-91A9-681D10DDD7D8
复制代码

固然若是咱们不熟悉flutter命令，咱们使用vs code底部菜单栏也能够快速建立模拟器并运行

以下图；

点击右下角NO Device 会弹出选择启动那款模拟器:

到此，VS Code 的基本使用就介绍到这里，以后会继续讲解Flutter的基本控件用法等，请留意后续文章。