日常写代码、改配置、核对同事工作量的时候，我最常做的事情之一就是“看看这两个文件到底差在哪”。VS Code 内置Diff工具是一个你用起来几乎感觉不到存在，但一旦离开又会立刻觉得束手束脚的功能。它不需要装插件，不需要把文件上传到某个在线平台，也不需要来回切换窗口，直接在编辑器里就能把两个文件并排打开，差异区域用颜色标得明明白白，甚至可以直接在里面编辑和合并。

这篇文章我把平时最常用的 3 种 VS Code 内置 Diff 工具入口整理成一份实操指南，分鼠标流、键盘流、终端流三个方向展开，覆盖“在资源管理器里选文件对比”“用命令面板对比当前文件”“在终端里用 code --diff 直接启动对比”这三种方法。无论你是刚入门的新手，还是已经写了很久代码想提效的开发者，都可以在里面找到适合自己的套路。

1. 内置Diff工具：三个入口，一个核心逻辑

1.1 为什么日常改东西，优先用内置Diff

先聊一个本质问题：Diff 工具到底在做什么。它本质上就是把两个文本集合做行级别的比较，找出新增、删除、修改的区域，再把结果可视化出来。VS Code 把核心对比算法封装在编辑器底层，打开两个文件后会计算出差异集，并在 Diff 视图里用颜色分区展示。这里最关键的不只是“能标红标绿”，而是它允许你在同一个视图里直接修改左右两侧的文件，保存之后就完成了内容调整，不需要再切到另一个工具去改。

这个能力在实际工作中非常实用。我之前重构过一个前端配置结构，一个旧 JSON 文件和一个新 JSON 文件之间大概有几十处变动。第三方对比工具只能看不能改，看完差异我还要回到编辑器里手动同步，效率很低。换用 VS Code 内置 Diff 之后，左栏是旧文件，右栏是新文件，看到差异块直接在新文件这边补改，保存。整个过程一气呵成，少了很多窗口切换。对于经常需要“比对手动合并”的人来说，这个价值比单纯的“高亮差异”要大得多。

另一个选择内置工具的原因是它和 VS Code 整个环境是打通的。文件树里的右键菜单、命令面板、Git 源代码管理视图、终端里的 CLI 启动器，全都复用同一套 Diff 引擎。也就是说，你只需要学会阅读一次差异视图，之后无论从哪个入口打开，操作体验都一致。这一点是我一直不换工具的重要原因。

1.2 三种方法分别怎么选

三种方法可以简单概括为“列表选中”“命令搜索”“终端调用”。抛开口诀，选择标准只有一个：你当前的手指和鼠标在什么位置。

• 如果手在鼠标上，两个文件在资源管理器目录树中已经能看到，用右键菜单“选择以比较 / 与已选择项比较”，两步完成，最直观。
• 如果正在编辑当前文件，想对比另一个文件，用命令面板搜“将活动文件与...比较”，模糊输入文件名即可，不用在目录树里翻来翻去。
• 如果已经打开终端，或者想通过脚本批量触发对比，用code --diff 文件A 文件B，一条命令直达。

这三种方式并不是互斥的。我在日常工作中经常混着用。比如在终端里刚跑完一些命令，想快速核对两个输出文件的区别，直接敲一条code --diff，比切回编辑器再展开目录树快很多；在编辑器里改代码的时候，又习惯用命令面板直接定位另一个同类文件。面对一次性的临时比较，右键菜单则是最低成本的入口。后面我会把每个方法的具体操作步骤和容易踩坑的地方都讲清楚。

2. 方法一：资源管理器右键菜单，最直观的对比入口

2.1 两步右键对比，照着做就行

第一种方法的关键是把“对比”理解成“先选一个基准文件，再选一个目标文件”。在 VS Code 左侧资源管理器中找到第一个文件，右键，菜单里有一个“选择以比较”（英文是 Select for Compare）。点击它，这个文件就被标记为待比较文件，文件名旁边会带上一个小标志，底部状态栏也会出现“已选择用于比较的文件”之类的提示。然后找到第二个文件，右键，原来的菜单项会变成“与已选择项比较”（Compare with Selected）。点击之后，Diff 编辑器立刻打开。

