likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 13

前言

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

一、插件

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

插件说明
FlutterFlutter基础依赖，你必须拥有。
Flutter Color直接看到代码中的颜色，多的不说，你值得拥有。
DartDart语言基础依赖，你必须拥有。
Dart (Syntax Highlighting Only)看名字就知道，语法必须突出，你值得拥有。
dart-import从名字可以得出，你是懂头文件导入的，值得拥有。
Dart Data Class Generator通过属性可以直接生成一些方法，比如构造器，类型转换啥的。快速JsonToModel。
Awesome Flutter Snippets常见代码片段基本都有了，可以帮你快速创建组件，必须拥有。
Flutter GetX Generator - 猫哥GetX你不会不知道吧，它可以帮你快速创建GetX相关的页面。此外，它可以创建项目的目录结构，用来作为开发规范。最方便的是直接通过3倍图生成2倍和1倍图，并且将图片名生成对应的静态方法。5⭐️好评！
GetX SnippetsGetX伴侣，不得不爱！
FlutterComments谁写代码还加注释啊？
Material Icon Theme文件得有个小图标吧，就像程序员得有个格子衫吧。
Dracula Official主题有很多，但我偏爱Dracula。
GitHub CopilotAI辅助编程，真香警告！你只管写注释，剩下的交给它。Github说它收费，淘宝说价格它打下来了！
GitHub Copilot ChatAI辅助编程，再加上基于openai聊天功能（只能聊编程话题）。
GitHub Copilot NightlyAI辅助编程，搭配GitHub Copilot Chat使用。
CodeiumAI辅助编程，个人用户免费，你确定不试试？

插件安装比较简单，直接点击插件超链或者去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,
// 启用括号对参考线
"editor.guides.bracketPairs": true,

这里是全局配置，并不会区分语言。如果我们只想单独处理某种语言，如何配置，这里以Dart为例：

// dart保存时自动处理
"[dart]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": true,
        "source.fixAll": true,
    }
},
"dartImport.fixOnSave": true,
"editor.guides.bracketPairs": 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
转载自:https://juejin.cn/post/7236634151993475129
评论
请登录