如何在Visual Studio Code中为.vue文件配置自动生成模板？

当然可以！VS Code有两种方式能满足你的需求——原生代码片段快速插入，或者用扩展实现创建文件时自动填充模板，下面一步步给你讲清楚：

方法一：原生用户代码片段（无需扩展，快速触发） #

这种方法是给Vue文件创建专属代码片段，新建.vue文件后只需输入触发词就能一键插入模板：

1. 打开代码片段配置面板
   按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）唤起命令面板，输入snippets后选择Configure User Snippets。
2. 选择Vue文件的配置项
   在弹出的列表里选vue.json；如果没有这个选项，就选New Global Snippets file...，命名为vue.json即可。
3. 写入预设模板代码
   把vue.json里的默认内容替换成以下代码：

   {
     "基础Vue组件模板": {
       "prefix": "vue-base",
       "body": [
         "<template>",
         "  <div>",
         "  </div>",
         "</template>",
         "",
         "<script>",
         "export default {",
         "  data() {",
         "    return {",
         "    }",
         "  },",
         "  methods: {",
         "  },",
         "  created() {",
         "  }",
         "}",
         "</script>",
         "",
         "<style scoped>",
         "</style>"
       ],
       "description": "包含data、methods、created钩子的基础Vue组件模板"
     }
   }
   

   之后新建.vue文件，输入vue-base再按Tab键，就能自动插入你需要的模板了。

方法二：用扩展实现创建文件自动填充（无需手动触发） #

如果你想要新建.vue文件时直接自动生成模板，可以用File Templates扩展：

1. 安装扩展
   在VS Code扩展商店搜索File Templates并完成安装。
2. 创建Vue专属模板
   点击左侧扩展图标找到File Templates，选择New Template，命名为Vue基础组件，把你的预设模板粘贴进去，设置模板对应的文件扩展名为.vue。
3. 配置自动关联
   在扩展设置里开启“创建.vue文件时自动使用该模板”，之后每次新建.vue文件，模板就会自动填充到文件里了。

另外，如果你已经在用Vue官方的Vetur扩展，它本身也自带了大量Vue代码片段，你可以通过配置让它在创建文件时自动插入基础模板，或者用它的触发词快速调用模板。

内容的提问来源于stack exchange，提问作者margherita pizza