VSCode 如何预定义vue文件

Question

不想每次在VSCode里创建Vue文件时都要再手写一遍基本的vue元素，就在想VSCode可不可预定义，类似下面这种：

---

<template>

<div id="id">
</div>

</template>

<script>
export default {

name: 'id',
data() {
    return {

    }
},
methods: {
    
}

}
</script>

Answer 1

先安装 Vetur 扩展 让 VSCode 支持 .vue 的扩展名
然后 菜单栏 - Code - 首选项 - 用户代码片段 选择 vue

编辑 vue.json

{
  "Vue Init": {
    "prefix": "vue",
    "description": "初始化Vue单文件组件模版",
    "body": [
      "<template lang=\"pug\">",
      "$1",
      "</template>",
      "<script>",
      "export default {",
      "  name: '$2',",
      "}",
      "</script>",
      "<style lang=\"stylus\" scoped>",
      "$3",
      "</style>",
      ""
    ]
  }
}

效果截图

Answer 2

可以，而且你还问对人了，我最近也是烦老是需要写一些重复的东西，vscode的snippets自定义还是很好用的。把下面代码放进你自己的snippets里面，

"Vue All Component": {
        "prefix": "vall",
        "body": [
            "<template>",
            "\t<div>",
            "",
            "\t</div>",
            "</template>",
            "",
            "<script>",
            "\texport default {",
            "\t\t${0}",
            "\t}",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "Base content's for Vue File"
    }

然后下次使用vall就能看到代码片段了

Answer 3

安装插件 Vetur

Answer 4

提供另外一种方法
你可以首先定义好模板, 然后写一个node的脚本, 创建文件写入模板就好了, 还可以自定义文件名, 美滋滋