VScode 新建vue文件 生成自定义模版并添加注释

在新建文件时, 输入vue直接生成了默认的模版, 那么可不可以生成自定模板呢, 在模板中添加一些自己想要的内容, 比如注释, 作者, 生成时间等, 答案当然是可以的.

1, VSCode: ctrl + Shift + P 输入 Snippets, 选择Snippets

截屏2022-10-11 11.16.23.png

2, 输入vue, 选择vue.json文件

截屏2022-10-11 11.18.17.png

3, 在vue.json文件输入内容, 这里是定义了一个快捷语, 下面还有定义多个的

 {
    "vue": {
        "prefix": "vue",
        "body": [
            "<!--",
            "*@description $1",
            "*@fileName $TM_FILENAME",
            "*@author yao",
            "*@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
            "!-->",
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
            "export default {",
            "  // 组件传参",
            "  props: {",
            "",
            "  },",
            "",
            "  data () {",
            "    return {",
            "",
            "    }",
            "  },",
            "",
            "  // 组件注册",
            "  components: {",
            "",
            "  },",
            "",
            "  // 数据监听",
            "  watch: {",
            "",
            "  },",
            "",
            "  // 计算属性",
            "  compute: {",
            "",
            "  },",
            "",
            "  mounted () {",
            "",
            "  },",
            "",
            "  // 方法实现",
            "  methods: {",
            "",
            "  },",
            "}",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "",
            "</style>",
            "",
        ],
        "description": "vue初始化页面"
    }
}

4, vue.json 语法释义

在vue.json中可以定义多个快捷语法,快捷语法的key一般和prefix名字相同, 定义每个快捷语法包含三个部分: prefix, body, description

• prefix 表示调用模版时输入的名字
• body 表示快捷语法的具体内容
• description 表示快捷语法的描述, 是用来做什么的, 可以根据含义来写

编写body内容时语法示意

"": 表示一个空行, 双引号中的内容会原版的显示出来, 如果有缩进, 就要在双引号中打出来, 每个双引号后面都要以","结尾.

5, 在vue.json中定义多个快捷语法

 {
    "vue": {
        "prefix": "vue",
        "body": [
            "<!--",
            "*@description $1",
            "*@fileName $TM_FILENAME",
            "*@author yao",
            "*@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
            "!-->",
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
            "export default {",
            "  // 组件传参",
            "  props: {",
            "",
            "  },",
            "",
            "  data () {",
            "    return {",
            "",
            "    }",
            "  },",
            "",
            "  // 组件注册",
            "  components: {",
            "",
            "  },",
            "",
            "  // 数据监听",
            "  watch: {",
            "",
            "  },",
            "",
            "  // 计算属性",
            "  compute: {",
            "",
            "  },",
            "",
            "  mounted () {",
            "",
            "  },",
            "",
            "  // 方法实现",
            "  methods: {",
            "",
            "  },",
            "}",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "",
            "</style>",
            "",
        ],
        "description": "vue初始化页面"
    },
    "///": {
        "prefix": "///",
        "body": [
            "<!--",
            "*@description $1",
            "*@params",
            "*@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
            "!-->",
        ],
        "description": "快捷生成注释模版"
    },
}