Flutter 入門與實戰（六十七）：教你一個讓編碼速度飛起的方法！

島上碼農發表於2021-08-29
Flutter

這是我參與8月更文挑戰的第30天，活動詳情檢視：8月更文挑戰

前言

上一篇我們 對MobX狀態管理外掛做了整體的介紹，使用 MobX 之後，通過程式碼生成器能夠節省我們很多編碼工作量。本著能讓電腦幹的活就堅決不動手的原則，我們本篇介紹讓電腦建立 MobX 無法生成的程式碼。這要感謝 VSCode 提供的自定義模板程式碼User Snippets 功能。

VSCode 的模板程式碼

VSCode 本身整合了很多程式碼模板和模板擴充套件，例如 for 迴圈，然後我們平時經常用的StatelessWidget 和 StatefulWidget。實際上，模板程式碼就是一個配置的 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_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次以上的時候，我們就需要考慮怎麼提高複用率了——模板程式碼顯然也是提高複用率的一個好手段。

我是島上碼農，微信公眾號同名，這是Flutter 入門與實戰的專欄文章，對應原始碼請看這裡：Flutter 入門與實戰專欄原始碼。

??：覺得有收穫請點個贊鼓勵一下！

?：收藏文章，方便回看哦！

?：評論交流，互相進步！

相關文章