提升Flutter开发效率的几个VSCode插件

Flutter作为App跨平台的前端开发框架，支持的常用代码编辑器大概有AS(Android Studio)和VC(Visual Studio Code)。对应安卓开发来说，AS再熟悉不过了，作为一枚多年iOS开发，常使用Xcode的小编来说，第一次接触VC(Visual Studio Code),感觉比Xcode爽多了，特别是开发插件的支持，大大提高了开发效率，接下来就给大家分享常用的几个Flutter开发插件。

Flutter必备插件

• Flutter
• Dart

请先安装好Flutter和Dart，这两个插件是开发 Flutter 应用的必用插件了，提供了语法检测、代码补全、代码重构、运行调试和热重载等功能。在很多配置教程上都会提示要求安装这两个插件，否则开发无法正常进行。Dart插件基本上增加了对Dart编程语言、语法高亮和代码完成的支持。

按⌘ .查看可访问执行多个有用的操作。（在Windows和Linux上使用ctrl .）

代码片段

• Flutter Widget Snippets
• Awesome Flutter Snippets

Flutter Widget Snippets针对Widget 代码片段,创建一个StatefulWidget类，只需要输入 stf 根据提示回车就行，如gif图

Awesome Flutter Snippets是常用函数的代码片段。

这2个插件使用起来非常方便，一段非常长的代码，提供了快捷方式让你快速创建代码，提高开发效率，而且不用自己写那恶心的括号。插件提供的代码提示和快捷功能可以让你省去很多烦恼，不用担心这么多的括号嵌套怕敲错，每个对象在括号后面都有类提示，非常方便，节省很多开发时间，提升开发效率。

高亮

• Bracket Pair Colorizer

Dart的语法让初学着抓狂的是层层的括号嵌套，代码可读性差，这个插件推荐，可对括号进行高亮匹配显示，这样更易于阅读以及修改代码。

颜色预览

• Color Highlight Sergii Naumov的颜色突出显示有助于构建UI并存储颜色变量以快速识别十六进制值所指的颜色。Color Highlight提供不同的标记类型。 在图像中有我选择的标记，即“背景”。您可以在扩展程序的设置中更改以下标记：dot-before，dot-after，foreground，outline和underline。非常简洁，可以更快速有效地构建UI。

图片预览

• Image Preview Image Preview图像预览插件对于我们Flutter开发人员来说尤其有用。我们应用程序体验的一个关键部分是图像。图片使应用更吸引用户。但是你可能知道，在Flutter中导入图像有点痛苦。您必须在目录中导入它们，并且每次要使用它时都使用路径String来引用图像，智能感觉也无济于事。图像预览允许我们至少预览我们在代码行左侧写入路径的图像。与Android Studio和Intellij非常相似，包括图像和颜色。 最重要的是，如果将鼠标悬停在路径String上，则扩展程序会显示一个链接，以获取项目结构中的文件及其尺寸。

以上插件可以帮助大家，以更快，更愉快的方式完成他们的工作，如果对大家有帮助，