VS Code 中，GitLens 和 Git Graph
在 VS Code 中，GitLens 和 Git Graph 插件是两款非常强大的 Git 扩展，可以显著增强 Git 操作的效率和可视化功能。
1. 安装 GitLens 和 Git Graph 插件
1.1 安装 GitLens 插件
GitLens 是一个强大的 VS Code 扩展，用于增强 Git 的功能，提供更多的提交历史、作者信息、文件变更细节等内容。
安装步骤：
- 打开 VS Code，点击左侧的 扩展 图标（或使用快捷键
Ctrl + Shift + X）。 - 在搜索框中输入 GitLens，找到插件后点击 安装。
安装完成后，GitLens 会自动启用，你将会看到它集成到源代码管理面板中。
1.2 安装 Git Graph 插件
Git Graph 插件为 VS Code 提供了图形化的 Git 提交历史和分支图，使得管理 Git 分支、查看提交历史变得更加直观。
安装步骤：
- 打开 VS Code，点击左侧的 扩展 图标（或使用快捷键
Ctrl + Shift + X）。 - 在搜索框中输入 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 插件能够显示每一行代码的修改历史，帮助你快速了解某行代码的修改情况。
- 在文件中，鼠标悬停在某一行代码上，GitLens 会在该行的右侧显示该行代码的 修改者、修改时间和提交信息。
- 如果该行代码发生过多次修改，GitLens 会提供历史记录按钮，允许你查看该行代码在不同提交中的历史。
2.2.3 查看提交历史
在 源代码管理 面板中，点击 GitLens 侧边栏，可以查看所有提交的历史记录。每个提交会显示：
- 提交信息。
- 提交时间。
- 提交者。
- 文件变更列表。
- 在 源代码管理面板，选择 GitLens。
- 点击 提交历史，在右侧的面板中显示详细的提交记录。
2.2.4 分支和提交对比
GitLens 允许你查看不同分支的提交差异、比较两个提交之间的差异，甚至可以在同一个文件中对比当前分支和其他分支的变更。
- 在 GitLens 侧边栏，选择 提交历史。
- 选择两个提交，然后右键选择 比较这两个提交，你将看到这两个提交的差异。
- 你也可以对比不同分支之间的变更，右键点击 分支名称，选择 与当前分支比较。
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 视图
- 在 VS Code 中，按下快捷键
Ctrl + Shift + P，然后输入 Git Graph: View Git Graph，回车打开图形化的 Git 提交历史视图。 - 你也可以在侧边栏点击 Git Graph 图标来快速打开该视图。
3.2.2 查看图形化提交历史
在 Git Graph 视图中，你将看到所有分支和提交历史的图形表示：
- 每个提交以圆点显示，提交之间通过线条连接，表示提交之间的父子关系。
- 分支会显示为从主线分叉出来的线条。
- 合并操作会显示为合并节点，显示两个分支的合并点。
3.2.3 查看提交差异
在 Git Graph 中，你可以轻松地查看任意两个提交之间的差异：
- 选择两个提交，右键点击其中一个提交，选择 查看差异。
- 你将看到两个提交之间的 代码差异，包括文件的新增、修改和删除。
3.2.4 创建、切换和合并分支
Git Graph 还允许你通过图形界面执行分支管理操作：
- 创建新分支：右键点击某个提交，选择 创建新分支，然后输入分支名称。
- 切换分支：点击某个分支的圆点，右键选择 切换到该分支。
- 合并分支：右键点击某个分支，选择 合并到当前分支，执行合并操作。
3.2.5 拉取、推送和同步操作
在 Git Graph 视图中，你可以直接进行远程仓库的同步操作：
- 点击右上角的 拉取按钮（向下的箭头），将远程更改拉取到本地。
- 点击 推送按钮（向上的箭头），将本地提交推送到远程仓库。
4. 如何像 IntelliJ IDEA 一样提交代码
通过 GitLens 和 Git Graph，VS Code 可以实现类似于 IntelliJ IDEA 的 Git 提交体验。以下是使用这两个插件进行 Git 提交、推送、分支管理等操作的步骤：
4.1 提交代码
- 在 源代码管理面板 中，查看文件的修改。
- 使用 GitLens 查看每个文件的历史、行级注释等，了解文件更改的背景。
- 将需要提交的文件添加到 暂存区（点击
+或右键选择暂存）。 - 在提交框中输入提交信息。
- 点击 ✔ 提交，完成提交操作。
4.2 推送代码到远程仓库
- 在 源代码管理面板 或 Git Graph 中，点击 推送按钮，将提交推送到远程仓库。
- 如果本地和远程仓库有差异，GitLens 和 Git Graph 会提示你拉取更新。
4.3 分支管理
- GitLens 允许你查看分支的详细历史信息、比较不同分支的差异。
- Git Graph 提供了图形化的分支管理功能，可以方便地进行分支创建、切换、合并操作。
总结
- GitLens 是一个功能强大的 Git 扩展，帮助你查看文件历史、行级注释、提交历史和作者信息等，增强 Git 操作的可视化和便利性。
- **Git Graph
** 提供了直观的图形化 Git 提交历史视图，方便管理分支、查看提交差异以及进行分支操作。