还有一种更快的变体：在资源管理器里按住 Ctrl 或 Cmd 同时选中两个文件，然后右键，看菜单里是否出现“比较所选文件”。如果可以选，它会直接把这两个文件放进对比视图。这个方法更适合两个文件本来就在同一个目录下、一眼就能同时看到的情况。如果两个文件分散在不同目录，还是建议走“两步选择”的方式，因为基准文件的状态是单独标记的，不容易选错。

有个细节需要提一下：在中文界面下，“选择以比较”和“与已选择项比较”的文案可能因为 VS Code 版本不同而略有差异，但英文命令一直是 Select for Compare / Compare with Selected。如果你发现右键菜单里没有预期选项，先检查鼠标指向的是不是文件而不是文件夹。文件夹的右键菜单里可能出现“比较文件夹”之类的能力，但那是目录对比，不是本文要讲的文件差异比较。

2.2 并排 Diff 视图到底怎么读

Diff 编辑器打开以后，默认是左右并排两栏。左侧和右侧各显示一个文件，中间区域会把对应的差异块连接起来。我建议你先看一眼中间有没有细线连接：有细线说明两边的差异区域按行一一对应。每一处差异都会用颜色区分：删除或修改的部分偏红，新增的内容偏绿。如果只是某一行里的几个字符不同，VS Code 还会在这个差异块内部再做一次行内高亮，对比时能直接看到到底是哪个单词或者符号变了，不需要逐字去数。

阅读时可以善用顶部工具栏的“上一个差异 / 下一个差异”按钮，在多个改动点之间快速跳转。当你不需要看中间那段完全相同的代码时，点一下“折叠未更改区域”的图标，Diff 视图就会只保留发生过变化的区域，相同的部分折叠成横条。尤其对于几百行文件里只有两三处差异的情况，这个操作能让屏幕立刻变得清爽，效率提升非常明显。

还有一个很容易被忽略的位置：编辑器滚动条上也会出现红绿标记，标出差异块在整个文件中的位置。文件很长的时候，你不用拖到底才知道差异在哪，看滚动条上的颜色块就能预判改动集中区域，直接拖过去就行。

2.3 这个入口最合适的场景和一个小坑

右键菜单法最适合的场景，是你在目录树里已经能看到目标文件，并且只想快速看两个文件改了哪些内容。比如同事给了两份同名但版本不同的配置，你把它们放在同一个临时目录，打开资源管理器，右键一选，两步搞定。简单直接，几乎不需要记忆任何命令。

但它也有一个不太方便的地方：如果两个文件分属两个很不相关的路径，比如一个在 node_modules 目录里，另一个在 src/config 下，就算你知道目标文件名，也要先把目录一层层展开。这种时候用命令面板反而更快。另一个常见坑是，有些人第一次右键选了“选择以比较”后，又随手把那个文件从标签页关掉，再到第二个文件上右键，发现“与已选择项比较”是灰色的。这不是坏了，而是待比较文件的选中状态被清掉了。解决方法是回到文件树上重新定位到第一个文件，再右键点一次“选择以比较”，状态就会恢复。

3. 方法二：命令面板精准对比，当前文件任意关联

3.1 从当前活动文件触发的操作流程

第二种方法以键盘为主，适合已经打开了一个文件、想和另一个文件对比的场景。先保证当前正在编辑的标签页是文件 A，然后按 Ctrl+Shift+P 呼出命令面板，输入“Compare Active File With”（对应中文“将活动文件与...比较”），回车。VS Code 会弹出一个文件选择输入框，这时不需要在目录树里慢慢翻，直接输入文件 B 的名字片段，甚至输入一部分路径，就可以用模糊搜索定位到目标文件，选中并回车。

这个方法看起来只是“搜索文件”，但它真正的价值在于始终以“当前活动文件”作为基准点。你不需要先回到资源管理器选中文件 A，再右键选文件 B。命令面板直接把两个步骤压缩成一个动作，你只需要集中精力找文件 B 就可以了。

我习惯在对比测试用例时这样操作：文件 A 是 test-basic.ts，文件 B 是 test-enhanced.ts。我只需输入 enhanced，候选列表里就会出现对应文件，选中回车，Diff 立刻打开。如果项目特别大、同名文件很多，还可以先输入目录名再输入文件名，用路径做二次过滤，这样不会选到无关文件。

3.2 命令面板里的对比命令家族，别搞混

很多人不知道，命令面板里其实藏着不止一条对比命令。除了“将活动文件与...比较”，还有“比较所选文件”等选项。这些命令虽然看着像，但触发条件不同。

