[Flutter翻译]Flutter的基本VS代码扩展

Sunbreak
269 阅读5分钟

原文地址：blog.logrocket.com/essential-v…

原文作者：blog.logrocket.com/author/aach…

发布时间：2021年6月2日 2分钟阅读

image.png

简介

Flutter足够灵活，可以让我们使用任何文本编辑器或IDE编写应用程序。然而，使用Flutter团队提供插件支持的IDE是一种更好的开发体验。诸如代码补全、语法高亮、小部件编辑辅助、运行和调试支持等功能使应用程序的开发过程更加高效和无障碍。

在这篇文章中，我将带领你了解一些有用的VS Code扩展，以增强你的Flutter开发工作流程。以下是我们要介绍的扩展类型。

  • 基本要素
  • 代码片段
  • 公共规格帮助器
  • 测试
  • 架构

基本原理

Dart和Flutter

Dart和Flutter扩展能够在VS Code中支持Dart编程语言。我们得到了有效编辑、重构和运行Flutter和Angular Web应用程序的工具。

这些扩展由Flutter团队自己开发和维护，提供了大量的功能，如热重载和重启、代码完成和一些调试选项。

这些功能对开发体验影响很大。因此，对于使用Flutter开发应用程序的人来说，它们是一个必不可少的选择。

代码片段

棒极了的 Flutter 代码片段

Awesome Flutter Snippets是Dart团队正式发布后最受欢迎的扩展之一。它的特点是有许多代码片段，可以用速记法编写代码。例如：mateapp代表Material App，statefulW代表Stateful Widget，initS代表InitState。

Flutter Tree

Flutter Tree提供了一种非常简短和整洁的方式来编写widget树。

下面是它的外观。

Container(
  child: Column(
    children: [
      Child1(
        child: Child2,
      ),
      Child3(),
    ],
  ),
),

// Can be replaced by the following:

Container>Column[Child1>Child2,Child3]

一旦你按下回车键，整个小部件树的代码就被完美地布置好了。

1.gif

Dart桶状文件生成器

Dart Barrel文件生成器的作用正如其名称所示：它为包含Dart文件的文件夹生成桶状文件。桶状文件是一个文件，我们在这里写导出语句，导出库或文件夹中的其他文件。这使得导入软件包更加容易，因为我们只需要导入一个文件而不是多个。

这个简单的扩展可以为任何特定的文件夹生成桶状文件。只要在所需的文件夹上点击右键，选择两个选项中的一个来生成文件。

1.gif

Pubspec助手

Pubspec辅助工具

Pubspec Assist绝对是最有用的扩展之一。它让我们用一个简单的命令安装和更新任何数量的软件包。

我们可以轻松地搜索一个软件包，即使不确定它的确切名称，因为Pubspec Assist有足够的智能来找到正确的软件包。

1.gif

Pubspec依赖性搜索

Pubspec依赖性搜索涵盖了与前一个扩展完全不同的使用情况。它帮助我们仅仅通过点击软件包的名称或使用命令来搜索软件包。

image.png

image.png

在第一张图片中，我们被带到了pub.dev中相关软件包的页面。在第二张图中，显示的是搜索结果页面。

测试

更好的Flutter测试

如果你拖延编写测试，这个是为你准备的。对于任何文件，Better Flutter Tests都会生成一个相应的测试文件，并在其中加入模板。如果项目文件的名称或文件夹结构发生变化，相关的变化也会在测试文件中进行。这使一切保持同步，并保持完整性。

你可以通过下面的gif图片看到这个动作。

1.gif

1.gif

架构

bloc

BLoC架构的唯一缺点是它所带来的模板。幸好我们有bloc来生成从文件到模板代码的所有东西。它还支持Cubit包并具有各种片段。

1.gif

Flutter Provider Snippets

Flutter Provider Snippets是一个片段的集合，帮助我们编写在Provider架构中常用的类和方法。示例包括消费者、选择器和代理提供者。

Flutter_mobx

Flutter_mobx 提供了一些片段和工具，在代码重构期间提供帮助。它还使运行代码生成器更加直观。

1.gif

1.gif

GetX 片段

GetX Snippets 很强大，就像软件包本身一样。这个集合提供了从生成模型到页面，再到ListView或Forms等复杂部件的所有片段。如果你使用GetX库，这个扩展可以大大加快你的工作流程。

1.gif

1.gif

总结

这篇文章涵盖了最有用的VS Code扩展，它们是任何Flutter开发者的必备品。我相信这些会让你更有效率，让你的开发时间更有价值。

LogRocket。对您的网络应用的全面可视性

LogRocket是一个前端应用程序监控解决方案，可让您重放问题，就像它们发生在您自己的浏览器中一样。与其猜测错误发生的原因，或要求用户提供屏幕截图和日志转储，LogRocket让你重放会话，迅速了解出错的原因。它可以与任何应用程序完美配合，而不考虑框架，并且有插件可以记录来自Redux、Vuex和@ngrx/store的额外背景。

除了记录Redux的动作和状态外，LogRocket还记录控制台日志、JavaScript错误、堆栈跟踪、带有头文件+正文的网络请求/响应、浏览器元数据和自定义日志。它还记录了DOM，以记录页面上的HTML和CSS，甚至最复杂的单页应用程序的像素完美的视频。

免费试用。

www.deepl.com 翻译

avatar
文章
阅读
粉丝