网站导航
> 技术文档 > VS Code + Git + GitHub 完全傻瓜式教程_vscode github

VS Code + Git + GitHub 完全傻瓜式教程_vscode github

网友: 技术文档 2025-07-30 11:55:22

VS Code + Git + GitHub 完全傻瓜式教程

在这里插入图片描述

📚 目录

  • 简介
  • 安装配置
  • 基本概念
  • VS Code 连接 GitHub
  • 日常 Git 操作
  • Git 分支管理
  • 团队协作流程
  • 常见问题排查
  • 高级技巧

📖 简介

什么是 Git？

Git 是一个分布式版本控制系统，它可以帮助你跟踪和管理代码的变更。简单来说，它就像是一个时间机器，可以让你：

  • 记录项目历史的每个版本
  • 随时回到之前的任何版本
  • 多人同时协作而不互相干扰
  • 比较不同版本之间的差异

什么是 GitHub？

GitHub 是一个基于 Git 的云服务平台，提供代码托管服务。它可以让你：

  • 将代码存储在云端，随时随地访问
  • 与团队成员协作开发
  • 展示和分享你的项目
  • 贡献开源项目

什么是 VS Code？

Visual Studio Code (VS Code) 是微软开发的一款轻量级但功能强大的代码编辑器。它内置了 Git 支持，让你可以直接在编辑器中进行 Git 操作，无需使用命令行。

🔧 安装配置

1. 安装 VS Code

  1. 访问 VS Code 官网
  2. 下载适合你操作系统的安装包
  3. 运行安装程序，按照提示完成安装

2. 安装 Git

Windows
  1. 访问 Git 官网
  2. 下载安装包并运行
  3. 安装过程中，保持大多数默认选项
  4. 在\"调整你的 PATH 环境\"步骤，选择\"从 Windows 命令提示符使用 Git\"
  5. 在\"配置行尾符号转换\"步骤，选择\"检出为 Windows 风格，提交为 Unix 风格\"
macOS
  1. 打开终端
  2. 输入 git --version，如果没有安装，系统会提示安装
  3. 或者使用 Homebrew 安装：brew install git
Linux

Ubuntu/Debian:

sudo apt updatesudo apt install git

Fedora:

sudo dnf install git

3. 配置 Git