“将活动文件与...比较”是这条方法的核心，它只关心你当前激活的标签页，然后让你去选另一个文件。“比较所选文件”需要先在资源管理器里选中至少两个文件，本质上是方法一的命令面板版本，适合你已经从目录里选中多个文件但不想用右键菜单的情况。为了让自己不迷路，我建议第一次使用时直接在命令面板里输入“Compare”或中文“比较”，把相关命令都列出来看一遍。不同版本里显示名称可能有细微调整，但底层对应的文件操作行为是稳定的。

这里也要回应很多人的疑问：Diff 视图里的两个文件是可以直接编辑的。比如我发现右侧文件缺少某一行，直接点进右侧编辑器把那一行补上，保存即可，不需要关掉 Diff 再回到原文件。VS Code 会实时把编辑结果反映到差异区域里。如果差异完全消失，两栏中间会显示“文件已相同”的绿色提示，这个反馈很直观。

3.3 这个方法最高效的几个场景

以我自己的经验，命令面板法最适合三类场景。

第一类：当前正在写代码，想对比同一个文件改版前的旧版本或另一个分支的同名文件。比如正在调整 utils.ts，突然想知道半个月前这个文件是什么样，直接用命令面板调出旧路径下的 utils.ts，差异立刻展示。这种场景如果改用右键菜单，你得先关掉当前文件，回到目录树找到两个文件，再逐个选择，非常打断思路。

第二类：项目里存在大量相似文件，但你只记得文件名，记不清在哪个目录。右键展开目录树的效率很低，命令面板的模糊搜索能直接把你带到目标文件。用过一次之后，VS Code 还会在历史候选里记住它，第二次对比同一对文件时，文件 B 可能直接出现在顶部，基本一敲回车就能复现。

要提醒的是，命令面板方法对比的是当前编辑器缓冲里的内容，不是磁盘上最后一次保存的内容。也就是说，如果你的文件 A 有一处还没保存的修改，Diff 结果里会把它当作差异之一。这个行为大多数时候反而是方便，因为它让你在保存前就能看到和另一个文件的真实差异。但如果你没意识到这一点，可能会疑惑“我明明刚保存过，为什么还有差异”。记住：对比的是缓冲区，不完全是磁盘文件。

4. 方法三：终端一条命令启动对比

4.1 先把 code 命令装进 PATH

第三种方法从终端出发。VS Code 安装后自带一个叫做code的命令行启动器，但有些系统默认不会把它加到 PATH 里。如果你在终端输入code --version提示找不到这个命令，说明需要先装上。打开 VS Code，按 Ctrl+Shift+P，执行“Shell Command: Install 'code' command in PATH”，然后重启终端，code就生效了。

这一步在不同操作系统上表现不太一样。Windows 上安装包一般会自动配置；macOS 上第一次安装后需要手动执行上面的命令；Linux 发行版也有各自的维护方式。实在装不上的话，还可以在 VS Code 的命令面板里找到“在终端中打开”之类的能力，它会自动用当前工作路径打开一个外部终端，此时code命令往往已经可用。我不建议手动去改系统环境变量，按官方这个命令操作是最稳的。

4.2 一行命令打开 Diff，还能控制窗口行为

code命令最常用的对比形态其实就一种，后面跟两个文件参数：

code --diff 旧文件 新文件

比如：

code --diff src/app.ts src/app.bak.ts

执行后，VS Code 会打开一个 Diff 编辑器标签，界面操作方法和方法一、方法二完全一样。这个方式的厉害之处在于，它把“对比文件差异”变成了一种可编程能力。你可以把这条命令写进脚本、写进文档，甚至做成一个个人的快捷别名。

如果你希望 VS Code 不要复用当前窗口，而是新开一个干净的窗口来做对比，可以加上-n参数。如果希望在脚本里等待用户看完并关闭 Diff 窗口后再执行后续命令，可以加--wait。例如：

code --diff --wait fileA.txt fileB.txt

在脚本里这样写，等到用户关闭 Diff 标签后，后续命令才会继续。我在写一些简单的发布确认脚本时用过这个参数，它可以强制用户先看一眼关键差异，再做下一步操作，非常适合做质量确认。

4.3 终端流最实用的两个落地姿势

我个人用得最多的是两类。第一类是重构前把当前文件和某个历史版本导出到临时目录做对比。通常我可以先用 Git 相关命令把指定版本导出到临时文件，再用code --diff和当前文件对比。这样不需要污染工作区，也不需要切换到其他工具。第二类是批量对比多个文件。虽然一次code --diff只能对比一对文件，但连续执行多次，就能在同一个 VS Code 窗口里逐个打开多个 Diff 标签。写成一个简单的循环会更省事：

