VSCODE自定义vue代码模板，自定义注释片段（动态时间）

一、打开vscode，点击左下角设置图标。

二、点击用户代码片段

 三、点击新建全局代码片段文件

 四、输入自定义代码片段配置文件名，例如:vue.json

 五、进行代码片段配置示例如下

 {

"vue-template": {//模板名称

        "prefix": "vue",//触发条件

        "body": [//内容

                        "<!--",

                        "* @description  ${1:参数1}",

                        "* @fileName  ${TM_FILENAME_BASE}",

                        "* @author userName",

                        "* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",

                        "!-->",

                        "<template>",

                        "  <div id='${TM_FILENAME_BASE}'",

                        "\t\t\t class='${TM_FILENAME_BASE}'>",

                        "  </div>",

                        "</template>",

                        "",

                        "<script>",

                        "export default {",

                        "  props: { // 父辈向子辈传参",

                        "  },",

                        "  name: '${TM_FILENAME_BASE}',",

                        "  data () {",

                        "    return {",

                        "",

                        "    }",

                        "  },",

                        "  created () { // 实例被创建之后执行代码",

                        "",

                        "\t},",

                        "  computed: { // 计算属性",

                        "",

                        "\t},",

                        "  components: { // 组件的引用",

                        "",

                        "\t},",

                        "  methods: { // 方法",

                        "",

                        "\t},",

                        "  mounted () { // 页面进入时加载内容",

                        "",

                        "\t},",

                        "  watch: { // 监测变化",

                        "",

                        "\t}",

                        "}",

                        "</script>",

                        "<style scoped lang='scss'>",

                        "</style>"

        ],

        "description": "vue代码片段" //描述

}

}

至此自定义代码段配置完毕，以本文为例输入vue按Tab补全就会出现自定义的代码。

配置项详解

附自定义注释配置(动态时间)

跟上面的步骤一样，重新建一个json

{
  "Print to js method": {
    "prefix": "zhushi",
    "body": [
      "/*",
      " *@Author: 作者名",
      " *@Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@Description: $0",
      "*/"
    ],
    "description": "A function comment"
  }
}