VS Code 中，GitLens 和 Git Graph

在 VS Code 中，GitLens 和 Git Graph 插件是两款非常强大的 Git 扩展，可以显著增强 Git 操作的效率和可视化功能。

1. 安装 GitLens 和 Git Graph 插件

1.1 安装 GitLens 插件

GitLens 是一个强大的 VS Code 扩展，用于增强 Git 的功能，提供更多的提交历史、作者信息、文件变更细节等内容。

安装步骤：

1. 打开 VS Code，点击左侧的 扩展 图标（或使用快捷键 Ctrl + Shift + X）。
2. 在搜索框中输入 GitLens，找到插件后点击 安装。

安装完成后，GitLens 会自动启用，你将会看到它集成到源代码管理面板中。

1.2 安装 Git Graph 插件

Git Graph 插件为 VS Code 提供了图形化的 Git 提交历史和分支图，使得管理 Git 分支、查看提交历史变得更加直观。

安装步骤：

1. 打开 VS Code，点击左侧的 扩展 图标（或使用快捷键 Ctrl + Shift + X）。
2. 在搜索框中输入 Git Graph，找到插件后点击 安装。

安装完成后，Git Graph 会出现在 VS Code 的命令面板和侧边栏中。

2. GitLens 插件详解

2.1 GitLens 的功能概述

GitLens 主要提供以下几个功能，帮助你更轻松地查看代码历史、作者信息、文件差异等：

• 行级注释：查看每一行代码的最后修改信息，包括作者、提交时间和提交信息。
• 文件历史：查看整个文件的提交历史记录。
• 提交历史：查看提交历史，支持分支切换、提交差异、文件差异等。
• 作者信息：查看每个文件和每个行的作者历史。
• 分支比较：比较不同分支的提交和差异。

2.2 GitLens 配置和基本使用

2.2.1 查看文件历史

在 VS Code 中打开一个文件后，GitLens 会自动显示该文件的 文件历史。你可以看到文件的最后提交信息、作者、时间等信息。

• 打开文件后，你会在文件的左上角看到 GitLens 提供的文件信息：
  • 最后提交的作者。
  • 提交的时间。
  • 提交信息。

2.2.2 行级注释

GitLens 插件能够显示每一行代码的修改历史，帮助你快速了解某行代码的修改情况。

1. 在文件中，鼠标悬停在某一行代码上，GitLens 会在该行的右侧显示该行代码的 修改者、修改时间和提交信息。
2. 如果该行代码发生过多次修改，GitLens 会提供历史记录按钮，允许你查看该行代码在不同提交中的历史。

2.2.3 查看提交历史

在 源代码管理 面板中，点击 GitLens 侧边栏，可以查看所有提交的历史记录。每个提交会显示：

• 提交信息。
• 提交时间。
• 提交者。
• 文件变更列表。

1. 在 源代码管理面板，选择 GitLens。
2. 点击 提交历史，在右侧的面板中显示详细的提交记录。

2.2.4 分支和提交对比

GitLens 允许你查看不同分支的提交差异、比较两个提交之间的差异，甚至可以在同一个文件中对比当前分支和其他分支的变更。

1. 在 GitLens 侧边栏，选择 提交历史。
2. 选择两个提交，然后右键选择 比较这两个提交，你将看到这两个提交的差异。
3. 你也可以对比不同分支之间的变更，右键点击 分支名称，选择 与当前分支比较。

2.2.5 查看提交详细信息

在 GitLens 侧边栏的 提交历史 中，点击任意提交，会弹出该提交的详细信息，包括：

• 该提交变更的 文件列表。
• 每个文件的 变更差异（Diff）。
• 提交信息、提交时间、作者 等。

3. Git Graph 插件详解

3.1 Git Graph 的功能概述

Git Graph 提供了图形化的 Git 分支和提交历史视图，帮助你更直观地理解和操作 Git 仓库的结构。

• 图形化提交历史：以图形方式展示提交的时间线、分支和合并情况。
• 分支管理：可视化管理本地和远程分支。
• 提交差异查看：查看两个提交之间的差异。
• 合并、创建分支：图形化界面支持分支创建、切换、合并等操作。

3.2 Git Graph 配置和基本使用

3.2.1 打开 Git Graph 视图

1. 在 VS Code 中，按下快捷键 Ctrl + Shift + P，然后输入 Git Graph: View Git Graph，回车打开图形化的 Git 提交历史视图。
2. 你也可以在侧边栏点击 Git Graph 图标来快速打开该视图。

3.2.2 查看图形化提交历史

在 Git Graph 视图中，你将看到所有分支和提交历史的图形表示：

• 每个提交以圆点显示，提交之间通过线条连接，表示提交之间的父子关系。
• 分支会显示为从主线分叉出来的线条。
• 合并操作会显示为合并节点，显示两个分支的合并点。

3.2.3 查看提交差异

在 Git Graph 中，你可以轻松地查看任意两个提交之间的差异：

1. 选择两个提交，右键点击其中一个提交，选择 查看差异。
2. 你将看到两个提交之间的 代码差异，包括文件的新增、修改和删除。

3.2.4 创建、切换和合并分支

Git Graph 还允许你通过图形界面执行分支管理操作：

• 创建新分支：右键点击某个提交，选择 创建新分支，然后输入分支名称。
• 切换分支：点击某个分支的圆点，右键选择 切换到该分支。
• 合并分支：右键点击某个分支，选择 合并到当前分支，执行合并操作。

3.2.5 拉取、推送和同步操作

在 Git Graph 视图中，你可以直接进行远程仓库的同步操作：

• 点击右上角的 拉取按钮（向下的箭头），将远程更改拉取到本地。
• 点击 推送按钮（向上的箭头），将本地提交推送到远程仓库。

4. 如何像 IntelliJ IDEA 一样提交代码

通过 GitLens 和 Git Graph，VS Code 可以实现类似于 IntelliJ IDEA 的 Git 提交体验。以下是使用这两个插件进行 Git 提交、推送、分支管理等操作的步骤：

4.1 提交代码

1. 在 源代码管理面板 中，查看文件的修改。
2. 使用 GitLens 查看每个文件的历史、行级注释等，了解文件更改的背景。
3. 将需要提交的文件添加到 暂存区（点击 + 或右键选择暂存）。
4. 在提交框中输入提交信息。
5. 点击 ✔ 提交，完成提交操作。

4.2 推送代码到远程仓库

1. 在 源代码管理面板 或 Git Graph 中，点击 推送按钮，将提交推送到远程仓库。
2. 如果本地和远程仓库有差异，GitLens 和 Git Graph 会提示你拉取更新。

4.3 分支管理

• GitLens 允许你查看分支的详细历史信息、比较不同分支的差异。
• Git Graph 提供了图形化的分支管理功能，可以方便地进行分支创建、切换、合并操作。

总结

• GitLens 是一个功能强大的 Git 扩展，帮助你查看文件历史、行级注释、提交历史和作者信息等，增强 Git 操作的可视化和便利性。
• **Git Graph

** 提供了直观的图形化 Git 提交历史视图，方便管理分支、查看提交差异以及进行分支操作。