最稳的插件开发起点是用 yo code 生成骨架,但需固化模板、路径和注入逻辑来避免手动创建资源目录;通过 npm scripts 批量建目录、vscode.uri.joinpath 动态拼接路径、首次激活时自动复制模板文件,并注意跨平台兼容与编码问题。

直接用 yo code 生成插件骨架是最稳的起点,但“快速生成资源文件”这事,不能只靠脚手架——关键在怎么把模板、路径、注入逻辑提前固化,避免每次手动建 icons/、media/、templates/ 这类目录和占位文件。
用 generator-code 自带模板生成基础资源结构
运行 yo code 时选 New Extension (TypeScript),它默认会创建 media/ 目录(含示例图标)和 package.json 中的 icon 字段。但注意:media/ 是空的,图标文件得自己放;而且它不建 templates/ 或 snippets/ 这类开发常用目录。
- 如果插件需要图标,立刻把
icon.png和icon.svg放进media/,并在package.json的icon字段填相对路径,比如"icon": "media/icon.svg" - 想加代码片段(snippets),得手动建
snippets/目录,并在package.json的contributes.snippets里声明 JSON 文件路径,VSCode 不会自动帮你注册 -
yo code生成的package.json里没有repository或license字段,这些虽不算“资源文件”,但缺了会导致发布时校验失败或 GitHub 页面信息缺失
用 npm scripts 快速批量生成常用资源文件
手动建目录太慢,尤其当你反复调试新插件时。直接在 package.json 的 scripts 里加一条命令,比每次敲 mkdir -p 强得多:
"scripts": {
"init:resources": "mkdir -p media snippets templates && touch snippets/custom.code-snippets && touch templates/README.md"
}
执行 npm run init:resources 就能一次性拉起整套目录结构。注意两点:
- Windows 用户需用
cmd /c mkdir或改用cross-env兼容写法,否则mkdir -p在 PowerShell 下可能报错 -
touch在 Windows 原生命令里不存在,可换成type nul > snippets/custom.code-snippets,或者干脆装touch-cli作为 devDependency - 别把资源文件路径硬编码进 extension.ts —— 应该用
vscode.Uri.joinPath动态拼接,否则打包后路径容易失效
模板文件预置 + 首次激活时自动复制
有些资源(比如初始配置 JSON、默认 CSS 片段)不适合放进 Git,但又希望用户第一次启用插件时就存在。这时别靠文档说明“请手动创建”,而是让插件自己动手:
- 把模板文件(如
templates/default-config.json)放进项目,构建时确保它们被包含进out/目录(检查tsconfig.json的include字段) - 在
activate函数里判断目标路径是否存在,若无则用vscode.workspace.fs.writeFile把模板内容写过去 - 特别注意权限:写入用户
.vscode/目录需用户确认,而写入插件自己的context.extensionPath下则无需弹窗 - 不要在每次启动都覆盖——只做一次初始化,可用
context.globalState.get('firstRun')标记
真正麻烦的不是生成文件,而是让它们在不同平台、不同打包方式(vsce vs webpack)、不同 VSCode 版本下都能被正确定位。路径拼接必须用 vscode.Uri.joinPath,绝对路径字符串几乎必挂;模板内容别硬编码成字符串,优先读取本地文件再 toString(),否则中文或特殊字符容易乱码。











