vscode设置vue模板_vscode怎么创建vue项目

全栈程序员-站长 • 2025年9月25日下午2:01 • 未分类 • 阅读 6

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

今天偶然间被朋友问到：你的 VSCode 配置代码片段了没有？

我？啥代码片段？是 Vue 的快捷模板代码么？

因为公司是内网开发环境，许多 VSCode 好用的插件下不了，

所以就得自己进行一下配置了，当然这个问题下载几个插件也可解决：

Vetur

vscode设置vue模板_vscode怎么创建vue项目

Vue 3 Snippets

vscode设置vue模板_vscode怎么创建vue项目

Vue VSCode Snippets

vscode设置vue模板_vscode怎么创建vue项目

OK ，那既然这样的话，有需求，咱们就开整：

前端行业使用的编辑器有很多，比如 VSCode 和 webStorm ，其中在创建 vue 文件后webStorm 可以自动生成相关的代码，而在 VSCode 中得一个一个的敲，这样既浪费时间又效率低，因此，在 VSCode 中可以一键生成 vue 模板吗？当然可以，过程如下：

1、打开 VSCode 编辑器

2、左上角文件(F) => 首选项 => 用户片段

3、在出现的框中输入 vue 之后按回车键

4、在出现的 vue.json 文件内写入以下代码
{
  "vb": {
    "prefix": "vb",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "  data() {",
      "    return {",
      "    };",
      "  },",
      "  computed:{",
      "  },",
      "  watch:{",
      "  },",
      "  methods: {},",
      "};",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "vb components"
  }
}
复制上面的代码，在相应的 vue 文件中输入 vb 之后回车，就会生成 vue 模板

效果如下图所示：