用于Flutter开发的VSCode快捷方式、扩展和设置

830 阅读10分钟

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,它相当可配置,也可以利用代码生成库,如FreezedJson 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项目,发现一堆废弃的警告?(我在看着你,FlatButtonRaisedButton! )

不要害怕,因为你不需要用手去修复它们。

相反,你所要做的就是在终端上运行dart fix

dart fix --dry-run # preview of the proposed changes
dart fix --apply # apply the changes

更多信息在这个页面

IntelliJ / Android Studio怎么样?

很高兴你这么问。我不久前写过一篇关于它的文章。

结语

我希望以上所有的快捷方式、扩展和设置都能提高您的工作效率

当然,你还可以学习更多关于VSCode的技巧和窍门。

为此,我推荐Fireship.io的这个视频。

如果你想更深入地了解,你可以查看这个页面,它包含了一个最受欢迎的VSCode视频的精选集。

编码愉快!