File Templates 插件支持新建即填充模板，需配置工作区 .vscode/templates/ 下的 .tpl 文件，支持 $NAME$ 替换和 Emmet 缩写；Emmet 仅限已设语言模式的文件，无法注入项目约定内容；snippets 适用于已有文件的局部补全，工作区 snippets 更利于团队协作。
用 File Templates 插件新建带内容的 HTML/CSS/JS 文件
VSCode 原生不支持“新建文件即填充模板”，但 File Templates 插件能直接解决这个痛点。它不依赖代码片段触发，而是从「新建动作」本身切入——右键菜单里多出 Create File from Template 选项，选完模板就生成带默认内容的文件。
安装后需手动配置模板目录（如 .vscode/templates），每个模板是纯文本文件：html.tpl、vue3.tpl、component.css.tpl。模板内可写任意内容，包括 Emmet 缩写（如 !+div.container），保存后会被自动展开。
- 路径必须是工作区根目录下的
.vscode/templates/，插件不读用户级或全局路径 -
.tpl后缀不能省，否则插件识别为普通文件 - 模板里写
$NAME$会被替换成你输入的文件名（不含扩展名），比如新建login.vue，$NAME$就变成login - 不支持
$1/$2光标跳转，如需交互式占位，得配合 snippets 二次编辑
为什么不用 Emmet 的 ! + Tab 生成 HTML 骨架
Emmet 的 ! 快捷键确实能快速输出基础 HTML5 结构，但它只在已存在且语言模式设为 html 的文件中生效。如果你双击资源管理器新建一个空文件，没保存、没选语言类型，敲 ! 是没反应的——这是新手最常卡住的地方。
更关键的是，它只给骨架，不带项目约定内容：比如你们团队要求每个 HTML 必须含 、CSS 引入固定路径 ./css/base.css、JS 加载用 type="module"，这些都无法靠 Emmet 自动注入。
- 必须先将文件保存为
.html后缀，再按Ctrl+Shift+P→ 输入Change Language Mode→ 选HTML - Emmet 输出的
- 生成的结构固定，无法按环境区分（如开发版加
console.log，生产版剔除）
自定义 snippet 作为补充：在已有文件里快速补全模块
当文件已经创建好，你真正需要的是局部内容插入，比如在 Vue 文件里加一个 useFetch 组合式函数，或在 JS 里插入防抖逻辑——这时候 user snippets 或 workspace snippets 才是主力。
例如，在 javascript.json 中加一段：
{
"debounce function": {
"prefix": "deb",
"body": [
"function ${1:fn}() {",
" let timer;",
" return function(...args) {",
" clearTimeout(timer);",
" timer = setTimeout(() => ${1:fn}(...args), ${2:300});",
" };",
"}"
],
"description": "防抖函数封装"
}
}
在 .js 文件中输入 deb + Tab 即可展开，光标停在 ${1:fn} 处可直接改名，再 Tab 跳到延迟毫秒数。
- 前缀（
prefix）别用太泛的词，如func容易和内置 snippet 冲突，推荐带业务缩写：apiDeb、vueOnMounted -
body是字符串数组，每行一个元素，换行靠空字符串""实现，不是\n - 同一 snippet 中多个
${1:label}会联动修改，适合重复字段（如组件名、文件名、class 名）
工作区 snippets 比用户 snippets 更适合团队协作
把 snippets 放进项目根目录的 .vscode/snippets/ 下，所有成员打开项目时自动加载，无需各自配置。比如 React 项目统一用 rfc 生成函数组件，Vue 项目用 vue3-comp 生成带 defineProps 和 defineEmits 的 SFC。
注意 .vscode/snippets/ 是工作区专属路径，Git 提交时应保留它；而用户级 snippets（位于 ~/.vscode/User/snippets/）只影响本机，无法同步。
- 语言文件名必须匹配 VSCode 识别的语言 ID，不是文件后缀：Vue 文件用
vue.json，不是.vue.json；TypeScript React 用typescriptreact.json - 如果工作区 snippets 和用户 snippets 冲突（同 prefix），工作区优先级更高
- 修改后需重启 VSCode 或重载窗口（
Ctrl+Shift+P→Developer: Reload Window）才生效
实际落地时最容易被忽略的，是模板内容与项目构建流程的耦合。比如你在模板里写了 import { createApp } from 'vue'，但项目用的是 Vue 2，这段代码就会直接报错——模板不是静态快照，它得跟着技术栈演进持续维护。
