Flutter 入門與實戰(六十七):教你一個讓編碼速度飛起的方法!

島上碼農 發表於 2021-08-29
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 入門與實戰專欄原始碼

👍🏻:覺得有收穫請點個贊鼓勵一下!

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

💬:評論交流,互相進步!