VS Code 中 Git 的使用:从零到一入门教程
前言
在现代软件开发中,版本控制是必不可少的技能。VS Code 作为目前流行的代码编辑器,其内置的 Git 可视化工具让代码管理变得直观和简单。 本文将带你从零开始,跑通'下载安装 -> 环境配置 -> GitHub 关联 -> 提交推送 -> 冲突解决'的全流程。
1. 软件下载与基础配置
1.1 下载地址
- VS Code 官方下载:https://code.visualstudio.com/Download
在 VS Code 中使用 Git 的完整流程,包括软件安装、全局配置、SSH 密钥生成与绑定、项目初始化(新建与克隆)、.gitignore 配置、代码暂存与提交、远程推送与拉取、分支管理、冲突解决以及撤销回退操作。同时推荐了 GitLens、Git Graph 等实用插件,帮助开发者高效管理版本控制。
在现代软件开发中,版本控制是必不可少的技能。VS Code 作为目前流行的代码编辑器,其内置的 Git 可视化工具让代码管理变得直观和简单。 本文将带你从零开始,跑通'下载安装 -> 环境配置 -> GitHub 关联 -> 提交推送 -> 冲突解决'的全流程。
💡 提示:安装 Git 时,依次点击 Next 直到安装完成即可。安装后,按 Win + R 输入 cmd 打开终端,输入 git --version,若能看到版本号说明安装成功。
告诉 Git 你是谁(这会显示在你的每一次代码提交记录中,方便团队认领代码)。在电脑终端或 VS Code 的终端中运行以下命令:
git config --global user.name "你的英文昵称"
git config --global user.email "你的邮箱@example.com"
为了以后每次推送代码不用频繁输密码,建议配置 SSH 密钥。
打开终端,输入以下命令(注意替换成你自己的邮箱):
ssh-keygen -t ed25519 -C "你的邮箱@example.com"
(注:输入命令后连续按三次回车键即可,不需要额外设置密码。)
刚刚的命令在你的电脑上生成了一对密钥。我们需要把公钥的内容复制下来,你可以根据自己的习惯选择以下任意一种方法:
方法一:从文件夹中手动查看(最直观,推荐纯新手)
C:\Users\你的用户名\.ssh\ 文件夹。
Mac 用户:进入 /Users/你的用户名/.ssh/ 文件夹。id_ed25519.pub 的文件,右键选择用记事本或 VS Code 打开它。ssh-ed25519 开头的文本)。
⚠️ 警告:同目录下还有一个没有 .pub 后缀的 id_ed25519 文件,那是你的私钥。私钥就相当于你的银行卡密码,切勿泄露给他人或填到网页上!我们只需要复制带 .pub(Public 公共的)后缀的公钥文件。方法二:终端快捷复制(最快) 如果你觉得找文件夹麻烦,可以直接在刚才的终端里输入以下命令,它会悄悄把公钥内容直接复制到你的鼠标剪贴板里:
clip < ~/.ssh/id_ed25519.pubpbcopy < ~/.ssh/id_ed25519.pub方法三:终端命令查看
也可以在终端输入 cat ~/.ssh/id_ed25519.pub 并回车。终端会直接输出那一长串文本,用鼠标选中这一整段并按 Ctrl+C(或右键)复制即可。
My Laptop 或 公司电脑)。准备工作完成,开始写代码!这里分为两种常见场景:
Ctrl + Shift + G)。F1 或 Ctrl + Shift + P 打开命令面板。Git: Clone 并回车。💡 链接选择提示(新手必看):推荐使用 HTTPS 链接(以 https://github.com… 开头):首次克隆或推送时,VS Code 右下角会弹窗提示'允许登录 GitHub',点击去浏览器授权一下就能一直免密使用了,推荐新手使用这种方式!进阶使用 SSH 链接(以 [email protected]… 开头):如果你按照前文第 2 步配置好了 SSH 密钥,可以使用这种链接,这是企业开发中最常用的标准方式。
写代码时,很多文件是不需要传到 GitHub 上的(比如依赖包、编译产生的临时文件等)。
在项目根目录新建一个名为 .gitignore 的文件,填入你需要忽略的目录或文件,例如:
node_modules/
dist/
.vscode/
.DS_Store
💡 提示:配置好后,Git 就会自动当这些文件不存在,左侧的变动提示里也不会再出现它们,保持代码库的纯净。
在 VS Code 中,代码的状态流转非常直观:工作区 (更改) -> 暂存区 (暂存的更改) -> 本地仓库。
+ 号,文件就会进入'暂存的更改'列表。feat: 完成登录页面布局),然后点击下方的 '提交' 按钮。在 VS Code 中按 Ctrl + ~ 打开集成终端,你可以用以下命令实现完全相同的效果:
# 1. 查看当前哪些文件被修改了(相当于看左侧面板)
git status
# 2. 将所有修改过的文件加入暂存区(相当于点全部的 + 号)
git add .
# 或者只暂存指定文件:
git add index.html
# 3. 提交到本地仓库并备注信息(相当于在输入框打字并点提交)
git commit -m "feat: 完成登录页面布局"
如果你是场景一(本地新建),首次推送需要先关联 GitHub:
git remote add origin 你的 GitHub 仓库链接
git push -u origin main # 首次推送并绑定分支
日常开发中,提交代码后:
只需点击左下角的同步循环图标,或点击 '…' -> 推送(命令行等效于 git push)。
如果是团队协作,或者你在另一台电脑上修改了代码,修改本地代码前必须先拉取云端最新代码。
git pull# 查看所有分支
git branch
# 创建并直接切换到新分支 (极常用)
git checkout -b feature-login
# 切换回主分支
git checkout main
当两个人同时修改了同一行代码并提交时,就会触发冲突。别慌,VS Code 提供了极好的冲突对比高亮界面,代码上方会出现四个选项:
💡 提示:点击选项解决完毕后,无论是用界面还是命令行,都需要重新暂存并提交一次(git add . 然后 git commit -m "解决冲突")。
写错代码或者提交错了怎么办?记住以下几个最常用的回退场景:
还没执行 git add,想直接丢弃工作区的修改。
git restore <文件名> (丢弃所有修改用 git restore .,慎用!)执行了 git add,但还没 commit。
- 号(取消暂存)。git restore --staged <文件名>已经 commit 了,代码不想丢,只是想撤销这条 commit 记录。
git reset --soft HEAD^连提交记录带修改的代码全部清空,彻底回到上一个版本。
git reset --hard HEAD^你的本地代码是正确的,但云端乱了,需要强行同步。
git push origin main -f💡 提示:-f 即 --force(强制)。团队协作绝对不要用;个人项目用起来很爽。
为了让你的 Git 体验直接起飞,强烈推荐在 VS Code 扩展市场安装以下三款插件:
Git: View File History,它会给你展示一个非常清爽直观的时间线界面。VS Code 将原本枯燥的 Git 命令行变成了优雅的点按操作。对于初学者来说,掌握 暂存 (+) -> 提交 (Commit) -> 推送 (Push) 这'三板斧',就已经能应付 80% 的日常开发需求了。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online