🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Git 集成入门】在 VSCode 中使用 Git 和 GitHub 的基本操作指南

在本文中，我将用世界上最简单易懂的方式，结合 VSCode（Visual Studio Code），解释编程初学者和网页制作者必经之路——“Git”和“GitHub”的集成方法。我将尽量避免使用专业术语，并结合我实际遇到的问题，旨在让您体验到“总算能跑起来了！”的感觉。

即使您害怕黑漆漆的命令行窗口，或者不明白“命令是什么？”，也完全没问题。只要按照本文的步骤操作，您就能将您的代码安全地保存在 GitHub 上了！

自我介绍：由零基础搭建网站的我为您解说

大家好！写这篇文章的我，在几个月前也和大家一样，是一个编程知识为零的初学者。

仅凭着“想做自己的服务！”这个想法，我以 AI 为伙伴，不断尝试和摸索，最终在一个半月内独立搭建了两个网站（buyonjapan.com, copicode.com）。

在这个过程中，我遇到的第一个巨大障碍就是“Git”和“GitHub”。每次出错都让我备受打击，但通过逐一解决问题，它们现在已经成为我最好的伙伴。在本文中，我将根据我的实际经验，浓缩提炼出“初学者真正想知道”的内容分享给大家。

【第 0 步】热身运动！准备好必要的工具

万事开头难，准备工作很重要。在进入正式操作之前，请确认您的电脑上是否已安装以下三个工具。如果没有，就从官网快速安装一下吧！

💡 新手常见问题： “安装了 Git，但 VSCode 识别不出来！”
这种情况下，重启电脑通常就能解决问题。安装后请尝试重启一次电脑。如果还是不行，在安装 Git 时选择带有“(Recommended)”字样的选项，通常就能顺利解决。

【第 1 步】让 Git 认识你（仅需一次）

只需要在最开始设置一次，告诉 Git “这台电脑是我在用哦”。这是为了在之后创建的保存数据（提交）中记录下是谁创建的。

首先，打开 VSCode，从顶部菜单的“终端”中选择“新建终端”，在屏幕下方显示终端（黑色的窗口）。

显示在 VSCode 中打开终端步骤的截图。点击菜单栏的“终端”，然后选择“新建终端”。

终端显示后，请将以下两个命令逐行复制粘贴，并按 Enter 键执行。

首先，设置您的用户名。请将 "Your Name" 部分替换为您自己的 GitHub 用户名等。

git config --global user.name "Your Name"

接下来是邮箱地址。请将 "your.email@example.com" 部分替换为您在 GitHub 上注册的邮箱地址。

git config --global user.email "your.email@example.com"

如果没有显示任何消息，就表示成功了。这样 Git 就记住您了！在更换电脑之前，基本上不需要再进行这项操作。

【第 2 步】开始监控项目 (git init)

那么，让我们实际将您的项目置于 Git 的管理之下吧。这被称为“初始化仓库”。听起来可能很复杂，但在 VSCode 中，只需点击一个按钮即可完成。

  1. 在 VSCode 中，打开您想要进行版本管理的项目文件夹（例如：`my-project` 文件夹）。
  2. 从左侧的活动栏中，点击从上往下第三个分叉状的图标（源代码管理）。
  3. 此时会显示一个蓝色的“初始化仓库”按钮，毫不犹豫地点击它！
显示在 VSCode 的源代码管理选项卡中点击“初始化仓库”按钮的截图。

仅此而已，您的项目文件夹中就会创建一个名为 .git 的隐藏文件夹，Git 会开始监控文件的变更。是不是简单到让人感动！

顺便创建！.gitignore 文件

项目中，有些文件我们不希望 Git 监控（也不想上传到 GitHub），比如包含密码等个人信息的文件或自动生成的文件。.gitignore 文件就是用来预先指定这些文件的。

在项目的根目录（最顶层）新建一个名为 .gitignore 的文件，然后写入您想要忽略的文件名或文件夹名。例如，可以这样写：

# 操作系统自动生成的文件
.DS_Store

# 存放密码等信息的配置文件
.env

# 安装了大量包的文件夹
node_modules

💡 提示： 一开始不知道该忽略什么很正常。可以搜索“[您使用的技术名称] .gitignore”（例如：Next.js .gitignore），就能找到很多不错的模板。

【第 3 步】记录变更（暂存 & 提交）

好了，从这里开始才是 Git 的精髓所在。我们将把文件的变更作为“保存点”来记录。这个操作分为两个阶段。

  1. 暂存 (Staging): 选择“本次保存要包含的变更”的操作。
  2. 提交 (Commit): 为选中的变更内容附上信息，确定保存点的操作。

如果用搬家来比喻，就是“把行李装进纸箱（暂存）” -> “在纸箱上贴上‘厨房用品’等标签并封箱（提交）”的感觉。

那么，我们来实际操作一下吧。首先，对项目做一些变更。例如，我们来创建一个名为 index.html 的文件。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Git 测试</title>
</head>
<body>
  <h1>你好，Git!</h1>
