VUE开发——快速键入VUE组件模板（eslint：0 error, 0 warnings）

前言

参考VScode官网的Snippet，截图如下:

一、创建VScode Snippet

1、打开文件 => 首选项 => 用户片段，调出命令面板，输入vue.json，回车，进入到vue.json文件：


2、复制如下代码到vue.json文件中（覆盖），保存退出。

{
  "Init Vue File": {
    "prefix": "vue",
    "body": [
      "/**",
      " * Copyright © $CURRENT_YEAR Fonchar. All rights reserved.",
      " *",
      " * @another: Fonchar",
      " * @date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " */",
      "",
      "<template>",
      " <div>",
      "   <h1>{{ msg }}$1</h1>",
      " </div>",
      "</template>",
      "",
      "<script>",
      "",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  data () {",
      "    return {",
      "      msg: '$TM_FILENAME'",
      "    }",
      "  },",
      "  //  生命周期 - 创建完成（访问当前this实例）",
      "  created () {",
      "    this.init()",
      "  },",
      "  //  生命周期 - 挂载完成（访问DOM元素）",
      "  mounted () {",
      "",
      "  },",
      "  methods: {",
      "    init () {",
      "      console.log(this.msg)",
      "    }",
      "  }",
      "}",
      "",
      "</script>",
      "",
      "<style scoped>",
      "/* @import url(); 引入css类 */",
      "",
      "</style>",
      "",
    ],
    "description": "Init Vue File"
  }
}

二、使用代码片段

1、新建xx.vue文件；
2、输入vue，回车/Tab。

效果

[eslint：0 error, 0 warnings]