VSCode中实现新建文件自动填充模板有三种方法:一、配置用户代码片段,输入前缀后按Tab插入;二、安装File Templates扩展,右键选择模板生成文件;三、用Tasks调用Shell脚本自定义渲染。

如果您在使用 VSCode 进行开发时,希望每次新建文件都能自动填充预设的头部注释、导入语句或结构框架,则可能是由于未配置或未启用文件模板功能。以下是实现该目标的多种方法:
本文运行环境:MacBook Air,macOS Sequoia。
一、使用内置用户代码片段(User Snippets)
VSCode 原生支持通过代码片段为特定语言类型的新建文件注入标准化内容,适用于单文件快速初始化,无需额外插件。
1、打开命令面板(快捷键 Command + Shift + P),输入并选择“Preferences: Configure User Snippets”。
2、在弹出菜单中选择目标语言(例如 “JavaScript” 或 “New Global Snippets file…”)。
3、在 JSON 文件中添加如下结构的模板条目:
“new-component”: {
“prefix”: “nc”,
“body”: [“// @author YourName”, “// @created ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}”, “export default {”, “ name: ‘${1:ComponentName}’,”, “ data() {”, “ return {”, “ ${2:state}”, “ }”, “ }”, “}”],
“description”: “Standard Vue component template”
}
4、保存文件后,在对应语言的 .js 或 .vue 文件中输入 nc 并按 Tab 键,即可插入该模板。
二、安装并配置 File Templates 扩展
通过第三方扩展可实现真正意义上的“新建文件即应用模板”,支持多语言、目录级模板及变量替换,适合团队统一规范。
1、在 VSCode 扩展市场中搜索并安装 “File Templates”(作者:brpaz)。
2、安装完成后,按下 Command + Shift + P,输入并执行 “File Templates: Configure Templates”。
3、在生成的 .vscode/file-templates.json 中定义模板,例如:
{
“javascript”: {
“template”: “// Generated on ${DATE} by ${USER}\n\nexport function ${NAME}() {\n return ‘hello’;\n}”,
“extension”: “.js”
}
}
4、右键资源管理器空白处,选择 “Create new file from template”,再选择 “javascript”,输入文件名后即可生成带时间戳与用户名的标准化文件。
三、利用 Tasks + Shell 脚本自定义模板触发器
对于高度定制化场景(如需读取 Git 用户信息、调用外部 CLI 工具生成 UUID 等),可通过 VSCode 任务系统调用本地脚本完成模板渲染。
1、在项目根目录创建 scripts/create-template.sh,并赋予执行权限(chmod +x scripts/create-template.sh)。
2、脚本内容示例:
#!/bin/bash
FILENAME=$1
echo "// @project $(basename $(pwd))" > $FILENAME
echo "// @generated $(date '+%Y-%m-%d %H:%M')" >> $FILENAME
echo "console.log('$FILENAME loaded');" >> $FILENAME
3、在 .vscode/tasks.json 中添加 task:
{
“version”: “2.0.0”,
“tasks”: [{
“label”: “create-js-template”,
“type”: “shell”,
“command”: “./scripts/create-template.sh”,
“args”: [“${input:newFileName}”],
“group”: “build”
}]
}
4、按下 Command + Shift + P,执行 “Tasks: Run Task”,选择 “create-js-template”,输入文件名(如 main.js),脚本将自动创建并写入标准化头部。










