VSCode 常用快捷键，扩展推荐和 Flutter 开发的配置VSCode 是用于 Flutter 开发的优秀开发工具

VSCode 是用于 Flutter 开发的优秀开发工具。完成基本的设置步骤后，您能做的最好的事情就是对其进行自定义，以提高您的工作流程。因此，在本文中，我将向您展示我在日常 Flutter 开发中常用的快捷键、扩展和设置。

准备好了吗？让我们开始吧！

适合 Flutter 开发的 VSCode 常用快捷键

以下是我常用的快捷键：

1. Quick Fix (快速修复)

• MacOS: CMD + .
• Windows: CTRL + .

你可以在任何地方使用它，然后会弹出一个上下文菜单，在此会自动根据您当前代码可以给出对应的处理方式，如为你的 widget 嵌套多一层，扩展和移除等

也可以帮你导入所需的库

甚至还可以帮你创建构造函数

2. 显示命令面板

• MacOS: CMD + Shift + P
• Windows: CTRL + Shift + P

这将弹出一个搜索框，您可以在其中查看所有最近使用的命令并键入以搜索新命令：

3. 按文件名进行查找

• MacOS: CMD + P
• Windows: CTRL + P

这可以非常方便地在你的项目中找到所需的文件，特别是当项目结构比较复杂的时候：

4. 添加 Dart 的依赖

只需打开命令面板 ，然后输入 Dart: Add Dependency 或者 Dart: Add Dev Dependency

就会自动帮你到 pub.dev 上搜索相关依赖包，当你选择后，就会直接添加到项目的 pubspec.yaml 文件并自动安装好

5. Flutter 与 Dart 的代码片段

Flutter 与 Dart 插件里包含了许多代码片段，你可以使用以下快捷键方便快速的将它们添加到你的项目里，如以下几个例子：

• stless: 插入一个 StatelessWidget
• stful: 插入一个 StatefulWidget
• stanim: 插入一个 StatefulWidget 同时带有 AnimationController

插入代码片段后，你只需要输入你要的类名即可

如想获得更多代码片段，可以安装 Awesome Flutter Snippets 扩展。

6. 查看所有快捷键

• MacOS: CMD+K CMD+S
• Windows: CTRL+K CTRL+S

VSCode 有大量的快捷键，你可以自行查看和设置它们

适合 Flutter 开发的 VSCode 扩展

VSCode 的强大之一就是其丰富的扩展，适合的扩展将是你强而有力的帮手，可以让你事半功倍。以下就推荐一些我比较喜爱的扩展：

1. Dart Data Class Generator

当创建不同数据模型的类时，你通常会用到如 copyWith(), toString(), toJson(), fromJson(), toMap(), fromMap(), ==, hashCode 等方法，但如果全部要自己去写，实在是很浪费时间。

现在只需要通过 Dart Data Class Generator 这个扩展，就可以轻松帮你完成！

生成后的代码如下：

特别是如果你的数据模型里有很多属性的情况下，这个扩展就是非常方便的！

当然，这类型扩展并不只一个，另一个类似功能的扩展名叫 Json to Dart Model, 其功能也非常强大，可以生成功能完善的数据模型类，出来的效果就像 Freezed 和 Json Serializable

2. Flutter Riverpod Snippets

如果你在使用 Riverpod，就强烈建议你尝试使用这个扩展以快速地帮你完成所需的代码。

使用 Flutter Riverpod Snippets 能让你的代码工作变得更加轻松容易：

生成代码如下，只需输入你的类名即可

3. Error Lens

你想知道你当前的输入是否有错误吗？

Error Lens 这款扩展可以实时高亮显示你当前代码的错误、警告和其他的语法错误，让你马上可以修复相关问题，提升效率

4. Better Comments

Better Comments 是一款可以改善注释的扩展，能在注释中高亮显示警告、注意和待办事项

5. Remove comments

Remove comments 可以直接移除当前文件中所有注释，这对于在创建一个新项目时，需要移除一些系统默认生成的注释时是非常有用的

6. Advanced New File

