VSCode开发Flutter自定义模板

习惯用VSCode开发Flutter，有时在工程中自己会定义一些Base类，有很多子类需要继承它，每次手动敲会比较麻烦，于是自己设置了一个模板，类似Awesome Flutter Snippets插件，可以快速创建模板代码，这边演示一下Mac版的VSCode创建模板步骤。

1、按下Command+P，输入>snippets，选择"首选项：配置用户代码片段"

snippets

2、这里我们点击dart.json

dart.json

3、然后就会显示出编辑区域，会有一些提示

{
    // Place your snippets for dart here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

4、例子中的翻译如下
Print to console - 模板的名称(唯一)
prefix - 快捷生成的输入内容
body - 模板内容
description - 模板描述

5、这里我们尝试定义两个模板，Test1和Test2，注意一些关键字：

${数字:名称}

所有数字相同的参数，在创建初期可以同步修改

\t

空格

{
    "Test1": {
        "prefix": "test1",
        "body": [
            "class ${1:ClassName}_class1 {",
            "",
                "\t${1:ClassName}Fun() {",
                    "\t\tprint('${1:ClassName}');",
                "\t}",
            "}",
        ],
        "description": "测试1"
    },
    "Test2": {
        "prefix": "test2",
        "body": [
            "class ${1:ClassName}_class2 {",
            "",
                "\t${1:ClassName}Fun() {",
                    "\t\tprint('${1:ClassName}');",
                "\t}",
            "}",
        ],
        "description": "测试2"
    }
}

6、然后新建一个dart文件，输入test1或test2，可以看到右侧的提醒信息已经有了

image.png

7、直接回车，刚才定义的代码直接显示了，并且所有相同数字的参数都默认选中，可以同时修改

image.png