本文由 简悦SimpRead 转码，原文地址 codewithandrea.com
一个精心策划的流行的VSCode快捷方式、扩展和设置列表，以加快您的Flutter开发......。
VSCode是一个用于Flutter开发的优秀IDE。
在你完成了基本设置步骤之后，你能做的最好的事情就是定制它以提高你的工作流程。
因此，在这篇文章中，我将向你展示我在日常的Flutter开发中使用的所有快捷方式、扩展、**设置。
准备好了吗？我们开始吧!
VSCode Shortcuts for Flutter Development
YouTube上已经有很多关于VSCode快捷方式的优秀视频，我将在最后链接最好的视频。
但现在，这里有一个我最喜欢的短名单。
1.快速修复
- MacOS:
CMD+.. - Windows:
CTRL+.。
在编辑器的任何地方使用它来获得一个上下文的代码动作列表。
你可以用它来包装、提取、删除部件等。
(快速修复的例子：包裹一个小部件)
或者在需要时导入文件。
(快速修复示例：导入一个文件)
或者从一个类的现有属性中创建一个构造函数（甚至是所有的数据类方法）。
(快速修复示例：为最终字段创建一个构造函数)
2.显示命令调色板
- MacOS：
CMD+Shift+P。 - Windows:
CTRL+Shift+P。
这将弹出一个搜索框，你可以看到所有最近使用的命令，并输入搜索新的命令。
(Show the command palette)
3.按名称搜索文件
- MacOS：
CMD+P。 - Windows:
CTRL+P.
这对打开你项目中的任何文件都是很好的，不用离开键盘。
(按名称搜索文件)
4. Dart: Add Dependencies
首先，打开命令调色板，输入 "Dart: Add Dependency "或 "Dart: Add Dev Dependency"。
(在pubspec.yaml中添加一个Dart依赖项)
然后它将显示一个可搜索的软件包列表，这些软件包在pub.dev上可用。
(搜索pub.dev上可用的软件包)
一旦你选择了一个依赖项，它将被添加到你的pubspec.yaml文件中并自动安装。
5. Flutter & Dart snippets
Dart和Flutter插件包括许多片段，您可以用它们来快速添加常见的Flutter小工具。
你可能已经熟悉了这些。
stless: 插入一个 "无状态部件"（StatelessWidget）。stful: 插入一个 "有状态的小部件"（StatefulWidget）。stanim: 插入一个带有 "AnimationController "的StatefulWidget。
(在 "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有大量的快捷方式。如果你想看到它们，并自定义键绑定，这是一个使用的方法。
(显示所有的键盘快捷方式)
VSCode Extensions for Flutter Development
使用正确的扩展将为您节省大量的时间，并给您带来的超能力。这些是我最喜欢的。
1.Dart数据类生成器
在创建模型类时，你经常需要诸如copyWith()、toString()、toJson()、fromJson()、toMap()、fromMap()、==、hashCode等方法。
这很繁琐，也很容易出错。
相反，使用Dart数据类生成器来为你做这些工作要好得多：
(使用快速修复快捷方式来生成数据类)
(生成的数据类代码)
特别是当你有很多属性的模型类时，这可以极大地节省时间!
在这里下载。
注意：还有一个替代方案叫做Json to Dart Model，它是相当可配置的，也可以利用代码生成库，如Freezed和Json Serializable。
2. Flutter Riverpod Snippets
如果你使用Riverpod，你很快就会厌倦用手输入所有的提供者和消费者。
通过使用Robert Brunhage的Flutter Riverpod Snippets扩展，这项工作变得更加容易：
(创建无状态消费者的Riverpod片段)
(Generated ConsumerWidget boilerplate)
下载和文件在这里。
你是否喜欢Flutter Bloc而不是Riverpod？那么bloc extension就能满足你的要求。👍
3.错误镜头
你想知道你在打字时是否会犯错？
Error Lens扩展提高了对错误、警告和其他语言诊断的高亮显示，我发现它有很大的帮助：
(Error lens extension in action)
在此下载：
- Error Lens（在你输入时获得任何有关错误的反馈：超级有用）
4.Better Comments
通过突出显示警报、注释、TODO等来改进你的代码注释。
(使用Better Comments扩展的高亮注释)
在这里下载。
5. Remove comments
当你创建一个新的Flutter项目时，这对删除所有默认的注释相当有用。
(用Remove Comments扩展删除所有单行注释)
在这里下载。
6. Advanced New File
创建文件的通常方法是在侧边栏中选择你想要的文件夹，然后点击 "新建文件"。
这很慢，因为它迫使你使用鼠标。而且对于大项目来说，找到正确的文件夹可能是一个挑战。
高级新文件扩展让你在工作区的任何地方创建文件，只需使用你的键盘。
你可以从命令调色板上运行它。
(选择高级新文件扩展)
然后，该扩展将使用模式匹配来帮助你找到你需要的文件夹，当你输入。
(高级新文件：文件夹选择)
最后，输入所选文件夹中的文件名。
(高级新文件：选择文件名)
结果，扩展程序将在正确的地方创建一个空文件，并为你打开它。
(高级新文件：创建的文件)
在这里下载。
7. GitHub Copilot
GitHub Copilot是一个人工智能对程序员，它在你输入时建议行的完成和整个函数体。
(GitHub Copilot在运行)
虽然它并不总是正确的，但到目前为止，它为我节省了大量的时间，这让我感到很惊讶
它帮助我编写了文档，甚至为我的新课程编写了一些登陆页面的副本! 🤯
(使用GitHub Copilot编写文档)
在这里下载。
8. 德古拉官方主题（可选）
当然，你可以自由选择你最喜欢的主题（只要你使用黑暗模式😉）。
虽然这是我的最爱。
9. Firebase Explorer
如果你想在不离开VSCode的情况下看到你所有的Firebase项目、Firestore数据、云函数等等，这个是为你准备的。
(Firebase explorer panel)
在这里下载。
如果您的Flutter应用程序连接到一些REST APIs，这些扩展也将是有用的。
- Rest Client: 发送HTTP请求并直接在Visual Studio Code中查看响应。
- Thunder Client: 是Postman的一个很好的替代品，可以在VSCode中管理所有REST API调用。
- Live Server：为静态和动态页面启动一个具有实时重载功能的本地开发服务器。
除了所有伟大的快捷方式和扩展，还有一些Flutter特有的设置将对您有很大的帮助！
这些可以通过打开**首选项：打开设置（JSON）**的命令调色板。
(Preferences: 通过命令调色板打开设置)
我觉得最有用的是修复所有错误和保存时格式化代码的选项。
1.保存时修复所有错误
我相信你一定对linter一遍又一遍地告诉你要使用const感到厌烦。
(由于缺少const构造函数而出现inter警告)
好吧，与其手工修复所有这些警告，不如在你的设置文件中添加这个。
"editor.codeActionsOnSave": {
"source.fixAll": true
}
当你保存时，所有的const错误（以及许多其他的错误）都会消失!
2.保存时的格式
在创建声明式布局时，我们经常会出现不平衡的代码或很长的行。
(有长行的示例代码)
为了解决这个问题，我们要做的就是在正确的地方加上所有的逗号，然后保存文件。
(保存文件后的格式化代码)
要想在保存时启用格式化，请在设置中添加以下内容。
{
"editor.formatOnSave": true
}
3.括号对着色
最近一个版本的VSCode引入了高性能的括号对着色--这项功能在Flutter中特别有用。
你所要做的就是启用它。
{
"editor.bracketPairColorization.enabled": true
}
然后你就可以享受所有的彩色括号了。
(括号对着色的操作)
更多的细节在这里。
4.预览Flutter UI指南
另一个我很喜欢的设置叫做previewFlutterUiGuides，可以像这样启用。
{
"dart.previewFlutterUiGuides": true
}
有了这个，编辑器会在我们的小部件旁边显示一些UI指南。
(Preview Flutter UI Guides in action)
我的settings.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,
"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视频的精选集。
编码愉快!
