VSCode扩展开发：如何打包并读取扩展内置文件？

1. 配置打包规则确保模板文件被收录 #

VSCode扩展通过vsce打包时，只会把package.json中files字段声明的资源纳入包内，首先修改扩展根目录的package.json，添加如下配置，避免模板目录被遗漏：

{
  // 其余原有配置保持不变
  "files": [
    "extension.js",
    "templates/**/*"
  ]
}

本地调试时如果是通过F5启动扩展开发宿主，这一步配置也能确保模板目录被正确加载。

2. 基于扩展上下文获取文件绝对路径 #

不要直接用相对路径读取文件——VSCode启动时的工作目录是自身安装路径，相对路径会从这个位置解析，自然找不到扩展目录下的文件。
扩展激活函数传入的context对象自带扩展根路径标识，通过这个属性拼接路径，在本地开发、正式打包、远程开发等所有场景下都能准确定位文件：

• 本地普通环境可以直接用Node.js原生fs+path模块操作
• 远程开发（SSH/WSL/开发容器）场景推荐用VSCode内置的workspace.fsAPI，兼容性更好

修正后的完整实现代码 #

const vscode = require('vscode');
const fs = require('fs');
const path = require('path');

function activate(context) {
  context.subscriptions.push(
    // 修复原代码的语法错误：回调函数需要作为registerCommand的第二个参数传入
    vscode.commands.registerCommand("xxx.my-command", function () {
      // 获取扩展安装目录的本地文件系统路径
      const extensionRoot = context.extensionUri.fsPath;
      // 跨平台拼接模板文件路径，自动适配Windows/macOS/Linux的路径分隔符
      const templatePath = path.join(extensionRoot, 'templates', 'template1.yaml');

      // 读取文件时必须指定utf8编码，否则默认返回Buffer类型会导致内容异常
      fs.readFile(templatePath, 'utf8', (err, fileContent) => {
        if (err) {
          vscode.window.showErrorMessage(`模板读取失败：${err.message}`);
          return;
        }
        const activeEditor = vscode.window.activeTextEditor;
        if (!activeEditor) {
          vscode.window.showWarningMessage('当前没有打开的活动编辑器，无法插入内容');
          return;
        }
        const snippet = new vscode.SnippetString(fileContent);
        activeEditor.insertSnippet(snippet);
      })
    })
  )
}

function deactivate() { }

module.exports = {
  activate,
  deactivate
}

3. 关键注意事项 #

• 不推荐用__dirname拼接路径：如果扩展后续用webpack等工具打包，__dirname会被打包工具篡改指向bundle输出目录，导致路径失效，用context.extensionUri是官方推荐的最稳妥方案。
• 远程环境适配写法：如果插件需要在远程开发场景使用，把文件读取逻辑替换为VSCode内置文件API即可，不需要额外修改路径逻辑：

  // 远程环境兼容示例
  const templateUri = vscode.Uri.joinPath(context.extensionUri, 'templates', 'template1.yaml');
  const fileBuffer = await vscode.workspace.fs.readFile(templateUri);
  const fileContent = Buffer.from(fileBuffer).toString('utf8');
  // 后续插入片段逻辑和之前一致
  

• 原示例代码存在语法错误：registerCommand方法的第二个参数是命令回调，原代码把回调函数写在了方法括号外，会直接导致命令注册失败，上述代码已经修复该问题。

内容的提问来源于stack exchange，提问作者Sinaesthetic