VSCode扩展能否访问时间线面板？如何获取文件变更差异？

一、关于访问时间线面板 #

VSCode官方扩展API目前没有直接暴露时间线面板的访问接口，无法直接读取或操作时间线中的历史记录（比如Git提交、文件修改记录等）。如果需要获取文件的历史变更信息，通常需要通过其他方式实现，比如调用Git命令行工具获取文件的版本差异。

二、获取文件变更差异的解决方案 #

你当前使用的FileSystemWatcher只能触发变更事件并返回文件URI，无法直接拿到变更内容。推荐使用以下两种方案：

方案1：监听文本文档变更事件（推荐） #

使用vscode.workspace.onDidChangeTextDocument事件，该事件会返回文档变更的详细编辑信息，包括变更范围、新增/删除的文本：

const vscode = require("vscode");

function activate(context) {
  const docChangeDisposable = vscode.workspace.onDidChangeTextDocument((event) => {
    const targetDoc = event.document;
    // 过滤目标文件：仅处理package.json
    if (!targetDoc.fileName.endsWith("package.json")) return;

    // 遍历所有变更操作
    event.contentChanges.forEach((change) => {
      console.log("变更位置范围:", change.range);
      console.log("变更后的文本:", change.text);
      // 若有删除内容，获取被删除的文本
      if (change.rangeLength > 0) {
        const deletedText = targetDoc.getText(change.range);
        console.log("被删除的文本:", deletedText);
      }
    });
  });

  context.subscriptions.push(docChangeDisposable);
}

module.exports = { activate };

方案2：结合FileSystemWatcher缓存文件内容 #

如果必须使用FileSystemWatcher，可以在变更前缓存文件内容，变更后读取新内容并对比差异：

const vscode = require("vscode");
const fs = require("fs").promises;

// 缓存文件内容的Map
const fileContentCache = new Map();

async function readFileContent(uri) {
  try {
    return await fs.readFile(uri.fsPath, "utf8");
  } catch (err) {
    console.error("读取文件失败:", err);
    return "";
  }
}

function activate(context) {
  const workspacePath = vscode.workspace.workspaceFolders?.[0];
  if (!workspacePath) return;

  const watcher = vscode.workspace.createFileSystemWatcher(
    new vscode.RelativePattern(workspacePath, "**/package.json")
  );

  // 初始化缓存目标文件内容
  vscode.workspace.findFiles(new vscode.RelativePattern(workspacePath, "**/package.json"))
    .then(async (uris) => {
      for (const uri of uris) {
        const content = await readFileContent(uri);
        fileContentCache.set(uri.fsPath, content);
      }
    });

  watcher.onDidChange(async (uri) => {
    const oldContent = fileContentCache.get(uri.fsPath) || "";
    const newContent = await readFileContent(uri);
    
    // 这里可以使用diff库（如diff）生成详细差异，或自行简单对比
    console.log("旧内容:", oldContent);
    console.log("新内容:", newContent);
    
    // 更新缓存
    fileContentCache.set(uri.fsPath, newContent);
  });

  context.subscriptions.push(watcher);
}

module.exports = { activate };

注意：方案2需要自行处理文件内容的对比，若需要专业的差异格式，可引入第三方diff库（如diff），需在扩展package.json中添加依赖。

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