vscode原生不支持项目级模板,需依赖插件(如vscode-templates)或自定义脚本实现目录结构生成;user snippets仅适用于单文件代码块,无法创建完整项目结构。

VSCode 本身不支持项目级模板,必须靠插件或脚本
VSCode 原生没有“新建项目 → 选模板 → 生成完整目录结构”的能力。所谓“项目模板”,本质是复制一个已有目录(比如 my-vue-boilerplate),再重命名、替换变量、打开新文件夹。想跳过手动 cp -r 或 mkdir,就得借助外部工具。
常见错误现象:装了 File Templates 插件后发现只能建单个文件,根本选不到“创建带 src/ 和 package.json 的整个文件夹”——这不是插件坏了,是它压根没这功能。
-
vscode-templates是目前最接近“项目模板”的选择:注册本地样板路径,新建时一键克隆,支持变量替换(如${projectName}) -
Project Manager适合已有多个固定结构项目的人;它不生成新项目,但配合 shell 脚本能绕过 UI:写个new-vue.sh脚本,cp -r ./templates/vue3 ./my-app && cd my-app,再绑定到 VSCode 快捷键 - 别指望
User Snippets做项目级事——它只管单个文件内部的代码块,和目录结构无关
用 vscode-templates 注册并复用目录模板
这个插件把“复制文件夹”这件事封装成菜单操作,比写脚本门槛低,也比手动拖拽可靠。
使用场景:你有 3 个常用起手式——纯 TS 库、Vue3 组件库、Next.js 页面应用,每个都配好 tsconfig.json、eslint.config.js 和基础目录,只需点几下就能复用。
- 先建好样板目录,比如
~/templates/vue3-minimal,里面含src/、package.json、vite.config.ts - 安装
vscode-templates后,按Ctrl+Shift+P输入Templates: Add Template,选中该目录 - 新建时右键空白处 →
Templates: Create from Template→ 选vue3-minimal→ 填目标路径,自动复制并重命名 - 注意:模板内若含硬编码路径(如
../shared/utils),复制后需手动检查;建议样板里全用相对路径或留占位符如__PROJECT_NAME__,再配合插件的变量替换功能
自定义脚本 + VSCode tasks.json 实现精准控制
当模板需要动态生成内容(比如根据当前日期写版本号、读取 git 用户名填作者)、或要执行 npm install、git init 时,脚本比插件更灵活。
参数差异:插件调用的是静态复制,脚本可以跑任意命令、读环境变量、做条件判断。
- 写个
create-project.sh(macOS/Linux)或create-project.ps1(Windows),开头加#!/bin/bash或#requires -Version 5.1 - 在项目根目录的
.vscode/tasks.json里定义任务:"type": "shell","command": "./scripts/create-project.sh",传参用"args": ["${input:projectName}"] - 在
tasks.json同级加inputs段,让用户输入项目名,避免脚本里写死 - 容易踩的坑:脚本路径权限(Linux/macOS 需
chmod +x)、PowerShell 执行策略(Windows 默认禁止运行本地脚本)、VSCode 终端默认 shell 不一致(可能 bash 里能跑,pwsh 里报错)
Vue 项目别只盯着文件模板,先确认语言模式和插件
很多人卡在“输入 vue 没反应”,其实问题不在模板配置,而在 VSCode 没识别出这是 Vue 文件。
常见错误现象:新建 MyComponent.vue,内容全是白底黑字,没有语法高亮,prefix 也不触发——说明语言模式没设对。
- 右下角状态栏点击当前语言标识(可能是
Plain Text),选Vue;或者按Ctrl+K M,输入vue回车 - 确保已安装
Volar(Vue3 推荐)或Vetur(Vue2 兼容),且未被禁用;vue.json片段只在语言模式为Vue时生效 - 如果用了工作区设置,检查
.vscode/settings.json是否有"files.associations": {"*.vue": "html"}这类错误映射——它会把 Vue 文件当成 HTML,导致片段失效 - 模板内容里写
<script setup></script>却用export default语法?那是 Vue2/Vue3 混用,Volar 会直接忽略整个<script></script>块的提示
真正麻烦的不是怎么写模板,而是模板生效前那几步验证:语言模式对不对、插件启没启用、文件后缀有没有被错误关联。这些细节漏掉一个,后面所有配置都白搭。











