VSCode扩展中使用JsDiff实现自定义行内差异对比时的异常问题求助

看起来你在做VSCode扩展的自定义diff功能时踩了几个常见的坑，我来帮你分析问题并给出修复方案～

你的核心问题梳理 #

1. 差异对比只显示原始文本，新增的行完全看不到
2. 编辑器里出现了意料之外的橙色背景装饰，但你只定义了绿色（新增）和红色（删除）两种装饰
3. 对JsDiff的结果和VSCode编辑器装饰的对应逻辑存在误解

问题根源分析 #

1. 新增行无法显示的核心原因 #

你当前的逻辑是在原文件的编辑器上添加装饰，但新增的行根本不存在于原文件中——你的代码试图给原文件里没有的行号创建Range，VSCode会直接忽略这些无效的范围，所以绿色的新增装饰完全看不到。而且你没有修改编辑器的内容，编辑器自然始终显示原文件的文本，新增行当然不会凭空出现。

2. 行号计算逻辑错误 #

看你代码里的lineNumber累加逻辑：

if (!part.removed) {
    lineNumber += lines.length - 1;
}

当遇到added类型的diff块时，!part.removed是true，所以你错误地把新增行的数量加到了原文件的行号上，导致后续的行号计算完全偏移，甚至对应到原文件不存在的行，进一步加剧了装饰不显示的问题。

3. 橙色装饰的来源 #

你看到的橙色背景大概率是VSCode自带的未保存更改标记（默认浅橙色），和你的代码无关——可能是你测试时修改了文件没保存，或者VSCode的自动保存没开启。可以通过打开文件后按Ctrl+S保存，或者关闭editor.showModified设置来隐藏它。

修复方案 #

根据你的需求（一次性展示文件的所有差异），我给你两种实用的实现方式：

方式1：双栏对比（推荐） #

左栏显示原文件，标记删除的行；右栏显示新内容，标记新增的行，完全符合VSCode用户的操作习惯：

import * as vscode from 'vscode';
import { diffLines } from 'diff';

async function showInlineDiff(fileUri: vscode.Uri, newCode: string) {
    // 读取并标准化文本（统一行尾格式）
    const currentFileContent = await vscode.workspace.fs.readFile(fileUri);
    const originalText = Buffer.from(currentFileContent).toString('utf-8');
    const normalizedOriginal = originalText.replace(/\r\n/g, '\n');
    const normalizedNew = newCode.replace(/\r\n/g, '\n');

    // 生成行级差异
    const diffs = diffLines(normalizedOriginal, normalizedNew);
    const originalLang = (await vscode.workspace.openTextDocument(fileUri)).languageId;

    // --------------------------
    // 左栏：原文件，标记删除行
    // --------------------------
    const originalEditor = await vscode.window.showTextDocument(fileUri, { viewColumn: vscode.ViewColumn.One });
    const removedDecoration = vscode.window.createTextEditorDecorationType({
        backgroundColor: 'rgba(255,0,0,0.3)',
        isWholeLine: true,
    });
    const removedRanges: vscode.Range[] = [];
    let originalLine = 0;

    for (const part of diffs) {
        const lines = part.value.split('\n');
        if (part.removed) {
            // 标记原文件中存在的删除行
            lines.forEach((line, idx) => {
                if (idx < lines.length - 1) { // 排除split('\n')产生的最后一个空元素
                    removedRanges.push(new vscode.Range(originalLine + idx, 0, originalLine + idx, line.length));
                }
            });
            originalLine += lines.length - 1;
        } else if (!part.added) {
            // 只有共同部分才累加原文件行号
            originalLine += lines.length - 1;
        }
    }
    originalEditor.setDecorations(removedDecoration, removedRanges);

    // --------------------------
    // 右栏：临时文档显示新内容，标记新增行
    // --------------------------
    const tempDoc = await vscode.workspace.openTextDocument({
        content: normalizedNew,
        language: originalLang // 保持和原文件相同的语法高亮
    });
    const newEditor = await vscode.window.showTextDocument(tempDoc, { viewColumn: vscode.ViewColumn.Two });
    const addedDecoration = vscode.window.createTextEditorDecorationType({
        backgroundColor: 'rgba(0,255,0,0.3)',
        isWholeLine: true,
    });
    const addedRanges: vscode.Range[] = [];
    let newLine = 0;

    for (const part of diffs) {
        const lines = part.value.split('\n');
        if (part.added) {
            // 标记新内容中的新增行
            lines.forEach((line, idx) => {
                if (idx < lines.length - 1) {
                    addedRanges.push(new vscode.Range(newLine + idx, 0, newLine + idx, line.length));
                }
            });
            newLine += lines.length - 1;
        } else if (!part.removed) {
            // 共同部分累加新内容行号
            newLine += lines.length - 1;
        }
    }
    newEditor.setDecorations(addedDecoration, addedRanges);

    // 监听编辑器关闭，销毁装饰类型避免内存泄漏
    const disposeDecorations = () => {
        addedDecoration.dispose();
        removedDecoration.dispose();
    };
    vscode.window.onDidChangeActiveTextEditor(editor => {
        if (!editor || (editor.document.uri !== fileUri && editor.document.uri !== tempDoc.uri)) {
            disposeDecorations();
        }
    });

    vscode.window.showInformationMessage('差异对比已打开：左栏原文件（红色=删除行），右栏新内容（绿色=新增行）');
}

方式2：单栏合并展示（类似Git的Inline Diff） #

如果想在同一个编辑器里展示合并后的差异（包含删除和新增行），可以生成带标记的合并内容，再用装饰隐藏标记：

// 生成带标记的合并内容
let mergedContent = '';
for (const part of diffs) {
    if (part.added) {
        mergedContent += `+ ${part.value}`;
    } else if (part.removed) {
        mergedContent += `- ${part.value}`;
    } else {
        mergedContent += `  ${part.value}`;
    }
}

// 创建临时文档显示合并内容
const tempDoc = await vscode.workspace.openTextDocument({
    content: mergedContent,
    language: originalLang
});
const editor = await vscode.window.showTextDocument(tempDoc);

// 创建装饰：隐藏+/-标记，设置背景色
const addedDecoration = vscode.window.createTextEditorDecorationType({
    backgroundColor: 'rgba(0,255,0,0.3)',
    isWholeLine: true,
    textDecoration: 'none; display: none;' // 隐藏开头的+号
});
const removedDecoration = vscode.window.createTextEditorDecorationType({
    backgroundColor: 'rgba(255,0,0,0.3)',
    isWholeLine: true,
    textDecoration: 'line-through; display: none;' // 隐藏开头的-号并添加删除线
});

// 标记对应的行（行号计算逻辑参考方式1的diff遍历逻辑）
// ... 这里需要遍历mergedContent的行，给带+/-的行添加对应装饰

额外注意事项 #

1. 装饰类型销毁：一定要记得调用dispose()销毁创建的装饰类型，否则会导致VSCode内存泄漏，上面的双栏代码已经加入了自动销毁逻辑。
2. 行尾统一：你代码里的行尾标准化处理（replace(/\r\n/g, '\n')）是对的，这能避免Windows和Linux行尾差异导致的diff错误。
3. 大文件优化：如果处理超大文件，建议分块计算diff，避免UI线程卡顿。

备注：内容来源于stack exchange，提问作者Precious112