VScode用户代码片段，快速生成vue片段

1.首先打开vscode, 文件-首选项-用户代码片段，

1111111.jpg

2.此时可以选择一个已有的vue.json进行修改， 或者输入别的名字新建

222222222.jpg

3.打开后把原有的代码注释

3333333333.jpg

3、输入以下代码：当你输入vue的时候，可以快速生成代码片段
备注：配置没有生效重启软件 "prefix": "vue4", 为输入名称

4 代码片段模版

{ 
  "Print to console": {
  "prefix": "vue4",
  "body": [
  "<!--",
  "  作者：yanggang",
  "  邮箱：1141950132@qq.com",
  "  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
  "  版本：v1.0",
  "  修改记录：",
  "  修改内容：",
  "  修改人员：",
  "  修改时间：",
  "-->",
  "<template>",
  "  <div>\n",
  "  </div>",
  "</template>\n",
  "",
  "<script>",
  "export default {",
  "  props: {},",
  "  components: {},",
  "  data () {",
  "    return {}",
  "  },",
  "  computed: {},",
  "  watch: {},",
  "  methods: {},",
  "  // 以下是生命周期钩子   注：没用到的钩子请自行删除",
  "  beforeCreate () {",
  "  },",
  "  /**",
  "  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在",
  "  */",
  "  created () {",
  "  },",
  "  /**",
  "  * 在挂载开始之前被调用：相关的 render 函数首次被调用。",
  "  */",
  "  beforeMount () {",
  "  },",
  "  mounted () {",
  "  },",
  "  beforeUpdate () {",
  "  },",
  "  updated () {",
  "  },",
  "  /**",
  "  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效",
  "  */",
  "  activated () {",
  "  },",
  "  /**",
  "  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效",
  "  */",
  "  deactivated () {",
  "  },",
  "  /**",
  "  * 实例销毁之前调用。在这一步，实例仍然完全可用。",
  "  */",
  "  beforeDestroy () {",
  "  },",
  "  destroyed () {",
  "  }",
  "}",
  "</script> ",
  "",
  "<style scoped lang=\"${1:less}\">\n",
  "",
  "</style>",
  "$2"
         ],
  "description": "Log output to console"
     }
 }

5.测试：新建vue页面，输入vue显示如下

1629268835(1).png