目录
1.Pubspec Assist
2.Error Lens
3.Flutter Tree
4.Bracket Pair Colorizer 2
5.Dart Data Class Generator
6.Flutter Stylizer
7.Better Comments
8.Color Highlight
9.Markdownlint
10.JSON to Dart Model
首页 开发工具 VSCode 【整理分享】10个VSCode中用于Flutter开发的最佳扩展

【整理分享】10个VSCode中用于Flutter开发的最佳扩展

Apr 10, 2023 pm 07:13 PM
vscode visual studio code flutter

本篇文章给大家整理分享10个用于Flutter开发的最佳VSCode扩展,希望对大家有所帮助!

【整理分享】10个VSCode中用于Flutter开发的最佳扩展

1.Pubspec Assist

你是否厌倦了在pub.dev上寻找必要的Flutter和Dart包?你应该给Pubspec Assist扩展一个机会。这个扩展允许你在不放弃编辑器的情况下搜索软件包,然后将它们附加到pubspec.yaml文档中。此外,它允许你通过用逗号分隔标题来同时寻找许多包。

1.gif

2.Error Lens

在开发过程中,错误和警告是正常的,但我们用来处理它们的方法是独特的。在VS Code编辑器中,错误和警告通常显示在底部,我们必须滚动列表以查看是否有其他问题。【推荐学习:vscode教程编程教学

Error Lens扩展突出显示了代码中的错误行,并在行尾附加了错误细节。错误图标也会显示在沟槽中。

此外,你可以在settings.json文件中自定义错误高亮的颜色。这将使你的错误显得更加诱人。

2.webp

3.Flutter Tree

当构建具有大量widget的应用程序时,很难在树中识别小部件。Flutter Tree扩展以简化的语法创建所需的widget树。这使得创建widget树变得更加容易,但你必须使用它自己的语法来做,如下所示。

3.gif

4.Bracket Pair Colorizer 2

我们经常迷失在嵌套类和小部件的迷宫中,浪费了大量的时间和精力试图找到正确的括号对。当涉及到定位错误的括号时,Bracket Pair Colorizer 2是一个救世主。

您也可以自定义括号对的颜色。

4.gif

5.Dart Data Class Generator

通常,我们会忽略类中所需方法的创建。VS Code有一个实用程序,允许你添加缺少的方法,但你一次只能添加一个。Dart Data Class Generator克服了这个问题,它使用基于类属性或原始JSON的构造函数、copyWith、toMap、fromMap、toJson、fromJson、toString、operator ==和hashCode方法来构建Dart数据类,正如其名称所暗示的。

这个扩展还按字母顺序对导入进行排序,并将它们转换为适当的格式。

5.gif

6.Flutter Stylizer

管理一个结构不充分的复杂代码库,会降低工程师的效率。Flutter Stylizer扩展通过以一致和有主见的方式组织你的方法来消除这个问题。

这个工具以下列方式组织文件中的类:

构造函数--命名的构造函数--公共静态变量--公共实例变量--公共覆盖变量--私有静态变量--私有实例变量--公共覆盖方法--其他公共方法--构建方法。

Flutter本身提供了格式化的选择,然而,它只对Dart文件进行格式化,它不会对代码进行重新排序。Flutter根据这些格式化规则来格式化代码。

6.gif

7.Better Comments

如果所有的注释都采用相同的格式,我们将无法按照重要性来安排工作,并且有忽略重要任务的风险。Better Comments扩展有助于创建丰富多彩的注释,这使他们更具可读性。这样可以更容易地跟踪代码注释。

你所要做的就是用*?TODO开始注释,它就会以指定的方式被着色。你还可以使用settings.json文件创建你自己的注释风格。

7.webp

8.Color Highlight

在构建程序时,我们管理广泛的颜色选择,但假设我们正在编程的颜色在代码编辑器中是可见的?这将是非常有利的显示程序的颜色,而不需要启动程序。Color Highlight插件可以查看代码中通过样式化颜色指定的颜色。

8.webp

9.Markdownlint

Flutter项目中没有验证器可以确保检测到README.md或CHANGELOG.md文档中的问题。为了弥补这一点,Markdownlint插件提供了一套准则,以鼓励Markdown文件的标准和统一性。你可以使用这个扩展来检查本地的问题,并在实时发布之前验证内容。

在这张图片中,你可以看到一些错误,如多个连续的空行,标题级别应该递增一个,以及列表应该被空行包围。与此相关,我想提醒你,你可以通过使用预览按钮在VS Code中预览Markdown文件。

