VS Code内置diff编辑器需通过命令面板或资源管理器右键“Compare with Selected”打开,左侧为原文件、右侧为修改文件,绿色+表示新增、红色-表示删除、黄色表示修改,>箭头可接受更改,但不触发实时语法检查或格式化。

VS Code 内置的差异比较工具(diff editor)不需要额外安装插件,但必须通过正确触发方式才能看到结构化对比——直接双击打开两个文件不会自动进入 diff 模式。
如何正确打开两个文件的差异视图
最可靠的方式是使用命令面板或资源管理器右键操作:
- 在资源管理器中
Ctrl+Click(Windows/Linux)或Cmd+Click(macOS)选中第一个文件,再右键第二个文件,选择Compare with Selected - 或用快捷键:先打开第一个文件,按
Ctrl+Shift+P(macOS 为Cmd+Shift+P),输入并执行File: Compare Active File With...,然后从列表中选第二个文件 - 不推荐拖拽文件到编辑器标签栏——这会并排打开而非 diff 视图
diff 编辑器里怎么看改了什么
VS Code 的 diff 视图默认左侧为原文件(ORIGINAL),右侧为修改后文件(MODIFIED),改动以颜色区块和符号标记:
- 绿色背景 +
+表示新增行(仅在右侧存在) - 红色背景 +
-表示删除行(仅在左侧存在) - 黄色背景表示该行内容被修改(左右同位置但文本不同)
- 行号旁的
>箭头可点击,把右侧改动“复制”到左侧(即接受修改);反之(即撤销修改) - 注意:这些操作只影响当前 diff 视图中的副本,不会直接保存——需手动
Ctrl+S才写入文件
常见误操作和坑
很多人以为 diff 是“只读快照”,其实它背后绑定的是真实文件路径,但行为受打开方式影响:
- 如果用
git checkout切换分支后再打开 diff,VS Code 默认对比的是工作区文件 vs 暂存区(index),不是 vs HEAD —— 想对比未暂存改动,得用Git: Compare Working Tree with Index命令 - 对比未保存的编辑器内容时,diff 显示的是“已保存版本 vs 当前编辑状态”,但右上角标题可能仍显示文件名,容易误判哪边是“原始”
- 大文件(>50MB)或超长行(>10000 字符)会导致 diff 渲染卡顿甚至空白——此时建议用命令行
git diff或关闭diffEditor.ignoreTrimWhitespace配置项减少计算量
真正容易被忽略的是:diff 视图里的“接受/拒绝”操作不触发格式化,也不校验语法。比如你把一段 const foo = bar() 改成 const foo = bar?.() 并点击 > 应用,TypeScript 错误不会实时提示——得切出去再保存一次才触发检查。










