菜园前端
启航

Git 安装与初体验

详细介绍 Git 的安装、基本配置、项目初始化及使用 VS Code 查看提交历史的步骤

🎯 引言

如果你刚开始接触版本控制工具，那么 Git 是你必须掌握的基础技能。通过学习 Git，你能够轻松管理代码版本，协同开发，并且随时回退代码来避免错误。本文会从最基础的 Git 安装开始，带你一步步完成初次配置和使用，特别是配合我们常用的代码编辑器 VS Code，让你能够更直观地查看和管理 Git 提交历史。

这篇文章适合完全没有接触过 Git 的小伙伴，也适合刚刚开始用 Git 但还不熟悉操作流程的人。我们会从 Git 安装、配置用户名邮箱、创建第一个项目、提交版本，到在 VS Code 中查看提交历史都详细说明。掌握这些内容后，你就能轻松入门 Git 项目管理啦！

🧩 Git 安装与 VS Code 插件配置

1. Git 安装步骤

Git 支持 Windows、macOS 和 Linux 多系统，安装非常简单。以 Windows 为例：

  1. 访问 Git 官网：https://git-scm.com/ ，下载适合你系统的安装包。
  2. 运行安装包，安装时建议保持默认选项。
  3. 安装完成后，打开命令行（Win + R 输入 cmd），输入：
git --version

如果显示版本号，说明安装成功。

macOS 用户推荐使用 Homebrew 安装：

brew install git

2. VS Code Git 插件

VS Code 本身内置了对 Git 的支持，无需额外安装插件即可使用 Git 功能。你可以通过左侧的“源代码管理”图标（类似分支状）访问。

确保你的 VS Code 已经安装并且版本不太旧，否则可能无法正常使用 Git 集成功能。

😊 配置用户名和邮箱：为什么这么重要？

Git 作为版本控制系统，会记录每次提交的作者信息。为了让别人知道是谁提交了代码，Git 需要你配置用户名和邮箱。

在命令行输入：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱@example.com"

这两条命令会把你的名字和邮箱写入全局配置文件中，所有项目都会使用该配置。

为什么很重要？

  • 便于识别不同开发者的提交记录
  • 方便团队成员之间追踪问题责任
  • 许多远程代码托管平台（如 GitHub）会根据这些信息关联用户账号
如果以后想修改用户名或邮箱，可以用同样命令重新设置。也能针对某个项目单独设置，不加 --global 即可。

🛠 创建第一个 HTML 项目并初始化 Git 仓库

接下来，我们来做一个简单的 HTML 项目，顺便熟悉 Git 仓库初始化的步骤。

  1. 新建一个文件夹，比如叫 my-first-git-project。
  2. 进入该文件夹，创建一个 index.html 文件，写入简单的 HTML 内容：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>My First Git Project</title>
    </head>
    <body>
        <h1>欢迎来到我的第一个 Git 项目</h1>
    </body>
</html>
  1. 打开命令行，切换到该文件夹：
cd 路径/my-first-git-project
  1. 初始化 Git 仓库：
git init

这条命令会在该目录下创建一个隐藏的 .git 文件夹，表明这里是一个 Git 仓库。

💾 提交第一次版本

Git 工作流程主要是“修改代码 → 添加暂存区 → 提交版本”，下面演示这三个步骤。

初始化仓库

上一步执行了，可以忽略此步骤。

`git init`

添加文件到暂存区

git add index.html

这条命令的作用是告诉 Git “我要把 index.html 这个文件纳入版本管理”。

如果你想添加所有文件，可以用：

git add .

提交版本

git commit -m "首次提交：添加 index.html 页面"

用 -m 参数写提交说明，描述这次改动内容，方便后续回顾。

提交完成后，Git 就会把暂存区的文件保存成一个版本快照。

提交信息要简洁明确，方便团队成员快速理解改动内容。

👀 用 VS Code 看 Git 提交历史（图形界面）

VS Code 里查看 Git 历史非常方便。

  1. 安装扩展插件 GitLens — Git supercharged
  2. 点击左侧“源代码管理”图标。
  3. 找到 GITLENS 下拉项展开即可看到历史提交信息。
  4. 从源代码管理器切换到 GitLens Inspect 选项后，可以在 FILE HISTORY 模块看到单个文件的历史记录。

🧾 小节总结

  1. Git 安装简单，Windows/macOS/Linux都有对应安装方式。
  2. 配置用户名和邮箱是 Git 使用必备，方便识别提交者。
  3. 创建项目后用 git init 初始化仓库，git add 添加文件，git commit 提交版本。
  4. VS Code 内置 Git 支持，方便查看未提交变更和提交历史，提升开发效率。

❓ 知识问答（Q&A）

Q：为什么要使用 Git 版本控制？

A：Git 能帮我们记录代码历史，方便回退、协同开发和管理多个版本，避免代码丢失和冲突。

Q：git add 和 git commit 有什么区别？

A：git add 是把文件放入暂存区，表示准备提交；git commit 是把暂存区内容保存成一个版本快照。

Q：如果我提交时写错了信息，怎么办？

A：可以用 git commit --amend 修改上一次提交信息，但如果已经推送到远程仓库，慎用该命令。

🧪 小练习

练习 1：初始化 Git 仓库并提交

创建一个新的文件夹，写一个简单的 hello.html 文件，初始化 Git 仓库，添加并提交这个文件。

mkdir git-practice
cd git-practice
echo "<h1>Hello Git!</h1>" > hello.html
git init
git add hello.html
git commit -m "添加 hello.html 文件"

练习 2：在 VS Code 中查看提交历史

用 VS Code 打开你刚刚练习的项目文件夹，点击左侧源代码管理图标，查看提交历史信息。

🎉 恭喜你已经掌握 Git 安装、配置、初始化仓库、提交版本以及在 VS Code 查看提交历史的技能啦！希望你能在项目管理中顺利应用这些知识，持续提升开发效率！

Git 入门指南

这篇文章深入讲解 Git 的基本概念、在开发中的作用及其与传统备份的区别，帮助前端小白轻松掌握版本控制。

常用 Git 命令详解

详细介绍 Git 中常见命令的使用方法与最佳实践，适合前端开发者。