会煮咖啡的猫

V1

2022/10/25阅读:32主题:凝夜紫

构建 Flutter 应用程序的10个最佳 VSCode 插件

构建 Flutter 应用程序的 10 个最佳 VSCode 插件

在本文中,我们将分享使用 VisualStudio 代码(VSCode) IDE 的经验。我们的开发团队更喜欢使用某些插件,这里我们将解释原因。我们建议不要注意他们的顺序: 如果一个插件在我们列表的末尾,这并不意味着它比其他插件差。

我们开始吧。

Flutter and Dart 主插件

你需要使用 Flutter 框架的第一个插件是

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

这是一个主插件,它包含了所有必要的工具来使用 VSCode 中的 Flutter 框架。当您安装它时,该语言的插件将自动安装。

Https://marketplace.visualstudio.com/items?itemname=Dart-code.Dart-code

Awesome Flutter Snippets 代码块提示

为了尽量减少编写代码时不必要的工作,人们发明了代码片段。它们是如何工作的?例如,开发人员开始输入单词“stl”,IDE 开始选择创建无状态小部件的选项。

它非常方便,节省了很多时间。理论上,任何开发人员都可以自己编写这些代码段。但是市场有一个很棒的插件

https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets

https://ducafecat.oss-cn-beijing.aliyuncs.com/podcast/53ab75912011f1924b50a30661d428cd41443afe10c449de274d40a4ee439179.png

它已经包含了所有最常用的 Flutter 片段。

Flutter Color 颜色快捷显示

https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color

我们列表中的下一个是 Flutter Color 插件。

有时,在代码中描述颜色时,您希望以可视化的方式表示该颜色。这就是这个插件的用途。它将代码中的颜色(例如 0xFF882A7B)转换为相同颜色的一小块区域。这对于在脑海中想象应用程序中的颜色非常方便。

这是它在代码中的样子。

Image Preview 图像预览

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

图像预览插件的工作方式相同。

它可以让您轻松地查看您正在 IDE 中使用的绘图的预览。

Svg Preview 预览

https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview

通常开发人员在他们的项目中使用 SVG 格式。但是,与 PNG 或 JPEG 格式不同,您不能简单地在浏览器中查看它。编写这个插件是为了能够在 IDE 中直接查看 SVG 文件。

YAML 格式验证

所有 Flutter 开发人员都遇到过编辑 pubspec.yaml 文件的问题。由于在 VSCode 中没有内置的格式化程序和验证程序,这个插件可以解决这个问题。

https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

它通过内置 Kubernetes 语法支持的 YAML-language-server 为 Visual Studio Code 提供全面的 YAML 语言支持。

Todo Tree 代码定位

开发人员有时需要在 TODO 中注意,这意味着“不要忘记在代码的这个位置做一些事情”但是在 VSCode 中没有方便的工具来显示这些注释。为此,我建议使用这个插件。

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

这个插件可以快速搜索您的工作区(使用 ripgrep) ,查找诸如 TODO 和 FIXME 之类的注释标记,并将它们显示在树视图中。单击树中的一个项目将打开该文件,并将光标放在包含 TODO 的行上。

Thunder Client API 调试工具

我们列表中的下一个是一个非常重要的插件。

https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

使用它,您可以直接在 VSCode 中测试 API,创建自己的集合,对 API 发出任何类型的请求,查看后端的请求和响应。

一旦我们发现这个插件,我们完全停止使用邮递员。

Git Graph 历史记录

要使用 git,我们使用以下插件:

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

对于直观地查看分支、合并、差异、重置等,它非常方便。

Json to Dart Model 代码生成

下面的插件需要使用 JSON 并被调用

https://marketplace.visualstudio.com/items?itemName=hirantha.json-to-dart

每个开发人员都必须使用 JSON 模型。但有时候来自后端的模型非常大。手动创建模型类可能需要很多时间。这个插件可以通过从后端复制响应来快速创建现成的模型。

本文结束,欢迎关注.


© 猫哥

  • 微信 ducafecat

  • https://wiki.ducafecat.tech

分类:

移动端开发

标签:

移动端开发

作者介绍

会煮咖啡的猫
V1

flutter node go dock