VSCode是一个用于Flutter开发的优秀IDE。
在你完成了基本的设置步骤后,你能做的最好的事情就是定制它以提高你的工作流程。
所以在这篇文章中,我将向你展示我在日常Flutter开发中使用的所有快捷方式、扩展、设置。
准备好了吗?让我们开始吧!
Flutter开发的VSCode快捷方式
YouTube上已经有很多关于VSCode快捷方式的优秀视频,我将在最后链接最好的视频。
但现在,这里有一个我最喜欢的短名单。
1.快速修复
- MacOS。
CMD+.
- Windows。
CTRL+.
在编辑器的任何地方使用它来获得代码操作的上下文列表。
你可以用它来包装、提取、删除小部件等。
快速修复的例子:包裹一个小部件
或者在需要时导入文件。
快速修复的例子:导入一个文件
或者从一个类的现有属性中创建一个构造函数(甚至是所有的数据类方法)。
快速修复的例子:为最终字段创建一个构造函数
2.显示命令调色板
- MacOS。
CMD+Shift+P
- Windows。
CTRL+Shift+P
这将弹出一个搜索框,你可以看到所有最近使用的命令,并输入搜索新的命令。
显示命令调色板
3.按名称搜索文件
- MacOS:
CMD+P
- 视窗。
CTRL+P
这对打开你项目中的任何文件都是很好的,不用离开键盘。
按名称搜索文件
4.Dart:添加依赖性
首先,打开命令调色板,输入 "Dart:Add Dependency "或 "Dart:Add Dev Dependency"。
在pubspec.yaml中添加一个Dart依赖项
然后它将显示一个可搜索的pub.dev上可用的软件包列表。
搜索pub.dev上可用的软件包
一旦你选择了一个依赖项,它将被添加到你的pubspec.yaml
文件中并自动安装。
5.Flutter和Dart片段
Dart和Flutter插件包括许多片段,您可以用它们来快速添加常见的Flutter小工具。
您可能已经熟悉这些了。
stless
:插入一个StatelessWidget
stful
:插入一个StatefulWidget
stanim
:插入一个StatefulWidget
,用一个AnimationController
"stanim "片段,插入一个带有AnimationController的StatefulWidget。
这些都很好,因为它们为你生成了所有的模板代码,而你所要做的就是给你的部件命名。
为 "stanim "片段生成的模板
但你也可以使用代码段来生成常见的代码块,如if/else、for循环、函数定义等。
插入if/else语句的Dart片段
生成的if/else语句
要查看所有可用的Dart片段,请查看这个文件。
如果您想更进一步,您可以安装Awesome Flutter Snippets扩展,它提供了许多其他有用的片段。
6.键盘快捷键列表
- MacOS。
CMD+K CMD+S
- Windows。
CTRL+K CTRL+S
VSCode有大量的快捷方式。如果你想看到它们,并自定义按键绑定,这是一个可以使用的方法。
显示所有的键盘快捷方式
用于Flutter开发的VSCode扩展
使用正确的扩展将为您节省大量的时间,并给您带来超强的能力。这些是我最喜欢的。
1.Dart数据类生成器
在创建模型类时,你经常需要一些方法,如copyWith()
,toString()
,toJson()
,fromJson()
,toMap()
,fromMap()
,==
,hashCode
。
这是很繁琐的,而且容易出错。
相反,使用Dart数据类生成器为你做这些工作要好得多。
使用快速修复的快捷方式来生成数据类
生成的数据类代码
特别是当你有很多属性的模型类时,这可以大大节省时间!
在这里下载。
注意:还有一个替代方法叫Json to Dart Model,它相当可配置,也可以利用代码生成库,如Freezed和Json Serializable。
2.Flutter Riverpod片段
如果您使用Riverpod,您很快就会对手工输入所有的提供者和消费者感到厌倦。
通过使用Robert Brunhage的Flutter Riverpod Snippets扩展,这项工作变得更加容易。
创建无状态消费者的Riverpod片段
生成的ConsumerWidget模板
下载和文档在这里。
你更喜欢Flutter Bloc而不是Riverpod吗?那么bloc 扩展将为您提供帮助。👍
3.错误镜头
你想知道你在打字时是否犯了错误?
Error Lens扩展提高了对错误、警告和其他语言诊断的突出显示,我发现它对我帮助很大。
错误镜头扩展在运行
在这里下载。
- Error Lens(在你打字时获得任何关于错误的反馈:超级有用)
4.更好的注释
通过突出显示警报、注释、TODO等来改进你的代码注释。
用Better Comments扩展来突出注释
在这里下载。
5.删除注释
当您创建一个新的Flutter项目时,这对删除所有的默认注释相当有用。
用Remove Comments扩展删除所有单行注释
在这里下载。
6.高级新建文件
创建文件的通常方法是在侧边栏中选择你想要的文件夹,然后点击 "新建文件"。
这很慢,因为它迫使你使用鼠标。而且对于大项目来说,找到正确的文件夹可能是一个挑战。
高级新文件扩展功能让你在工作区的任何地方创建文件,只需使用键盘。
你可以从命令调色板上运行它。
选择 "高级新文件 "扩展
然后,该扩展将使用模式匹配来帮助你在输入时找到你需要的文件夹。
高级新文件:文件夹选择
最后,在选定的文件夹中输入文件名。
高级新文件:选择文件名
结果是,扩展程序将在正确的地方创建一个空文件,并为你打开它。
高级新文件:创建的文件
在此下载。
7.GitHub Copilot
GitHub Copilot是一个人工智能对程序员,它可以在你输入时提示行的完成和整个函数体。
GitHub Copilot运行中
虽然它并不总是正确的,但到目前为止,它为我节省了大量的时间,这让我感到很惊讶!它帮助我编写文档,甚至是帮助我编写一些文件。
它帮助我编写了文档,甚至是我的新课程的一些登陆页面的文案。🤯
使用GitHub Copilot编写文档
在这里下载。
8.德库拉官方主题(可选)
当然,你可以自由选择你最喜欢的主题(只要你使用黑暗模式😉)。
虽然这是我的最爱。
我推荐的另一个是Monokai Pro(需要许可证),它为常见的文件扩展名提供了一套漂亮的图标。
9.Firebase Explorer
如果你想在不离开VSCode的情况下看到你所有的Firebase项目、Firestore数据、云功能等等,这个是为你准备的。
Firebase探索器面板
在这里下载。
用于处理REST API的有用扩展
如果您的Flutter应用程序连接到一些REST APIs,这些扩展也将是有用的。
- Rest Client:发送HTTP请求并直接在Visual Studio Code中查看响应。
- Thunder Client:是Postman的一个很好的替代品,可以在VSCode中管理所有的REST API调用。
- 实时服务器。为静态和动态页面启动一个具有实时重载功能的本地开发服务器。
用于Flutter开发的VSCode设置
除了所有伟大的快捷方式和扩展,还有一些Flutter特定的设置将对您有很大的帮助!这些设置可以通过打开首选项来设置。
这些可以通过打开偏好设置来设置**。在命令调色板中打开设置(JSON)**。
首选项。通过命令调色板打开设置
我觉得最有用的是修复所有错误和保存时格式化代码的选项。
1.保存时修复所有错误
我相信你一定对linter一遍又一遍地告诉你使用const
感到厌烦。
由于缺少const构造函数,linter发出警告
好吧,与其手工修复所有这些警告,不如把这个添加到你的设置文件中。
"editor.codeActionsOnSave": {
"source.fixAll": true
}
当你保存时,所有的常量错误(以及其他许多错误)都会消失
2.保存时的格式
在创建声明式布局时,我们经常会出现不平衡的代码或很长的行。
有长行的示例代码
为了解决这个问题,我们所要做的就是在正确的地方加上所有的逗号,然后保存文件。
保存文件后的格式化代码
要想在保存时启用格式化,请在设置中加入这一点。
{
"editor.formatOnSave": true
}
3.布拉克对的着色
VSCode的最近一个版本引入了高性能的括号对着色--这个功能在Flutter中特别有用。
你所要做的就是启用它。
{
"editor.bracketPairColorization.enabled": true
}
然后你就可以享受所有的彩色括号了。
正在运行的括号对着色功能
更多细节在这里。
4.预览 Flutter UI 指南
另一个我很喜欢的设置叫previewFlutterUiGuides
,它可以像这样启用。
{
"dart.previewFlutterUiGuides": true
}
有了这个,编辑器会在我们的小部件旁边显示一些UI指南。
预览 Flutter UI 指南的操作
我的设置.json文件
请随意抓取我自己的设置,并根据你的需要进行定制。
{
"security.workspace.trust.enabled": false,
"[dart]": {
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false,
},
"dart.warnWhenEditingFilesOutsideWorkspace": false,
"dart.renameFilesWithClasses": "prompt",
"window.zoomLevel": 1,
"workbench.colorTheme": "Dracula",
"editor.bracketPairColorization.enabled": true,
"editor.inlineSuggest.enabled": true,
"editor.formatOnSave": true
}
你可能想知道为什么我在2022年仍然使用80个字符的行。嗯,这主要是为了演示的目的,因为我用大字体在1080p上录制所有的视频。
奖励:飞镖修复
你是否曾经回到一个你已经一两年没有碰过的Flutter项目,发现一堆废弃的警告?(我在看着你,FlatButton
和RaisedButton
! )
不要害怕,因为你不需要用手去修复它们。
相反,你所要做的就是在终端上运行dart fix
。
dart fix --dry-run # preview of the proposed changes
dart fix --apply # apply the changes
更多信息在这个页面。
IntelliJ / Android Studio怎么样?
很高兴你这么问。我不久前写过一篇关于它的文章。
结语
我希望以上所有的快捷方式、扩展和设置都能提高您的工作效率
当然,你还可以学习更多关于VSCode的技巧和窍门。
为此,我推荐Fireship.io的这个视频。
如果你想更深入地了解,你可以查看这个页面,它包含了一个最受欢迎的VSCode视频的精选集。
编码愉快!