使用可视化工具查看代码差异

Git 可以通过命令行显示代码修改，但对于初学者来说，直接看命令行中的 Diff 往往不够直观。实际开发中，很多开发者也更习惯使用 VS Code、GitHub 或其他可视化工具查看代码差异。这样可以很清楚地看到哪些代码被删除、哪些代码被新增，以及一个文件到底发生了什么变化。

这里我们主要使用 VS Code 来理解代码差异，因为它本身就带有 Git 支持，不需要为了基础操作额外安装复杂的 Git GUI 工具。

在 VS Code 中查看修改文件

当你打开一个 Git Repository，并修改其中的文件后，VS Code 左侧通常会显示一个 Source Control 图标。

如果你修改了：

hello.txt

Source Control 中就会显示这个文件。文件名旁边通常还会出现一个字母，例如：

M

这里的 M 表示 Modified，也就是文件已经被修改。

新创建但还没有加入 Git 的文件，可能会显示：

U

通常表示 Untracked。

这些标记可以帮助你快速判断哪些文件发生了变化，而不需要每次都回到 Terminal 里输入命令。

查看修改前后的差异

在 Source Control 中点击一个已经修改的文件，VS Code 通常会打开一个左右对比界面。

它大致会显示成：

修改前                         修改后

Hello Git                     Hello Git
                              Git is easy to learn.

左侧通常代表之前的内容，右侧代表当前修改后的内容。新增的代码和删除的代码会通过不同的高亮方式显示，因此即使一个文件非常长，也可以快速找到变化的位置。

例如，如果原本代码是：

const name = "Alice";

后来改成：

const name = "Bob";

Diff 界面会清楚地显示旧的这一行被删除，然后新的这一行被加入。

这比重新阅读整个文件要高效得多。

运行 git diff，在编辑器里删掉临时 console.log，再暂存干净的修改。

为什么提交前应该先看 Diff？

在执行 Commit 之前查看 Diff 是一个很好的习惯，因为你可以确认自己到底准备提交了什么。

比如你原本只是想修改：

login.js

但是在开发过程中又不小心在另一个文件中留下了一行测试代码：

console.log("test");

如果不看 Diff，就有可能把这行临时代码一起提交。通过 VS Code 的 Source Control，你可以在 Commit 前快速检查所有修改，从而减少这种错误。

可以把日常流程稍微调整成：

修改代码 → 查看 VS Code Diff → 确认修改内容 → git add → git commit

查看已暂存和未暂存的修改

VS Code 的 Source Control 通常会把修改分成不同区域。还没有执行 git add 的修改，一般会出现在 Changes 中；已经加入暂存区的修改，则会出现在 Staged Changes 中。

可以简单理解为：

Changes → 还没有执行 git add → Staged Changes → 已经执行 git add → 准备进入下一个 Commit

你也可以直接通过 VS Code 的界面把文件加入暂存区。通常点击文件旁边的 + 按钮，就相当于对这个文件执行：

git add <file>

如果从 Staged Changes 中移除，则相当于取消这个文件的暂存状态。

即使本教程会介绍 Git 命令，也完全可以在日常工作中把命令行和 VS Code 混合使用。例如，用 Terminal 执行 git status 和 git commit，同时使用 VS Code 查看 Diff。很多开发者都会采用这种方式。

查看某次 Commit 修改了什么

除了查看还没有提交的代码，VS Code 或 GitHub 也可以用来查看已经完成的 Commit。

当你打开某次 Commit 时，通常可以看到这次提交：

修改了哪些文件
增加了哪些代码
删除了哪些代码

例如一个 Commit：

Fix login error

你可以直接查看这个 Commit 对 login.js 做了哪些修改，而不需要只根据 Commit Message 去猜。

这也是 Git 的一个重要价值：它不只是保存最终代码，而是保存每一次代码变化的过程。