EP08. “不打指令也能用：GitHub Desktop 与 VS Code 的 Git 图形界面”
🔒 登录后可标记已读- 不习惯黑底白字的终端？GitHub Desktop 和 VS Code 都把 add、commit、push、分支做成按钮，点几下就完成
- 图形界面背后跑的还是同一套 Git 指令，前面几篇学的概念（暂存区、分支、push/pull）全部通用
- GitHub Desktop 免费，支持 Windows 和 macOS，最适合只想「存档 + 上传」的非工程师
- VS Code 适合本来就在里面写 HTML/CSS/PHP 的人，改代码和 commit 在同一个窗口完成
适用版本
- GitHub Desktop、VS Code 界面以 2026-09 为准，按钮位置随版本可能略有不同
重点内容
指令 vs 图形界面对照
| 动作 | 指令 | GitHub Desktop | VS Code |
|---|---|---|---|
| 下载仓库 | git clone | File → Clone repository | 命令面板 Git: Clone |
| 看改动 | git status / git diff | 左侧 Changes 分页 | Source Control 面板（Ctrl+Shift+G） |
| 暂存 | git add | 勾选文件前面的方框 | 文件旁的 + |
| 存档 | git commit -m | 左下填 Summary → Commit to main | 上方输入框写说明 → Commit |
| 上传 | git push | 上方 Push origin | Sync Changes 或 ... → Push |
| 下载新改动 | git pull / git fetch | 上方 Fetch origin → Pull origin | Sync Changes 或 ... → Pull |
| 新分支 | git switch -c | Current Branch → New Branch | 左下角分支名 → Create new branch |
| 切换分支 | git switch | Current Branch 下拉选单 | 左下角分支名 |
| 看历史 | git log | History 分页 | Source Control Graph / Timeline |
GitHub Desktop 上手
安装与登录：
- 到 desktop.github.com 下载安装
- File → Options → Accounts（macOS 是 GitHub Desktop → Settings → Accounts）→ Sign in，用浏览器登录 GitHub
- 在 Git 那一页确认名字和 Email（等于
git config user.name/user.email）
日常流程：
- 在 VS Code 或其他编辑器改文件
- 回到 GitHub Desktop，左侧 Changes 会自动列出改过的文件，右边显示逐行差异（绿色新增、红色删除）
- 取消勾选这次不想存的文件
- 左下 Summary 写说明（必填），Description 可写详细内容
- 按 Commit to main
- 上方按 Push origin 推上 GitHub
把现有文件夹变成仓库并发布：
- File → Add local repository 选文件夹；如果还不是 Git 仓库，它会提示 create a repository
- 建好后上方按 Publish repository，选 Public 或 Private（默认勾选 Keep this code private）
分支与 Pull Request：
- Current Branch → New Branch，输入名字
- commit 之后按 Publish branch
- 按 Preview Pull Request 或 Branch → Create Pull Request，会打开 GitHub 网页继续填写
💡 在 Changes 里对某个文件按右键 → Discard changes，等于 git restore；History 里对某个 commit 按右键 → Revert changes in commit，等于 git revert。
VS Code 的 Source Control
- 左边栏的分支图标（Source Control，快捷键
Ctrl+Shift+G） - 打开的文件夹是 Git 仓库，就会列出 Changes；不是的话会出现 Initialize Repository 按钮（等于
git init）
日常流程：
- 改完文件，Source Control 列出改动，点文件可以看左右对照的差异
- 按文件旁的 + 放进 Staged Changes（整批暂存按 Changes 标题旁的 +）
- 上方输入框写 commit 说明，按 Commit
- 按 Sync Changes（先 pull 再 push）
💡 没有先暂存就直接按 Commit，VS Code 会问要不要把所有改动一起 commit，选 Yes 等于 git add . + commit。
其他好用的地方：
- 左下角状态栏显示目前分支，点它可以切换或建立分支
- 编辑器行号旁的颜色条：绿色 = 新增、蓝色 = 修改、红色三角 = 删除，点一下看改了什么
- 合并冲突时，文件上方会出现 Accept Current Change / Accept Incoming Change / Accept Both Changes 按钮，或打开 Merge Editor 左右对照处理
- 命令面板（
Ctrl+Shift+P）打Git:可以找到所有 Git 功能
该用哪一个？
| 你是 | 推荐 |
|---|---|
| 只想备份文件、偶尔上传，不写代码 | GitHub Desktop |
| 用 VS Code 改主题、写 HTML/CSS/JS | VS Code 内置 Source Control |
| 常要处理复杂情况（reflog、rebase、救文件） | 学会指令，图形界面当辅助 |
📌 图形界面遇到怪问题（例如按钮灰掉、显示错误），可以开终端打 git status 看真正的状态，错误讯息通常更清楚。
学完你会
- ✅ 用 GitHub Desktop 完成 clone、commit、push、分支、PR
- ✅ 用 VS Code Source Control 暂存、commit、同步
- ✅ 把图形界面按钮对应回 Git 指令
常见错误
- ❌ GitHub Desktop 按了 Commit 就以为上传了：还要按 Push origin。
- ❌ Summary 没填：GitHub Desktop 的 Commit 按钮会是灰色的。
- ❌ 在 VS Code 打开的是上层文件夹：Source Control 找不到仓库，要打开含
.git的那一层。 - ❌ Discard changes 按太快：跟
git restore一样，没 commit 的改动救不回来。 - ❌ 两个工具同时开同一个仓库一起操作：状态可能不同步，一次用一个就好。
Sources
官方文档：