VSCode 开发 Flutter 必用插件

快来打我* 2022-02-20 16:42 638阅读 0赞

> 阅读本文大约需要 1.5 分钟

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

Visual Studio Code  
（简称 VS Code / VSC） 是 Microsoft 为 Windows，Linux 和 macOS 开发的源代码编辑器。它支持调试，嵌入式 Git 控件，语法突出显示，智能代码补全，代码片段和代码重构。 同时也是支持自定义的，开发者可以更改编辑器的主题，键盘快捷键和首选项，拥有强大的拓展能力。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]

VSCode 的优势：

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

今天就来推荐几个开发 Flutter 应用的必用插件，使用后开发效率将会大大提高。

#### 1、运行调试插件 ####

*  **Dart**
 *  **Flutter**

这两个插件是开发 Flutter 应用的必用插件了，提供了语法检测、代码补全、代码重构、运行调试和热重载等功能。在很多配置教程上都会提示要求安装这两个插件，否则开发无法正常进行。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]

#### 2、代码片段 ####

*  **Flutter Widget Snippets**
 *  **Awesome Flutter Snippets**

第一个插件提供 Widget 代码片段，第二个插件提供常用函数的代码片段。使用起来非常方便，例如创建一个 Stateful App，只需要输入 **fstful**，即可快速创建。

![在这里插入图片描述][20190414133203216.gif]

#### 3、高亮 ####

*  **Bracket Pair Colorizer**

vscode 自动会为 Dart 代码进行高亮显示，因此无需下载其他高亮插件。但是写过 Flutter 的应该都会觉得， Flutter 简直就是嵌套地狱。因此推荐这个插件，可对括号进行高亮匹配显示，这样更易于阅读以及修改代码。

![006tNc79gy1g21y4euhp8j30hd03b74e.jpg][]

#### 4、代码托管 ####

*  **GitLens**

VSCode 中强大的 Git 工具，VSCode 必装插件之一。堪称神器，用了完全离不开了。

![在这里插入图片描述][20190425201750188.jpg]

#### 5、快捷键 ####

*  **IntelliJ IDEA Key Bindings for Visual Studio Code**
 *  **Sublime Importer for VS Code**
 *  **…**

如果你是从别的代码工具中转过来的，对 vscode 的快捷键不喜欢，可以安装你熟悉的编辑器快捷键插件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]  
**我开源了一个 Flutter 项目，欢迎关注：[https://github.com/Mayandev/morec][https_github.com_Mayandev_morec]**

--------------------

**推荐阅读**

[VS Code 前端常用插件整理][VS Code]

[我开源了一个 Flutter 项目！][Flutter]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]

--------------------

欢迎加我微信，一起交流，互相学习，共同进步！

![在这里插入图片描述][20190315083734931.jpg]  
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。  
![在这里插入图片描述][20190315083756375.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20220220/c395b4f0c6c54bd28f7b34998a66e950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20220220/c2622e7778b147519672b57faacb7d95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]: /images/20220220/8c6ac23aa28f4ca388d3b8ef85918236.png
[20190414133203216.gif]: /images/20220220/0984aa652c174b3f86d3432b3c06c929.png
[006tNc79gy1g21y4euhp8j30hd03b74e.jpg]: https://ws3.sinaimg.cn/large/006tNc79gy1g21y4euhp8j30hd03b74e.jpg
[20190425201750188.jpg]: /images/20220220/708b950fc2eb47ae83df114620b00914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]: /images/20220220/f5acc05d98274bc08a0afdd8920b6f3b.png
[https_github.com_Mayandev_morec]: https://github.com/Mayandev/morec
[VS Code]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485175&idx=1&sn=7a0e1cfd5976b35e6a944d42ed1da6bb&chksm=e80e542edf79dd381a4a68e1fc92fba8c69c76c513ab436dae5de9b8c8c6237c09977245132d&token=1677532333&lang=zh_CN#rd
[Flutter]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485223&idx=1&sn=e171030aace838bb033cc9dfb255918d&chksm=e80e55fedf79dce814db69d951167ec10f7208aa8aa19a5b03e75cf04be56642564f57a1e107&token=1677532333&lang=zh_CN#rd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]: /images/20220220/e51714eb9a70440aba1344ef3627b25f.png
[20190315083734931.jpg]: /images/20220220/38f65f729852408fbcd413a9334a81e2.png
[20190315083756375.png]: /images/20220220/945e4676a4aa4543bf5716f49bd04bfd.png