VSCode高效Flutter开发必备快捷键

视频

https://youtu.be/BoTDOcycXx0

https://www.bilibili.com/video/BV1hE421P7QK/

前言

原文 https://ducafecat.com/blog/essential-vscode-shortcuts-for-flutter-development

本文为您总结了在VSCode中开发Flutter项目时最常用和高效的快捷键操作,涵盖代码修复提示、文件管理、命令工具等多个方面,帮助开发者大幅提升开发效率。

VSCode,Flutter,快捷键,开发效率

参考

• https://docs.flutter.dev/tools/vs-code
• https://code.visualstudio.com/docs/getstarted/tips-and-tricks
• https://code.visualstudio.com/docs/getstarted/keybindings

快捷键

快速修复

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

在编辑器的任何地方使用此功能可获取上下文相关的代码操作列表。

您可以使用它来包装、提取、移除 Widget 等：

或者在需要时导入文件：

切换 StatefulWidget 与 StatelessWidget

显示命令面板

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

这将打开一个搜索框，您可以在其中查看所有最近使用的命令，并输入文字搜索新的命令：

通过名称搜索文件

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

这非常方便，无需离开键盘就可以打开项目中的任何文件：

添加依赖包

首先，打开命令面板并输入 "Dart: Add Dependency" 或者 "Dart: Add Dev Dependency":

它将显示 pub.dev 上可用的包的可搜索列表：

选择依赖后，它将被添加到您的 pubspec.yaml 文件中并自动安装。

查看代码

• MacOS: CMD+鼠标左键
• Windows: CTRL+鼠标左键

剪切行

• MacOS: CMD+x
• Windows: CTRL+x

移动行

• MacOS: ALT+↑ 或者 ALT+↓
• Windows: ALTL+↑ 或者 ALT+↓

注释

• MacOS: CMD+/
• Windows: CTRL+/

重写类、函数、对象名

键盘快捷键列表

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

VSCode 有大量快捷键。如果你想查看所有快捷键并自定义键位绑定，就用这个：

IDEA 按键插件

https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings

如果你平时还用 IDEA、 Android Studio 工具，可以装这个插件来统一按键习惯。

小结

VSCode作为Flutter开发的首选IDE,熟练掌握其各种快捷键操作对于提升开发效率至关重要。本文详细总结了在VSCode中开发Flutter项目时最常用和高效的快捷键,涉及修复提示、文件管理、命令工具等多个方面,力求帮助开发者建立更加高效的Flutter开发工作流。相信通过学习本文的内容,您一定能够大幅提升自己的Flutter开发速度和开发体验。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

---

flutter 学习路径

• Flutter 优秀插件推荐 https://flutter.ducafecat.com
• Flutter 基础篇1 - Dart 语言学习 https://ducafecat.com/course/dart-learn
• Flutter 基础篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn
• Flutter 实战1 - Getx Woo 电商APP https://ducafecat.com/course/flutter-woo
• Flutter 实战2 - 上架指南 Apple Store、Google Play https://ducafecat.com/course/flutter-upload-apple-google
• Flutter 基础篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat
• Flutter 实战3 - 腾讯即时通讯 第一篇 https://ducafecat.com/course/flutter-tim
• Flutter 实战4 - 腾讯即时通讯 第二篇 https://ducafecat.com/course/flutter-tim-s2

---

© 猫哥
ducafecat.com

end