This is the 30th day of my participation in the August Challenge

preface

In the last article, we covered the MobX state management plug-in as a whole. Using MobX, code generators can save us a lot of coding effort. In keeping with the principle of never doing anything you can tell a computer to do, let’s get the computer to create code that MobX can’t. This is thanks to the User Snippets feature of custom template code from VSCode.

The template code for VSCode

VSCode itself integrates many code templates and template extensions, such as the for loop, and the statelesswidgets and statefulwidgets that we use all the time. In effect, the template code is just a configured JSON string.

So let’s take a lookStatefulWidgetTemplate code (needs to be installedAwesome Flutter Snippets Extension). We typestatefulWWhen you press Enter to confirm, the corresponding code snippet will be automatically inserted, and then the cursor is positioned at the class name. When you change the class name, all relevant code snippets will be changednameI’m going to replace all of them.Let’s take a look at what json looks like for this template code.

"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"
},
Copy the code

${1:name} = ${1:name} = ${1: XXX} = ${1: XXX} = ${1: XXX} = ${1: XXX} The same goes for ${2:null}. The specific syntax follows the TextMate 1.x specification: the syntax definition for template code. You can then specify where the cursor will end up for multiple variables by following the variable definition with $0. The syntax also supports regular substitutions, such as capitalizing the first letter of variable 2:

${2/./\u$0/}
Copy the code

Customize MobX status code templates

Let’s take a look at MobX’s status code.

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++; }}Copy the code

It is divided into the following parts:

  • The importmobxPlugins: This can fix statements.
  • Declare part: here you need to refer to the file name, which VSCode providesTM_FILENAMEandTM_FILENAME_BASEVariable, whereTM_FILENAMEIs the full file name,TM_FILENAME_BASENo suffix. Here we can use the filename variable without the suffix and add.g.dartCan.
  • ObservableState class definition: here we can use variable to replace, and then cursor to the class name variable, convenient batch modification, that is, use${1:name}$0Form.
  • @observableState attributes (including initial values) and@actionAction method. Let’s just use other variables here.

Then it’s time to follow suit, as you can see in the GIF below.

  • Menu entry: Code->Preferences->User Snippets;
  • New Snippets: Create a New template code, type the name and press Enter to create it.
  • Input template JSON string: Support to place multiple template code blocks in a template, use different keys to distinguish, and then save.
  • Enter the code shortcut prefix specified by the prefix field in the JSON string in the code edit window, and select or enter the interface to insert the template code.
  • Modify the variables in the template code to complete the final code.

The final template code snippet looks like this:

{
	"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"."}"."}",]}}Copy the code

As you can see, with the template code, our MobX status code only needs to change variables to complete the business code without having to manually copy and paste the same code.

conclusion

This article introduces the use of VSCode custom code template function, through the template code to quickly complete MobX state management code, thus reducing the amount of code, improve coding efficiency. In practice, other commonly used code blocks can be customized, but again, when a piece of code is repeated more than twice, we need to consider how to increase reuse rates — template code is obviously a good way to increase reuse rates.

This is a column about the entry and practice of Flutter. The corresponding source code is here: Entry and Practice of Flutter.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!