正常情况下要新建一个文件，要选择左边栏文件夹，然后点 "New File", 这种方式下你必须要使用鼠标进行点击，而如果在一个大型项目中，要找到对应的文件夹也不是一件容易的事。

Advanced New File 扩展可以让你在任何地方都难轻松建立新的文件，而你只需使用键盘即可完成这一操作

直接找到要新建文件的文件夹

然后输入文件名即可

7. Dracula 主题

Dracula 是一个 VSCode 的主题！虽然不同人会有不同感觉，但我还是觉得这个主题值得一试 :)

8. Version Lens

你是否遇到过不知道现在使用的 Flutter 的包最新版本是什么？每次想升级到新版都必须到包的官网去查看然后在 pubspec.yaml 文件里手动更新其版本号？ 现在只要使用 Version Lens 扩展就可以轻松解决这一问题。

它可以让你直接在 pubspec.yaml 文件里查看每个包的最新版本，只需点一下就自动帮你升级到最新版了！

REST APIs 相关的扩展

如果你的 Flutter 项目需要连接 REST APIs, 以下的扩展会对你很有用：

Rest Client: 可直接在 VSCode 里发送 HTTP 请求然后查看返回的结果。

Thunder Client: Postman 的一个很好的替代品，可以方便地在 VSCode 里管理你的 REST APIs。

Live Server: 启动本地开发服务器，为静态和动态页面提供实时重载功能。

Flutter 开发中的 VSCode 里的一些配置

除了以上的快捷键和扩展的使用外，还有一些针对 Flutter 开发的配置也是你的一大助力！

要打开 VSCode 里的配置，可直接在命令面板输入 settings，然后选择以 JSON 方式进行打开

其中，以下是我觉得非常有用的2个配置

1. 保存时修复错误

我敢肯定你在写代码时经常会看到一些烦人的提示，就是要建议你在一些常量小部件前要加上 const 以优化性能，这时你需要一个一个地去修改

现在只要添加以下的配置到 settings 文件，每次你保存文件时，就会自动为你在适当的地方上添加上 const，这是一件让人非常愉快的事情！

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

2. 保存时格式化

当你代码中出现格式错乱，通常是希望能格式化一下让其变得工整好看，但如果常要手动去调用格式化功能，也是一件比较烦锁的事情。通过以下配置，每次按一个 CTRL + S (MacOS: CMD + S) 就可以自动为你执行一次格式化操作，非常方便哦！

{
   "editor.formatOnSave": true
}

3. 为括号加上颜色

在众多代码中，很容易让人看不清哪个括号对应是哪段代码，通过以下的配置，可为每个代码段的括号加上颜色，让你很容易就能分辨出来

{
    "editor.bracketPairColorization.enabled": true
}

4. 预览 Flutter UI 指南

打开此配置后，可以看到不同层次 widget 之前的连接线，让人一眼就能看到其主次关系

打开后的效果：

5. 在滚动中固定类名和方法名

打开此配置后，在屏幕的滚动中，都可以将当前类名或者方法名固定显示在最上面，这对于一个有很多代码的类或者方法来说，很方便进行查看，不会看到下面后都忘记自己在看的是哪个方法或者类了

{
    "editor.stickyScroll.enabled": true,
}

打开后的效果：

6. 对于自动生成的关联文件自动折叠

如果你有很多代码自动生成的实体类文件(主要是一些 .g.dart 或者 freezed.dart 的文件），就会感觉很乱，可以通过以下配置将这些文件与主文件折叠显示

"explorer.fileNesting.patterns": {
      "*.dart": "${capture}.g.dart, ${capture}.freezed.dart"
  },
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,

打开后的效果：

总结

希望以上的介绍能给你在 Flutter 的开发中带来帮助！其实 VSCode 真是一个功能强大的开发工具，其强大不只是自身对代码的处理，还有就是有丰富的扩展和不断完善的功能，因此强烈建议使用 VSCode 进行 Flutter 的开发。

更多精彩文章，请关注我，或者到我的博客网站：

代码部落中文站

代码部落英文站