打开终端或 VS Code 的终端（快捷键：Ctrl+`），输入以下命令：

git config --global user.name \"你的名字\"git config --global user.email \"你的邮箱地址\"

这里的邮箱地址应该与你的 GitHub 账号邮箱一致。

4. 创建 GitHub 账号

  1. 访问 GitHub
  2. 点击\"Sign up\"按钮
  3. 填写用户名、邮箱和密码
  4. 按照提示完成注册流程

🧠 基本概念

在开始使用 Git 之前，先了解一些重要概念：

仓库 (Repository)

仓库是 Git 用来存储项目所有文件和历史记录的地方。它可以是本地的（在你的电脑上），也可以是远程的（如托管在 GitHub 上）。

提交 (Commit)

提交是对你项目进行的一次更改的快照。每次提交都有一个唯一的 ID，并包含提交消息，描述这次更改的内容。

分支 (Branch)

分支是项目开发的独立线。默认分支通常称为 main 或 master。创建新分支可以让你在不影响主分支的情况下开发新功能。

暂存区 (Staging Area)

在 Git 中，你需要先将更改添加到暂存区，然后才能提交这些更改。这让你可以控制哪些更改会被包含在下一次提交中。

推送 (Push)

推送是将本地提交发送到远程仓库（如 GitHub）的操作。

拉取 (Pull)

拉取是从远程仓库获取最新更改并合并到你的本地仓库的操作。

克隆 (Clone)

克隆是复制远程仓库到本地计算机的操作，创建一个完整的本地副本。

🔗 VS Code 连接 GitHub

1. 安装 GitHub 扩展

在 VS Code 中安装 GitHub 相关扩展，以获得更好的体验：

  1. 点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
  2. 搜索并安装以下扩展：
    • “GitHub Pull Requests and Issues”
    • “GitLens — Git supercharged”（可选但推荐）

2. 登录 GitHub 账号

  1. 在 VS Code 左下角点击账户图标
  2. 选择\"Sign in to GitHub\"
  3. 按照提示完成授权过程

3. 使用 SSH 密钥（推荐）

使用 SSH 密钥可以避免每次推送代码时都要输入密码。

生成 SSH 密钥
  1. 打开终端
  2. 输入 ssh-keygen -t ed25519 -C \"你的GitHub邮箱\"
  3. 按回车接受默认文件位置
  4. 输入密码短语或直接按回车（不设密码）
将 SSH 密钥添加到 GitHub

  1. 复制 SSH 公钥内容：

    • Windows: type C:\\Users\\你的用户名\\.ssh\\id_ed25519.pub | clip
    • macOS: pbcopy < ~/.ssh/id_ed25519.pub
    • Linux: cat ~/.ssh/id_ed25519.pub（然后手动复制输出内容）

  2. 登录 GitHub

  3. 点击右上角头像，选择\"Settings\"

  4. 在左侧边栏选择\"SSH and GPG keys\"

  5. 点击\"New SSH key\"

  6. 输入标题（如\"我的笔记本\"）

  7. 粘贴公钥内容

  8. 点击\"Add SSH key\"

测试 SSH 连接
ssh -T git@github.com

如果显示\"Hi username! You’ve successfully authenticated…\"，则表示设置成功。

📝 日常 Git 操作

1. 克隆远程仓库

从 GitHub 克隆一个存在的仓库到本地：

  1. 在 GitHub 上找到要克隆的仓库
  2. 点击绿色的\"Code\"按钮
  3. 选择\"SSH\"（如果已配置）或\"HTTPS\"
  4. 复制 URL

然后在 VS Code 中：

  1. 按下 Ctrl+Shift+P 打开命令面板
  2. 输入 “Git: Clone” 并选择
  3. 粘贴复制的 URL
  4. 选择保存仓库的本地文件夹

2. 创建本地仓库并推送到 GitHub

  1. 在 VS Code 中打开一个文件夹
  2. 点击左侧活动栏的源代码管理图标（或按 Ctrl+Shift+G）
  3. 点击\"Initialize Repository\"按钮

在 GitHub 上创建一个新的远程仓库：

  1. 登录 GitHub
  2. 点击右上角加号，选择\"New repository\"
  3. 输入仓库名称，选择是否公开
  4. 不要添加 README 或 .gitignore（因为我们已经有本地仓库）
  5. 点击\"Create repository\"

将本地仓库连接到远程仓库：

  1. 复制 GitHub 提供的远程仓库 URL
  2. 在 VS Code 中，打开命令面板（Ctrl+Shift+P）
  3. 输入 “Git: Add Remote” 并选择
  4. 输入远程名称（通常是 “origin”）
  5. 粘贴复制的 URL

推送本地仓库到 GitHub：

  1. 在源代码管理视图中，点击\"…\"按钮
  2. 选择\"Push to…\"
  3. 选择刚刚添加的远程仓库

3. 基本的 Git 工作流

修改文件

在 VS Code 中编辑文件，做出更改。

暂存更改
  1. 在源代码管理视图中，你会看到已修改的文件
  2. 点击文件名旁边的 “+” 按钮将更改添加到暂存区
    • 或者点击\"所有更改旁边的 “+” 按钮暂存所有更改
提交更改
  1. 在源代码管理视图中，在消息框中输入提交消息
  2. 点击 “✓” 按钮或按 Ctrl+Enter 提交更改
推送更改到 GitHub
  1. 点击状态栏中的同步按钮（↑↓）
  2. 或点击\"…“按钮，选择\"Push”

4. 获取最新更改

当 GitHub 仓库有新的更改时，你需要将它们同步到本地：

  1. 点击状态栏中的同步按钮（↑↓）
  2. 或点击\"…“按钮，选择\"Pull”

🌳 Git 分支管理

1. 创建新分支

  1. 点击状态栏中的分支名称（通常是 “main” 或 “master”）
  2. 选择\"Create new branch…\"
  3. 输入新分支名称，如 “feature/login”
  4. 按回车确认

2. 切换分支

  1. 点击状态栏中的分支名称
  2. 从列表中选择要切换到的分支

3. 合并分支

假设你在 “feature/login” 分支上完成了开发，现在想将其合并到 “main” 分支：

  1. 首先切换到 “main” 分支
  2. 点击\"…“按钮，选择\"Branch”，然后选择\"Merge Branch…\"
  3. 选择 “feature/login” 分支

4. 推送分支到 GitHub

  1. 确保你在要推送的分支上
  2. 点击状态栏中的同步按钮（↑↓）或使用\"Push\"命令

5. 删除分支

  1. 确保你不在要删除的分支上
  2. 点击\"…“按钮，选择\"Branch”，然后选择\"Delete Branch…\"
  3. 选择要删除的分支

👥 团队协作流程

1. Fork 工作流

当你想为不是你创建的项目做贡献时：

  1. 在 GitHub 上点击项目右上角的\"Fork\"按钮
  2. 克隆你 fork 的仓库到本地
  3. 创建一个新分支进行更改
  4. 提交更改并推送到你的 fork
  5. 在 GitHub 上创建一个 Pull Request

2. Pull Request

  1. 在 GitHub 上，导航到你 fork 并推送更改的仓库
  2. 点击\"Compare & pull request\"按钮
  3. 填写 PR 标题和描述
  4. 点击\"Create pull request\"

3. 代码审查

  1. 项目维护者会审查你的代码
  2. 他们可能会要求你进行更改
  3. 你可以在本地进行更改，然后推送到同一分支，PR 会自动更新

4. 处理冲突

当多人同时修改同一文件时，可能会产生冲突：

  1. 拉取最新更改 git pull origin main
  2. 如果出现冲突，VS Code 会显示冲突标记
  3. 编辑文件解决冲突（VS Code 提供了有用的冲突解决界面）
  4. 暂存解决后的文件
  5. 提交更改

❓ 常见问题排查

1. Git 身份验证失败

问题：推送时出现\"Authentication failed\"错误

解决方案：

  • 确认 GitHub 账号密码是否正确
  • 如果使用 HTTPS，考虑使用 SSH 密钥
  • 检查 SSH 密钥是否已添加到 GitHub

2. 合并冲突

问题：合并分支时出现\"Merge conflict\"

解决方案：

  1. 打开有冲突的文件
  2. 查找 <<<<<<<, =======, >>>>>>> 标记
  3. 编辑文件解决冲突
  4. 暂存解决后的文件
  5. 完成合并提交

3. 撤销更改

问题：我想撤销未提交的更改

解决方案：

  1. 在源代码管理视图中，右键点击文件
  2. 选择\"Discard Changes\"

4. 撤销提交

问题：我想撤销最后一次提交

解决方案：

  1. 点击\"…“按钮，选择\"Commit”，然后选择\"Undo Last Commit\"

5. .gitignore 设置

问题：有些文件我不想纳入版本控制

解决方案：

  1. 在项目根目录创建 .gitignore 文件
  2. 添加你想忽略的文件或文件夹模式，例如：
# 忽略编译输出/build//dist/# 忽略依赖/node_modules/# 忽略日志文件*.log# 忽略环境配置.env.env.local# 忽略编辑器配置.vscode/.idea/

🚀 高级技巧

1. Git 历史查看

  1. 在 VS Code 中，右键点击文件
  2. 选择\"Open Timeline\"查看文件历史
  3. 或者使用 GitLens 扩展获取更强大的历史查看功能

2. 比较版本

  1. 右键点击文件，选择\"Select for Compare\"
  2. 右键点击另一个文件或同一文件的不同版本，选择\"Compare with Selected\"

3. 创建和应用补丁

创建补丁：

git diff > changes.patch

应用补丁：

git apply changes.patch

4. 使用标签管理版本

创建标签：

  1. 点击\"…“按钮，选择\"Tag”
  2. 选择\"Create Tag…\"
  3. 输入标签名（如 “v1.0.0”）
  4. 输入标签消息

推送标签：

git push origin --tags

5. 使用 .gitignore 文件模板

GitHub 提供了常见项目类型的 .gitignore 模板：

  1. 在 GitHub 上创建新仓库时，可以选择添加 .gitignore 文件
  2. 选择适合你项目的模板（如 Python, Node, etc.）

6. 使用 VS Code 的 Git Graph 扩展

  1. 安装 “Git Graph” 扩展
  2. 点击左侧活动栏的 Git Graph 图标
  3. 查看项目的分支和提交历史图形化展示

📈 总结

恭喜！你现在已经了解了如何使用 VS Code 结合 Git 和 GitHub 进行代码版本控制和协作。这些工具组合在一起，提供了一个强大的开发环境，可以帮助你更高效地管理项目。

记住，Git 和 GitHub 的学习是一个渐进的过程。随着你的经验积累，你会逐渐掌握更多高级技巧。最重要的是养成良好的版本控制习惯：

  • 经常提交小的、有意义的更改
  • 编写清晰的提交消息
  • 定期推送和拉取更改
  • 使用分支进行功能开发
  • 积极参与代码审查

希望这个教程对你有所帮助！如果你有任何问题，可以查阅 Git 官方文档、GitHub 帮助文档 或 VS Code 文档。

网络标签：

相关问题