for f in ./*.js; do code --diff "$f" "${f}.old" done

这个小循环会把当前目录下所有 .js 文件和同目录下对应的 .old 后缀文件拉出来逐个对比。要注意的是，如果文件数量很大，一次打开太多 Diff 标签反而难管理。我通常只挑两三个关键文件，逐个看，看一个关一个。反正命令执行很快，没必要追求同时全开。

终端流还有一个隐性优势：当你已经站在终端里时，不需要把操作焦点从终端切回编辑器，再走一轮菜单操作。直接在命令行敲一条命令就完成了从“发现对比需求”到“打开对比视图”的转换。尤其是你在查看日志、处理构建产物、比对输出文件时，这种体验是很顺滑的。

5. 实操心得：差异视图里的细节、误区和排查技巧

5.1 折叠、跳转和忽略空白，这三个细节决定效率

很多刚接触 VS Code 内置 Diff 工具的人都会觉得“怎么这么乱”，因为默认情况下它会把整份文件都显示出来，然后只通过颜色标注变化区域。文件有几百行，差异只有三处，等着你来回滚动查看，确实低效。这时候请把顶部工具栏的“折叠未更改区域”打开，它只保留差异块，界面瞬间清爽。我建议在大型项目里一律开启这个模式，只有需要看上下文时才临时关掉。

跳转也有小技巧。除了点工具栏箭头，你还可以在命令面板里搜索“转到下一个差异”或“转到上一个差异”，然后用键盘快捷键绑定。不同系统默认快捷键有差异，具体键位可以在“键盘快捷方式”里搜索diff.next来确认。我自己习惯把它们设置到 Alt+方向键附近，避免和日常导航冲突。

还有一个容易被忽略的“忽略空白”开关。在 Diff 编辑器右上角的“更多操作”菜单里，有“忽略前导/尾随空白”之类的选项。当你对比两个经过格式化工具处理的文件时，如果满屏都是因为缩进、行尾空格产生的差异，打开这个开关能让你聚焦到真实内容变化。这个功能在处理自动格式化后的代码时特别重要，否则很容易被大量误差异干扰判断。

5.2 和 Git 自带改动视图之间的边界

这里必须提一下另一个高频入口：源代码管理视图里的“打开更改”。这个入口和上面三种方法共用同一套 Diff 渲染引擎，但语义不同。它对比的不是任意两个文件，而是当前文件与 Git 暂存区、HEAD 版本之间的变化。在源代码管理面板里点文件名右侧的图标，就能看到工作区改动。

因为这个视图和 Git 强绑定，所以它比普通文件对比多了一些操作能力：你可以直接对某个差异块执行“暂存 / 还原”等操作，右键菜单里的功能也比普通文件对比更丰富。很多人问我“为什么我在普通文件对比里右键看不到‘暂存这个块’”，原因就是需要进入的是 Git 变化视图，而不是普通文件对比视图。两者虽然长得像，底层的工作对象不一样。

理解这条边界之后，你在实际操作中就不容易用错。例如，我想看一个文件相对最近一次提交改了什么，应该直接进 Git 变化视图；我想看两个平级文件、两个副本或者历史导出文件之间的差异，就要用前面提到的右键菜单、命令面板或命令行。把关系理顺，VS Code 的 Diff 工具才能真正成为日常工作的核心能力。

5.3 常见问题速查表

这张表不算是完整清单，但覆盖了我日常答疑时遇到最多的几种情况。如果你的问题不在里面，建议先看状态栏和命令面板的提示，再检查是不是语言包、快捷键、文件编码造成的干扰。

最后再说点实在话。VS Code 的内置 Diff 工具也许不是最强大的文本对比工具，但它赢在“无处不在”。它同时嵌在文件管理器、命令面板、源代码管理视图和终端启动器里，几乎不会让你产生“我需要专门打开一个对比工具”的额外负担。这也是我一直没有换掉它的原因。建议你把三种方法都试一遍，然后固定成自己的肌肉记忆：鼠标快选时用右键，键盘流用命令面板，终端党用code --diff。遇到复杂差异，再配合“折叠未更改区域”和“忽略空白”这两个开关，对比效率会明显上一个台阶。