发布时间：2020年10月16日-10分钟阅读
![[Flutter翻译]Flutter - 用于快速和高效开发的Visual Studio代码扩展。](https://bianchenghao.cn/wp-content/uploads/2022/12/2022122605452522.jpg "[Flutter翻译]Flutter – 用于快速和高效开发的Visual Studio代码扩展。插图1")
扩展是一种快速完成工作的方法。很多扩展有助于减少重复性工作，减少模板代码等。还有一些扩展有助于辅助开发过程，甚至有助于更快更高效的开发。
如果你正在寻找键盘快捷键，你可以看看我的这篇文章Flutter–Visual Studio Code Shortcuts for Fast and Efficient Development。
如何安装扩展？
首先快速回顾一下如何安装扩展。在VS Code里面，点击左侧的扩展，然后搜索扩展，点击安装。
如何安装扩展程序
首先，我希望你已经启用了Dart和Flutter扩展，如果没有，你可以从这里得到他们 。Dart and Flutter. 这些提供了很多功能，通常当你开始使用flutter时，你一定会安装这些。
现在，让我们跳进扩展，看看我们可以做什么所有的奇迹。
由Nash提供的一个伟大的扩展，他从一开始就与flutter相关，是flutter社区的重要贡献者。这个扩展是最新的，没有已知的问题，如果有任何问题，你可以直接向Nash寻求任何帮助。
Awesome Flutter Snippets是一个常用的Flutter类和方法的集合。它通过消除与创建widget相关的大部分模板代码来提高您的开发速度。诸如StreamBuilder和SingleChildScrollView这样的widget可以通过分别输入快捷键streamBldr和singleChildSV来创建。
在最新的2.0.4版本中，它共有37个快捷键，其中一些是statelessW代表无状态小部件，statefulW代表创建有状态小部件等。
如何使用它？
只需输入快捷键（或开始输入并从代码辅助中选择），然后按回车/返回键。让我们创建一个有状态的widget，并将其命名为Test。
使用可怕的Flutter Snippets
这是由Jeroen Meijer创建的最著名和使用的扩展之一，它是由很多顶级flutter开发者建议的。这使它更容易添加pubspec.yaml，所有不离开你的编辑器。这只添加了最新的版本，因此它也可以用于更新现有的pubs。
如何使用它？
只需打开Command Palette（默认情况下，Windows上为Ctrl+Shift+P，Mac上为⌘+Shift+P）并搜索 “Pubspec Assist”，键入软件包名称并按回车键；它将需要一些时间来搜索并提供结果。
然后，选择任何一个可用的选项。
使用PubSpec辅助
这是一个轻量级的扩展，由Felix Angelov创建，他也是Flutter社区中一个非常著名的贡献者。这为Bloc库提供了支持，并为Flutter和AngularDart应用程序提供了有效创建Blocs和Cubits的工具。
如何使用它？
命令
您可以通过启动命令调色板（默认情况下，Windows上为Ctrl+Shift+P，Mac上为⌘+Shift+P）并运行输入Bloc.New Bloc，激活命令。New Bloc，或者你可以右键点击你想创建bloc/cubit的目录，从上下文菜单中选择命令。
使用 bloc – 命令
代码行动
这个扩展提供了一些代码动作，可以像下面的gif一样使用。选择你想包装的小部件，然后右击并选择所需的代码操作。例子：用Bloc Builder包装
使用集团–代码行动
除此以外，还有很多代码段也可以在编码时使用，如bloc、blocprovider等。
该扩展允许在VS Code项目中快速地构建flutter BLoC模板。
如何使用它？
右键点击当前项目中的文件或文件夹。你可以发现多个选项被添加到上下文菜单中，如新建Bloc、新建事件、新建模型、新建页面等。
使用Flutter文件
这是用漂亮的语法来建立基本的部件树。这使得制作widget树变得更容易，但有一个问题是，你将不得不学习一个新的语法，如下所示。 OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild] 。
使用 Flutter Tree
这有助于在你的.arb文件的翻译和你的Flutter应用之间创建一个绑定。它为官方Dart Intl库生成锅炉模板代码，并为Dart代码中的键添加自动完成。
如何使用它？
打开命令调色板（默认情况下，Windows上为Ctrl+Shift+P，Mac上为⌘+Shift+P），搜索Flutter Intl: Initialize命令。默认情况下en语言是通过自动创建文件lib/l10n/intl_en.arb来添加的。你可以用命令Flutter Intl: Add locale添加更多的locale。
给定一个JSON字符串，这个库将生成所有必要的Dart类来解析和生成JSON。 这个库是按照flutter的doc推荐来生成flutter友好的模型类。扩展支持手动序列化JSON和使用代码生成库序列化JSON。你可以从剪贴板或从文件中转换。
如何使用它？
打开命令调色板（默认情况下，Windows下为Ctrl+Shift+P，Mac下为⌘+Shift+P），搜索Json to Dart: Convert from Selection。
使用Json到Dart模型
使用这个扩展，你可以轻松地为所有需要的变量创建获取器和设置器。
只需选择你需要的变量，然后右击并选择Generate Getters and Setters选项。
使用飞镖获取器和设定器
我们经常会在嵌套widget树和嵌套类的迷宫中迷失方向，花很多时间去寻找括号对。这个扩展通过对括号对进行颜色编码，让我们更容易找到括号对。您可以自定义颜色和许多其他与括号和显示活动范围有关的功能。它还提供了扩大（shift+alt+right）和撤销（shift+alt+left）括号选择的键盘快捷方式。
如何使用它？
使用支架对调色器2
Material Theme Icons是用来显示有吸引力的图标主题的文件夹，看起来很有吸引力。它也使它更容易识别的文件和文件夹。
如何使用它？
启动命令调色板(Windows默认为Ctrl+Shift+P，Mac默认为⌘+Shift+P)，输入Material Icons，选择Activate Icon Theme。激活后，图标会出现在你的资源管理器侧边栏中。它有很多自定义功能，比如你可以改变颜色等。
左侧图标中的材质图标主题。
这是一个非常酷的扩展，它可以显示图像预览的悬停，也可以在沟槽上，这可以在方便的时候，你正在处理大量的图像。你可以预览以下文件类型：PNG，JPEG，JPG，GIF，SVG。这有助于我们从做任何错误的图像路径或名称方面。如果你把鼠标悬停在路径上，扩展名提供了一个链接到项目结构中的文件及其尺寸。
使用图像预览
很多时候，我们都会使用不同的颜色，而这个扩展就很方便，可以在我们的代码中看到通过样式化的颜色。
使用颜色高亮
这是VS代码开发者使用的另一个流行的扩展。它有助于创建丰富多彩的注释，这实际上使注释更可读。这有助于以更好的方式维护代码注释。注释有助于团队中的其他开发人员或我们未来的自己。你可以在注释中写TODO，这有助于在未来不会错过任何重要的工作。在注释中，你只需要以*或！或？或TODO开头，它就会自动有一个特定的颜色。
使用更好的评论
错误透镜有助于使诊断结果更加突出，凡是语言产生诊断结果的地方，都会高亮整个行，而且还能在线打印信息。
使用误差透镜
Gruntfuggly的Todo Tree非常方便，不仅在flutter中，在VS Code中也是如此。它将你代码中所有的TODO和FIXME标签以Treeview的形式显示在资源管理器中，从而帮助我们直接解决这些问题，而不需要在代码中手动搜索，节省了很多时间。
使用TODO树
奖励扩展
下面是一些其他的扩展，对整体的发展会有帮助。
当你想与他人实时协作编辑和调试一个项目或文件时，它是必备的。特别是在WFH场景下，以及远程工作中，这一点非常方便。
你可以与其他用户分享你的代码、终端和服务器，如果你使用实时音频扩展，那么你甚至可以在你的交流中添加音频。
CodeStream是一个开发者协作平台，它将你所有的基本开发工具，如GitHub、GitLab、Bitbucket、Slack、Teams、Jira、Trello等整合到VS Code中。CodeStream减少了上下文切换，并通过将代码审查引入VS Code来帮助提高开发人员的工作效率。
如果你有一个开发者团队，并且你经常与他们合作，这个扩展对你的帮助很大。
这是一个非常有用的扩展，它将为你的文件或文件夹提供路径完整。这使得它更容易添加图像或任何资源到我们的文件。
如果你写文章或教程，这很有用。这个扩展可以帮助你从你的代码中得到漂亮的截图。也有一个旧版本，不能与VS Code 2020一起使用。
如何使用它？
启动命令调色板（默认情况下，Windows上为Ctrl+Shift+P，Mac上为⌘+Shift+P），输入Polacode，然后选择你想要截图的代码。
它可以帮助你通过Git责备注释和代码透镜一目了然地可视化代码作者身份，无缝浏览和探索Git仓库，通过强大的对比命令获得有价值的见解等等。
我希望我已经涵盖了所有的扩展，我可以找到，并认为主要是有用的，跟着我更多的提示，技巧和翩翩的东西。有一大堆有用的键盘快捷键或技巧，我已经在不同的文章中介绍过了。
如果你有其他关于Visual Studio代码的扩展或技巧，欢迎在下面评论并告诉我。
如果你喜欢这篇文章，请支持我，尽可能多的拍手👏。Psst……你最多可以拍50次，这样我就会更有动力在未来带来更多这样的文章。
嗨，我是Ganesh S P.一个经验丰富的Java开发人员，广泛的创造性思维者和企业家和演讲者，现在冒险进入Flutter的世界。你可以在LinkedIn或github上找到我，或者在twitter上关注我。你可以从这里了解更多关于我的信息。在我的空闲时间，我是GadgetKada的内容创作者。你也可以给我发邮件：ganesh.sp006@gmail.com，聊聊任何关于科技的事情。
通过www.DeepL.com/Translator （免费版）翻译
今天的文章[Flutter翻译]Flutter – 用于快速和高效开发的Visual Studio代码扩展。分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/21935.html