</body>
</html>

创建并保存文件后，VSCode 的源代码管理图标上会出现一个类似“1”的角标。这是 Git 的通知，表示“有 1 个变更”。

打开源代码管理选项卡，可以看到 index.html 显示在“更改”栏中。

1. 暂存 (git add)

将鼠标光标悬停在有变更的文件上，点击出现的“+”（暂存更改）图标。这样暂存就完成了。这和在终端中输入 git add . 的操作是一样的。

显示在 VSCode 源代码管理视图中，点击已更改文件名旁边的“+”图标以暂存更改的截图。

2. 提交 (git commit)

暂存完成后，文件会移动到“已暂存的更改”栏中。接下来，在顶部的消息框中输入一条能说明“做了什么更改”的消息（例如：首次提交、创建 index.html 等）。

输入消息后，点击“提交”按钮（或对勾图标）。这样保存点就创建完成了！这和在终端中输入 git commit -m "消息" 的操作是一样的。

显示在 VSCode 源代码管理视图中输入提交信息并点击“提交”按钮的截图。

💡 提交信息是写给未来自己的信！
现在可能觉得麻烦，但日后当你想不起“这个变更是什么？”的时候，一条清晰的消息会帮到你。养成写具体信息的习惯吧，比如“添加了〇〇功能”、“修复了〇〇的 bug”。

【第 4 步】上传到 GitHub (git push)

本地电脑上的保存完成后，终于要把它存放到在线保险箱 GitHub 上了。这个操作叫做“推送 (push)”。

1. 在 GitHub 上创建一个空仓库

首先，在 GitHub 网站上创建一个新的仓库（保管场所）。在“Repository name”中输入项目名（例如：my-project），然后点击“Create repository”按钮即可。这时，如果选择“Private”（私有），这个仓库就只有自己能看到。

GitHub 新建仓库的创建界面。输入仓库名称，选择“Private”，然后按下“Create repository”按钮。

2. 从 VSCode 连接到 GitHub 并推送

这里是高潮部分！我们要把本地的保存数据，发送到刚才创建的 GitHub 仓库里。

提交后，源代码管理选项卡上应该会显示一个“发布分支”的按钮。请点击它。

显示在 VSCode 源代码管理选项卡上的“发布分支”按钮。

然后会弹出一个“发布到 GitHub”的选项，选择它。VSCode 会自动找到刚才创建的 GitHub 仓库，选择它……就完成了！

第一次操作时会要求用 GitHub 账户进行认证。浏览器会启动，只需点击允许认证的按钮即可。

🚨 这里是最重要的踩坑点！认证失败
以前可以用密码认证，但现在为了加强安全性，通常使用一种叫做 **PAT (Personal Access Token)** 的特殊密码。如果出现“密码错误”之类的错误，那几乎可以肯定就是需要 PAT 的信号。

创建 PAT 的步骤稍多，最可靠的方法是查看 GitHub 的官方文档。请参考以下链接，创建一个勾选了 repo 和 workflow 权限的令牌，然后用该令牌代替密码粘贴进去试试。

➡️ 管理您的个人访问令牌 - GitHub Docs

一旦认证成功，VSCode 就会记住，之后只需点击一个按钮就能推送了。

【进阶篇】创建分支，安全作业

熟悉 Git 之后，一定要试试“分支 (branch)”。简单来说，分支就是**“用于作业的平行世界”**。

直接在主保存数据（main 分支）上做改动，很容易产生 bug，很危险。因此，在添加新功能或尝试新设计时，应该创建一个新分支，在上面尽情作业。作业完成并确认没有问题后，再将该变更合并到主分支中，这是安全的开发流程。

在 VSCode 中，创建分支也很简单。

  1. 点击左下角状态栏上显示的当前分支名（一开始是 main）。
  2. 选择屏幕上方显示的“+ 创建新分支...”。
  3. 输入新的分支名（例如：feature/add-new-page）并按 Enter 键。
显示从 VSCode 状态栏创建新分支步骤的截图。

仅此而已，就切换到新分支了。之后就和以前一样，编辑文件 → 暂存 → 提交 → 推送（发布分支）即可。只要记住这个流程，您就是一位出色的 Git 用户了！

总结：Git 不可怕，是最强的时光机！

辛苦了！如果按照本文的步骤进行操作，您电脑上的代码应该已经安然无恙地保管在 GitHub 这个安全的地方了。

本次介绍的操作，是使用 Git 和 GitHub 真正基础且最重要的流程。

  • 在工作文件夹中 git init （初始化仓库）
  • 修改文件并 git add （暂存）
  • 附上信息并 git commit （提交）
  • 推送到 GitHub git push （推送）

一开始可能会觉得难，但每天使用，就会像刷牙一样自然而然。Git 是保护您代码、随时可以回到过去状态的最强时光机。即使出错也不要怕，问问 AI，或者用错误信息搜索一下，慢慢地和它成为好朋友吧！

相关模板