前言

现在Flutter官方引荐的开发工具有Android Studio和VSCode。前者Google亲儿子，对Flutter集成的比较好，上手门槛低，简单装备一下即可开发，不过这玩意在占用系统资源时也是一点不客气，还有插件不够用啊。后者微软亲儿子，轻量且强大且灵活的开源代码编辑器，毫不夸张的说，那是适当能打啊。对于开发者来说，编辑器插件丰厚，交互友好，最重要的是要大大的提升开发功率。工欲善其事必先利其器，今日咱们主要讲一下作为优异且帅气且头发多的Flutter开发者，怎么装备VSCode。

一、插件

这儿只引荐一些常用插件，当然，你要愿意称它为必备插件，我也是没意见的。

插件 阐明
Flutter Flutter根底依靠，你必须具有。
Flutter Color 直接看到代码中的色彩，多的不说，你值得具有。
Dart Dart言语根底依靠，你必须具有。
Dart (Syntax Highlighting Only) 看姓名就知道，语法必须杰出，你值得具有。
dart-import 从姓名能够得出，你是懂头文件导入的，值得具有。
Dart Data Class Generator 经过特点能够直接生成一些办法，比方构造器，类型转换啥的。快速JsonToModel。
Awesome Flutter Snippets 常见代码片段基本都有了，能够帮你快速创立组件，必须具有。
Flutter GetX Generator – 猫哥 GetX你不会不知道吧，它能够帮你快速创立GetX相关的页面。此外，它能够创立项目的目录结构，用来作为开发规范。最便利的是直接经过3倍图生成2倍和1倍图，并且将图片名生成对应的静态办法。5⭐️好评！
FlutterComments 谁写代码还加注释啊？
Material Icon Theme 文件得有个小图标吧，就像程序员得有个格子衫吧。
Dracula Official 主题有很多，但我偏心Dracula。
GitHub Copilot AI辅佐编程，真香警告！你只管写注释，剩余的交给它。Github说它收费，淘宝说价格它打下来了！
GitHub Copilot Chat AI辅佐编程，再加上openai的谈天功能（只能聊编程论题）。现在只支撑VSCode_Insiders版。
GitHub Copilot Nightly AI辅佐编程，调配GitHub Copilot Chat使用。现在只支撑VSCode_Insiders版。
Codeium AI辅佐编程，个人用户免费，你确认不试试？

插件安装比较简单，直接点击插件超链或许去VSCode的插件商场搜索都行。注意某些插件需求独自装备，比方GitHub Copilot和Codeium需求登录相关账户。并且不同插件的触发方法也不同，有些插件在右键菜单，有些插件是快捷键，有些插件是输入关键字触发，一般在插件概况中都有阐明。

二、用户装备

1. 装备文件

有时分咱们希望编辑器帮我处理一些事，比方保存代码时它会主动格式化，还有Flutter中写组件时主动插入const等，咋整？这儿咱们只需求修正一下用户装备就好了。

VSCode中的装备文件是个json文件，咱们需求在该文件中加一些参数。what？你不知道这个文件在哪？主界面中经过快捷键Command + Shift + P，然后输入userjson，你看看这是啥？

Flutter在VSCode中如何提升开发效率

2. 代码主动格式化&修复

翻开装备文件后咱们在里面追加一些装备参数：

// 大局-保存时主动处理
"editor.codeActionsOnSave": {
  	// 头文件主动排序
    "source.organizeImports": true,
  	// 主动修复
    "source.fixAll": true,
},
// 大局-保存时主动格式化
"editor.formatOnSave": true,
// dart主动导入头文件
"dartImport.fixOnSave": true,

这儿是大局装备，并不会区分言语。假如咱们只想独自处理某种言语，怎么装备，这儿以Dart为例：

// dart保存时主动处理
"[dart]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": true,
        "source.fixAll": true,
    }
},
"dartImport.fixOnSave": true,
3. 文件折叠

工程中各种文件都有，某些时分咱们希望某一类文件能够折叠在一起，比方依靠装备及隐藏文件。按照常规，咱们需求在装备文件中追加一些装备参数：

// 文件折叠
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
    "pubspec.yaml": "pubspec.lock,pubspec_overrides.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,.metadata,analysis_options.yaml",
    "*.dart": "${capture}.g.dart"
},

这儿咱们能够看看依靠文件pubspec.yaml的改变：

Flutter在VSCode中如何提升开发效率

该文件左面有个箭头，点击时能够展开，作用类似目录，需求折叠哪些文件你在装备参数中修正就完了。

4. 同步装备

VSCode同步装备比较简单，点击左下角菜单，登录GitHub账户然后敞开主动同步即可。白日我在公司电脑上装备了啥，晚上我在家里电脑上就能看到啥装备。

Flutter在VSCode中如何提升开发效率

三、总结

想要进步开发功率，除了各种辅佐插件和小技巧，还有一个办法：牢记VSCode中的常用快捷键，并熟练运用！记住多学多看多思考还要多写，编程是个脑力活更是个体力活，不多写能人码合一？书读百遍其义自见，啥时分看到一个需求能做到心有成竹，写代码你还会功率低吗？听懂掌声

附：

  1. 快捷键速查表-MacOS
  2. 快捷键速查表-Windows