vsCode与Hubilder中自定义代码块

平常测试vue的一些属性时总要新增代码，引入文件，麻烦，顾自定义代码块来实现快速新增测试

一、打开设置

　　1.1 vsCode设置

　　点击后选择代码块所属的文件类型，比如在html中则选择html类型配置，在js中选择js类型配置，在html后缀名文件中的js代码块在js类型配置

　　1.2 Hubilder 设置

　　点击后选择代码块所属的文件类型，比如在html中则选择html类型配置，在js中选择js类型配置，在html后缀名文件中的js代码块在js类型配置

2.配置说明


　　"html-vue": {

        "prefix": "htmlvue",

        "body": [

            "<!DOCTYPE html>",

            "<html lang=\"zh-CN\">\n",

            "<head>",

            "\t<meta charset=\"UTF-8\">",

            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",

            "\t<title>Document</title>",

            "\t<script src=\"https://cdn.jsdelivr.net/npm/vue@2.6.0\"></script>",

            "</head>\n",

            "<body>",

            "\t<div id=\"app\">$1</div>\n",

            "\t<script>",

            "\t\tvar vm = new Vue({",

            "\t\t\tel: '#app',",

            "\t\t\tdata: {$0},",

            "\t\t\tmethods: {}",

            "\t\t});",

            "\t</script>",

            "</body>\n",

            "</html>"

        ],

        "description": "html vue"

    },

　　key ：代码块显示名称，显示在代码助手列表中的名字。key是不能重复的。

　　　　上面例子中"html-vue"就是一个key。

　　prefix：代码块的触发字符，就是敲什么字母可以激活这个代码块。

　　body:代码块的内容。内容中有如下特殊格式

　　　　双引号使用\"转义
　　　　换行使用多个数组表示，每个行一个数组，用双引号包围，并用逗号分隔
　　　　缩进需要用\t表示，不能直接输入缩进或空格！

　　triggerAssist ：为`true`表示该代码块输入到文档后立即在第一个`tabstop`上触发代码提示，拉出代码助手，默认为`false`。

　　vsCode与Hubilder中的配置情况基本一致，有一个地方是差别的，差别如下：

　　Hubilder中输入html时提示列表显示的"html-vue",展示的是配置中的key,

　　vsCode中输入html时提示列表显示的"htmlvue",展示的是配置中的prefix,

　　因此建议在key和prefix的值设置为一样的，这样vscode和Hubilder完全一样

　　占位符 $

　　$ 后面紧跟数字可指定代码片段触发落入编辑器之后的光标位置，光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中（$1 的位置），如果此时没有手动移动光标位置，再次按 TAB 则光标会落到 console.log() 的第二行（ $2 的位置），当然，你也可以设置 $3、$4 ... 等等。需要特别注意的是 $0 用于设置最终光标的位置，设置了 $0 之后，再往后设置其他占位符则不会生效， $0 终止了 TAB键 的光标跳转操作或者初始光标。

　　占位内容的可选项

"zs-Function": {

    "prefix": "zs-Function",

    "body": [

      "/**",

      " * @param name... { ${1|Boolean,Number,String,Object,Array|} }",

      " * @description description...",

      " * @return name... { ${2|Boolean,Number,String,Object,Array|} }",

      " */",

      "$0"

    ],

    "description": "添加方法注释"

  }

　　上面是一个简单的方法注释代码块，占位符默认不带可选项，如果要设置占位内容的可选项，写法为 ${1|a,b,c}，括号中的 1 对应的是按 TAB 之后的光标落点顺序， abc 为可选的项，用逗号隔开。所以上面的代码在输入 zs + TAB 后第一个光标会落在 param name... {} 的大括号中（$1 的位置），如下图可以看到设置的可选项。

　　选择了参数类型之后，再次按 TAB , 光标会自动落到返回参数类型处（$2 的位置）并弹出可选项。如下所示：

　　选择了第二个选项之后，再次按 TAB ,光标自动落到我们配置的 $0 处，也就是 */ 的下一行：

需要注意的是：

如果可选择内容只有一个值的话可以写成 ${1:default} 的格式。
占位内容支持嵌套，比如 ${1:another ${2:placeholder}}。

　　变量：使用 `$name` 或者 `${name:default}` 可以插入变量的值。如果未设置变量，则会插入其默认值或空字符串。当变量未知（未定义其名称）时，会将插入的变量名称转换为占位符。

1）文档相关：

变量	变量含义
`TM_SELECTED_TEXT`	当前选定的文本或空字符串
`TM_CURRENT_LINE`	当前行的内容
`TM_CURRENT_WORD`	光标下的单词内容或空字符串
`TM_LINE_INDEX`	基于零索引的行号
`TM_LINE_NUMBER`	基于单索引的行号
`TM_FILENAME`	当前文档的文件名
`TM_FILENAME_BASE`	当前文档没有扩展名的文件名
`TM_DIRECTORY`	当前文档的目录
`TM_FILEPATH`	当前文档的完整文件路径
`CLIPBOARD`	剪贴板的内容
`WORKSPACE_NAME`	已打开的工作空间或文件夹的名称

2）当前日期和时间：

变量	变量含义
`CURRENT_YEAR`	当前年份
`CURRENT_YEAR_SHORT`	当前年份的最后两位数
`CURRENT_MONTH`	月份为两位数（例如'02'）
`CURRENT_MONTH_NAME`	月份的全名（例如'June'）（中文语言对应六月）
`CURRENT_MONTH_NAME_SHORT`	月份的简称（例如'Jun'）（中文语言对应是6月）
`CURRENT_DATE`	这个月的哪一天
`CURRENT_DAY_NAME`	当天是星期几（例如'星期一'）
`CURRENT_DAY_NAME_SHORT`	当天是星期几的简称（例如'Mon'）（中文对应周一）
`CURRENT_HOUR`	24小时时钟格式的当前小时
`CURRENT_MINUTE`	当前分
`CURRENT_SECOND`	当前秒

3）要插入行或块注释，请遵循当前语言：

变量	变量含义
`BLOCK_COMMENT_START`	输出：PHP /*或HTML格式<!--
`BLOCK_COMMENT_END`	输出：PHP */或HTML格式-->
`LINE_COMMENT`	输出：PHP //或HTML格式

案例：

下面的代码块是常用的文件顶部添加作者和时间的块注释，其中用到了年（CURRENT_YEAR）月（CURRENT_MONTH）日（$CURRENT_DATE）的系统变量。

"author-time": {

    "prefix": "author-time",

    "body": [

      "/**",

      " * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",

      " */",

      "$0"

    ],

    "description": "添加作者和时间注释"

  }

案例

下面的代码块是新建 .Vue 文件的模板代码块，其中用到了当前文档没有扩展名的文件名（TM_FILENAME_BASE），默认把文件名填入 name 和 class 中。

 "vue-template": {

    "prefix": "vue-template",

    "body": [

      "<template>",

      "  <section class=\"$TM_FILENAME_BASE\">",

      "    $1",

      "  </section>",

      "</template>\n",

      "<script>",

      "export default {",

      " name: '$TM_FILENAME_BASE',",

      "  data() {",

      "    return {\n",

      "    }",

      "  },",

      "  components: {},",

      "  watch: {},",

      "  mounted() {},",

      "  methods: {}",

      "}",

      "</script>\n",

      "<style scoped lang=\"less\">\n",

      "</style>",

      "$0"

    ],

    "description": "Vue模板"

  }

参考网站：https://juejin.im/post/5d0496415188257fff23b077