阅读 554

Flutter 入门与实战(六十七):教你一个让编码速度飞起的方法!

这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战

前言

上一篇我们 对MobX状态管理插件做了整体的介绍,使用 MobX 之后,通过代码生成器能够节省我们很多编码工作量。本着能让电脑干的活就坚决不动手的原则,我们本篇介绍让电脑创建 MobX 无法生成的代码。这要感谢 VSCode 提供的自定义模板代码User Snippets 功能。

VSCode 的模板代码

VSCode 本身集成了很多代码模板和模板扩展,例如 for 循环,然后我们平时经常用的StatelessWidgetStatefulWidget。实际上,模板代码就是一个配置的 json 字符串。

我们先看一下 StatefulWidget 的模板代码(需要安装 Awesome Flutter Snippets 扩展)。我们敲入 statefulW,回车确认的时候,就会自动插入对应的代码片段,然后光标定位到类名处,改类名的时候会把所有相关的name 都替换掉。 image.png 我们来看一下这段模板代码对应的 json 是什么样的。

"Stateful Widget": {
    "prefix": "statefulW",
    "body": [
        "class ${1:name} extends StatefulWidget {",
        "  ${1:name}({Key? key}) : super(key: key);\n",
        "  @override",
        "  _${1:WidgetName}State createState() => _${1:WidgetName}State();",
        "}\n",
        "class _${1:index}State extends State<${1:index}> {",
        "  @override",
        "  Widget build(BuildContext context) {",
        "    return Container(",
        "       child: ${2:null},",
        "    );",
        "  }",
        "}"
    ],
    "description": "Create a Stateful widget"
},
复制代码

其中${1:name}代表第1个变量,指定的占位符是 name,定义完之后,后面再出现${1:xxx}时都会引用该变量。后面的${2:null}也是一样。具体的语法遵循 TextMate 1.x 规范:模板代码的语法定义。然后对于多个变量可以指定最后光标落在哪个变量的位置,在变量定义后面加上$0即可。同时,语法也支持正则替换,例如将变量2第一个字母转为大写可以这么写:

${2/./\u$0/}
复制代码

自定义MobX 的状态代码模板

我们先分析一下MobX 的状态代码。

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}
复制代码

一共分为如下几个部分:

  • 导入 mobx 插件:这个可以固定语句即可。
  • 声明part:这里需要引用文件名,VSCode 提供了TM_FILENAMETM_FILENAME_BASE变量,其中TM_FILENAME是完整的文件名,TM_FILENAME_BASE不带后缀。这里我们可以使用不带后缀的文件名变量,然后加上.g.dart 即可。
  • Observable 状态类定义:这里我们可以使用变量来替换,然后光标定位到这个类名变量处,方便批量修改,即使用${1:name}$0形式。
  • @observable状态属性(包括初始值)和@action 动作方法。这里我们使用其他变量即可。

接下来就是依葫芦画瓢了,整个过程如下动图所示。

  • 菜单入口:Code->Preferences->User Snippets;
  • New Snippets:新建一个模板代码,输入名称后回车即可创建;
  • 输入模板 json 串:支持一个模板中放置多个模板代码块,使用不同的键区分即可,然后保存。
  • 在代码编辑窗口输入 json 串中的 prefix 字段指定的代码快捷前缀,选择或回车接口插入模板代码。
  • 修改模板代码中的变量即可完成最终代码。

创建模板代码过程

最终的模板代码片段如下:

{
	"Build Mobx Observables" : {
		"prefix": "build mobx",
		"scope": "dart",
		"body": [
			"import 'package:mobx/mobx.dart';\n",
			"part '${TM_FILENAME_BASE}.g.dart';\n",
			"class ${1:name}$0 = $1Base with _$$1;\n",
			"abstract class $1Base with Store {",
			"  @observable",
			"  ${2:type} ${3:property} = ${4:initial};\n",
			"  @action",
			"  void ${5:actionname}() {\n",
			"  }",
			"}",
		]
	}
}
复制代码

可以看到,有了模板代码后,我们的 MobX 的状态代码只需要更改变量,完成业务代码即可,而无需再手动复制粘贴那同类代码了。

总结

本篇介绍了使用 VSCode 的自定义代码模板功能,通过模板代码快速完成 MobX 的状态管理代码,从而减少代码量,提高编码效率。实际开发过程中,还可以自定义常用的其他代码块,还是那句话,当一段代码重复2次以上的时候,我们就需要考虑怎么提高复用率了——模板代码显然也是提高复用率的一个好手段。


我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,对应源码请看这里:Flutter 入门与实战专栏源码

👍🏻:觉得有收获请点个赞鼓励一下!

🌟:收藏文章,方便回看哦!

💬:评论交流,互相进步!

文章分类
Android