用于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，它相当可配置，也可以利用代码生成库，如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视频的精选集。

编码愉快!

avatar
文章
阅读
粉丝