9.webp

10.JSON to Dart Model

当处理大量的JSON文件时,为每个文件构建Dart模型是很费力的。JSON to Dart Model为给定的JSON字符串创建一个Dart类。通过在你的JSON键中添加r@d@,可以使JSON值成为必需或默认值,JSON to Dart Model将为你产生Dart模型。

在下图中,JSON文件显示在左边,所需的类和属性显示在右边,这是从JSON文件中使用JSON to Dart Model扩展生成。

10.webp

更多关于VSCode的相关知识,请访问:vscode基础教程

以上是【整理分享】10个VSCode中用于Flutter开发的最佳扩展的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么查看word文档 vscode查看word文档的方法 vscode怎么查看word文档 vscode查看word文档的方法 May 09, 2024 am 09:37 AM

首先,在电脑上打开vscode软件,点击左边的【Extension】(扩展)图标,如图中①所示然后,在扩展界面的搜索框中输入【officeviewer】,如图中②所示接着,从搜索结果中选择【officeviewer】安装,如图中③所示最后,打开文件,如docx,pdf等,如下图

vscode怎么绘制流程图_visual_studio code绘制流程图的方法 vscode怎么绘制流程图_visual_studio code绘制流程图的方法 Apr 23, 2024 pm 02:13 PM

首先要打开电脑中的visualstudiocode,点击左侧四个方块按钮然后在搜索框中输入draw.io查询插件,点击安装安装好后,新建一个test.drawio文件接着选中test.drawio文件,进入编辑模式左侧有各种图形,随意选择,就可以绘制流程图了绘制好后,点击文件→嵌入→svg下面再选择嵌入复制svg代码将复制的svg代码粘贴到html代码中打开html网页,就可以看到绘制的流程图了点击网页上的图片,就可以跳转页面在该页面可以放大缩小流程图在这里,我们选择点击右下角的铅笔图案,跳转网

PHP 与 Flutter 的比较:移动端开发的最佳选择 PHP 与 Flutter 的比较:移动端开发的最佳选择 May 06, 2024 pm 10:45 PM

PHP和Flutter是移动端开发的流行技术。Flutter胜在跨平台能力、性能和用户界面,适合需要高性能、跨平台和自定义UI的应用程序。PHP则适用于性能较低、不跨平台的服务器端应用程序。

加州理工华人用AI颠覆数学证明!提速5倍震惊陶哲轩,80%数学步骤全自动化 加州理工华人用AI颠覆数学证明!提速5倍震惊陶哲轩,80%数学步骤全自动化 Apr 23, 2024 pm 03:01 PM

LeanCopilot,让陶哲轩等众多数学家赞不绝口的这个形式化数学工具,又有超强进化了?就在刚刚,加州理工教授AnimaAnandkumar宣布,团队发布了LeanCopilot论文的扩展版本,并且更新了代码库。图片论文地址:https://arxiv.org/pdf/2404.12534.pdf最新实验表明,这个Copilot工具,可以自动化80%以上的数学证明步骤了!这个纪录,比以前的基线aesop还要好2.3倍。并且,和以前一样,它在MIT许可下是开源的。图片他是一位华人小哥宋沛洋,他是

vscode怎么开启后台更新 vscode开启后台更新方法 vscode怎么开启后台更新 vscode开启后台更新方法 May 09, 2024 am 09:52 AM

1.首先,打开界面后,点击左上角的文件菜单2.随后,在首选项栏目中点击设置按钮3.接着,在跳转的设置页面中,找到更新板块4.最后,鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮,并重启程序即可

vscode工作区怎么添加文件 vscode工作区添加文件的方法 vscode工作区怎么添加文件 vscode工作区添加文件的方法 May 09, 2024 am 09:43 AM

1.首先,打开vscode软件,点击资源管理器图标,找到工作区窗口2.然后,点击左上角的文件菜单,找到将文件夹添加到工作区选项3.最后,在本地磁盘中找到文件夹位置,点击添加按钮即可

vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 May 09, 2024 am 10:30 AM

1.首先,打开设置菜单中的settings选项2.随后,在跳转的commonlyused页面中找到terminal栏目3.最后,在该栏目右侧取消勾选usewslprofiles按钮即可

VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 May 09, 2024 am 09:49 AM

1.首先,打开界面后,点击工作区界面2.然后,在打开的编辑面板中,点击文件菜单3.随后,点击首选项栏目下的设置按钮4.最后,鼠标点击勾选CursorSmoothCaretAnimation按钮,保存设置即可

See all articles