利用 VSCode 的代码模板提高 MobX 的编码效率

前言

上一篇我们 对

MobX

状态管理插件做了整体的介绍，使用 

MobX

 之后，通过代码生成器能够节省我们很多编码工作量。本着

能让电脑干的活就坚决不动手

的原则，我们本篇介绍让电脑创建 

MobX

 无法生成的代码。这要感谢 VSCode 提供的自定义模板代码

User Snippets

 功能。

VSCode 的模板代码

VSCode 本身集成了很多代码模板和模板扩展，例如 

for

 循环，然后我们平时经常用的

StatelessWidget

 和 

StatefulWidget

。实际上，模板代码就是一个配置的 

json

 字符串。

我们先看一下 

StatefulWidget

 的模板代码（需要安装 

Awesome Flutter Snippets 

扩展）。我们敲入 

statefulW

，回车确认的时候，就会自动插入对应的代码片段，然后光标定位到类名处，改类名的时候会把所有相关的

name

 都替换掉。

我们来看一下这段模板代码对应的 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",
 &quot;class _${1:index}State extends State<${1:index}> {&quot;,
 &quot; @override&quot;,
 &quot; Widget build(BuildContext context) {&quot;,
 &quot; return Container(&quot;,
 &quot; child: ${2:null},&quot;,
 &quot; );&quot;,
 &quot; }&quot;,
 &quot;}&quot;
 ],
 &quot;description&quot;: &quot;Create a Stateful widget&quot;
},


其中

${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_FILENAME
  和
  TM_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次

以上的时候，我们就需要考虑怎么提高复用率了——模板代码显然也是提高复用率的一个好手段。