乐于分享
好东西不私藏
当前位置：夜雨聆风 > 技术教程 > 软件教程 > VSCode 使用 Git 和插件完全指南

VSCode 使用 Git 和插件完全指南

当前时间： 2026-02-12 21:02:26 分类：软件教程 评论(0)

VSCode 使用 Git 和插件完全指南

目录

  1. Git 基础配置

  2. VSCode 内置 Git 功能

  3. 常用 Git 操作

  4. 必备 Git 插件

  5. 高级技巧

  6. 常见问题解决

Git 基础配置

1. 安装 Git

Windows:

  • 下载 Git for Windows

  • 安装时选择 “Git from the command line and also from 3rd-party software”

  • 验证安装: 打开终端输入 git --version

Mac:

# 使用 Homebrewbrew install git# 或使用 Xcode Command Line Toolsxcode-select --install

Linux:

# Ubuntu/Debiansudo apt-get install git# Fedorasudo dnf install git

2. 配置 Git 用户信息

# 设置全局用户名和邮箱git config --global user.name "你的名字"git config --global user.email "your.email@example.com"# 查看配置git config --list# 设置默认分支名称为 maingit config --global init.defaultBranch main# 配置换行符处理（Windows 推荐）git config --global core.autocrlf true# 配置换行符处理（Mac/Linux 推荐）git config --global core.autocrlf input

3. VSCode 中配置 Git

打开 VSCode 设置 (Ctrl+, 或 Cmd+,)，搜索 “git”：

{// Git 可执行文件路径（通常自动检测）"git.path": "C:\\Program Files\\Git\\cmd\\git.exe",// 启用自动获取"git.autofetch": true,// 自动获取间隔（秒）"git.autofetchPeriod": 180,// 启用智能提交"git.enableSmartCommit": true,// 确认同步"git.confirmSync": false,// 显示内联差异"git.decorations.enabled": true}

VSCode 内置 Git 功能

1. 源代码管理面板

打开方式:

  • 快捷键: Ctrl+Shift+G (Windows/Linux) 或 Cmd+Shift+G (Mac)

  • 点击左侧活动栏的源代码管理图标

面板功能:

  • 更改 (Changes): 显示已修改但未暂存的文件

  • 暂存的更改 (Staged Changes): 显示已暂存待提交的文件

  • 合并更改 (Merge Changes): 冲突解决时显示

2. 文件状态指示器

VSCode 在文件资源管理器中用不同颜色标记文件状态:

  • 绿色 (U): 未跟踪的新文件

  • 黄色 (M): 已修改的文件

  • 红色 (D): 已删除的文件

  • 蓝色 (A): 已添加到暂存区的文件

  • 灰色 (I): 被 .gitignore 忽略的文件

3. 编辑器内 Git 功能

行内差异显示:

  • 编辑器左侧的装订线显示更改:

    • 绿色条: 新增的行

    • 蓝色条: 修改的行

    • 红色三角: 删除的行

悬停查看差异:

  • 将鼠标悬停在装订线的颜色条上

  • 可以看到原始内容和当前内容的对比

  • 可以快速还原更改

常用 Git 操作

1. 初始化仓库

方法一: 使用命令面板

  1. 按 Ctrl+Shift+P (或 Cmd+Shift+P)

  2. 输入 “Git: Initialize Repository”

  3. 选择要初始化的文件夹

方法二: 使用终端

git init

2. 克隆仓库

方法一: 使用命令面板

  1. 按 Ctrl+Shift+P

  2. 输入 “Git: Clone”

  3. 输入仓库 URL

  4. 选择本地保存位置

方法二: 使用终端

git clone https://github.com/username/repository.git

克隆私有仓库 (SSH):

# 首先配置 SSH 密钥ssh-keygen -t ed25519 -C"your.email@example.com"# 将公钥添加到 GitHub/GitLabcat ~/.ssh/id_ed25519.pub# 克隆git clone git@github.com:username/repository.git

3. 暂存和提交更改

暂存文件:

  • 在源代码管理面板中，点击文件旁的 + 图标

  • 或右键文件选择 “Stage Changes”

  • 快捷键: 在文件上按 Ctrl+Enter

暂存所有更改:

  • 点击 “更改” 标题旁的 + 图标

取消暂存:

  • 点击已暂存文件旁的 - 图标

提交更改:

  1. 在源代码管理面板顶部的消息框中输入提交信息

  2. 按 Ctrl+Enter 或点击 ✓ 图标提交

  3. 或使用命令面板: “Git: Commit”

提交最佳实践:

# 好的提交信息格式feat: 添加用户登录功能fix: 修复购物车计算错误docs: 更新 README 文档style: 格式化代码refactor: 重构用户服务test: 添加单元测试chore: 更新依赖包

4. 查看更改和历史

查看文件差异:

  • 在源代码管理面板中点击文件

  • 会打开差异视图，左侧显示原始内容，右侧显示当前内容

查看提交历史:

  • 使用命令面板: “Git: View History”

  • 或安装 Git History 插件获得更好的体验

查看文件历史:

  • 右键文件 → “Git: View File History”

5. 分支管理

创建分支:

  1. 点击左下角的分支名称

  2. 选择 “Create new branch”

  3. 输入分支名称

切换分支:

  1. 点击左下角的分支名称

  2. 选择要切换的分支

使用终端:

# 创建并切换到新分支git checkout -b feature/new-feature# 切换分支git checkout main# 查看所有分支git branch -a# 删除本地分支git branch -d feature/old-feature# 强制删除git branch -D feature/old-feature

6. 推送和拉取

推送到远程:

  • 使用命令面板: “Git: Push”

  • 或点击状态栏的同步图标 (↑↓)

  • 快捷键: Ctrl+Shift+P → “Git: Push”

拉取远程更改:

  • 使用命令面板: “Git: Pull”

  • 或点击状态栏的同步图标

同步 (拉取 + 推送):

  • 点击状态栏的同步图标

  • 或使用命令: “Git: Sync”

终端命令:

# 推送当前分支git push# 推送并设置上游分支git push -u origin feature/new-feature# 拉取git pull# 拉取并变基git pull --rebase# 获取远程更改但不合并git fetch

7. 合并和变基

合并分支:

  1. 切换到目标分支 (如 main)

  2. 命令面板: “Git: Merge Branch”

  3. 选择要合并的分支

变基:

# 将当前分支变基到 maingit rebase main# 交互式变基（整理提交历史）git rebase -i HEAD~3

解决冲突:

  1. VSCode 会自动检测冲突文件

  2. 打开冲突文件，会看到冲突标记:

<<<<<<< HEAD当前分支的内容=======合并分支的内容>>>>>>> feature-branch

  1. VSCode 提供快速操作按钮:

    • “Accept Current Change” (接受当前更改)

    • “Accept Incoming Change” (接受传入更改)

    • “Accept Both Changes” (接受两者)

    • “Compare Changes” (比较更改)

  2. 解决所有冲突后，暂存文件并提交

8. 撤销和重置

撤销工作区更改:

  • 右键文件 → “Discard Changes”

  • 或点击文件旁的撤销图标

撤销暂存:

  • 点击已暂存文件旁的 - 图标

修改最后一次提交:

# 修改提交信息git commit --amend -m "新的提交信息"# 添加遗漏的文件到最后一次提交git add forgotten-file.txtgit commit --amend --no-edit

重置提交:

# 软重置（保留更改在工作区）git reset --soft HEAD~1# 混合重置（保留更改但取消暂存）git reset HEAD~1# 硬重置（丢弃所有更改）git reset --hard HEAD~1

9. 储藏 (Stash)

储藏更改:

  • 命令面板: “Git: Stash”

  • 输入储藏描述

应用储藏:

  • 命令面板: “Git: Apply Stash”

  • 选择要应用的储藏

终端命令:

# 储藏当前更改git stash# 储藏并添加描述git stash save "工作进行中的功能"# 查看储藏列表git stash list# 应用最新储藏git stash apply# 应用并删除储藏git stash pop# 删除储藏git stash drop stash@{0}# 清空所有储藏git stash clear

必备 Git 插件

1. GitLens — Git supercharged

功能:

  • 显示每行代码的作者和提交信息 (Git Blame)

  • 强大的提交历史浏览

  • 文件历史和比较

  • 分支比较

  • 代码作者统计

安装:

扩展 ID: eamodio.gitlens

常用功能:

  • 行内 Blame: 在当前行末尾显示提交信息

  • 文件历史: 右键文件 → “Open File History”

  • 比较分支: 命令面板 → “GitLens: Compare References”

  • 搜索提交: 命令面板 → “GitLens: Search Commits”

推荐配置:

{  "gitlens.currentLine.enabled": true,  "gitlens.hovers.currentLine.over": "line",  "gitlens.codeLens.enabled": true,  "gitlens.codeLens.authors.enabled": true,  "gitlens.codeLens.recentChange.enabled": true}

2. Git History

功能:

  • 可视化查看 Git 日志

  • 查看文件历史

  • 比较分支、提交、文件

  • 查看提交详情

安装:

扩展 ID: donjayamanne.githistory

使用:

  • 命令面板: “Git: View History”

  • 右键文件: “Git: View File History”

  • 右键行: “Git: View Line History”

3. Git Graph

功能:

  • 图形化显示 Git 仓库

  • 可视化分支结构

  • 执行 Git 操作（合并、变基、检出等）

  • 查看提交详情

安装:

扩展 ID: mhutchie.git-graph

使用:

  • 点击状态栏的 “Git Graph” 图标

  • 或命令面板: “Git Graph: View Git Graph”

推荐配置:

{  "git-graph.showStatusBarItem": true,  "git-graph.date.format": "ISO Date & Time",  "git-graph.showUncommittedChanges": true}

4. GitKraken (可选，独立应用)

虽然不是 VSCode 插件，但 GitKraken 是一个强大的 Git GUI 工具:

  • 直观的可视化界面

  • 拖放式分支管理

  • 内置合并冲突编辑器

  • 支持 GitHub/GitLab/Bitbucket 集成

5. GitHub Pull Requests and Issues

功能:

  • 在 VSCode 中管理 GitHub PR

  • 查看和创建 Issues

  • 代码审查

  • PR 评论和讨论

安装:

扩展 ID: GitHub.vscode-pull-request-github

使用:

  1. 登录 GitHub 账号

  2. 侧边栏会出现 GitHub 图标

  3. 可以查看、创建、审查 PR

6. GitLab Workflow

功能:

  • GitLab 集成

  • 管理 Merge Requests

  • 查看 CI/CD 管道

  • 创建和查看 Issues

安装:

扩展 ID: GitLab.gitlab-workflow

7. Git Blame

功能:

  • 轻量级的 Git Blame 工具

  • 显示当前行的提交信息

  • 快速查看作者和时间

安装:

扩展 ID: waderyan.gitblame

8. Conventional Commits

功能:

  • 帮助编写规范的提交信息

  • 提供提交类型提示

  • 符合 Conventional Commits 规范

安装:

扩展 ID: vivaxy.vscode-conventional-commits

使用:

  • 命令面板: “Conventional Commits”

  • 按照提示选择类型、范围、描述

高级技巧

1. .gitignore 配置

创建 .gitignore 文件忽略不需要版本控制的文件:

# 依赖目录node_modules/vendor/__pycache__/# 构建输出dist/build/*.exe*.dll*.so# 环境变量.env.env.local.env.*.local# IDE 配置.vscode/.idea/*.swp*.swo*~# 日志文件*.loglogs/# 操作系统文件.DS_StoreThumbs.db# 临时文件*.tmp*.temp

VSCode 插件推荐:

  • gitignore: 自动生成 .gitignore 文件

    扩展 ID: codezombiech.gitignore

2. Git Hooks

在 .git/hooks/ 目录下创建钩子脚本:

pre-commit (提交前检查):

#!/bin/sh# 运行代码检查npm run lintif [ $? -ne 0 ]; then  echo "代码检查失败，请修复后再提交"  exit 1fi

使用 Husky 管理 Hooks:

# 安装 Huskynpm install husky --save-dev# 初始化npx husky install# 添加 pre-commit hooknpx husky add .husky/pre-commit "npm run lint"

3. Git 别名

在 .gitconfig 中添加别名:

git config --global alias.co checkoutgit config --global alias.br branchgit config --global alias.ci commitgit config --global alias.st statusgit config --global alias.unstage 'reset HEAD --'git config --global alias.last 'log -1 HEAD'git config --global alias.visual 'log --oneline --graph --decorate --all'

4. 子模块管理

# 添加子模块git submodule add https://github.com/user/repo.git path/to/submodule# 克隆包含子模块的仓库git clone --recursive https://github.com/user/repo.git# 更新子模块git submodule update --init --recursive# 拉取子模块最新更改git submodule update --remote

5. 工作区管理

多根工作区:

  1. 文件 → 将文件夹添加到工作区

  2. 可以同时管理多个项目

  3. 每个项目可以有独立的 Git 仓库

工作区配置文件 (.code-workspace):

{  "folders": [    {      "path": "frontend"    },    {      "path": "backend"    }  ],  "settings": {    "git.autofetch": true  }}

6. 差异工具配置

配置外部差异工具:

# 使用 VSCode 作为差异工具git config --global diff.tool vscodegit config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'# 使用 VSCode 作为合并工具git config --global merge.tool vscodegit config --global mergetool.vscode.cmd 'code --wait $MERGED'

7. 大文件处理 (Git LFS)

# 安装 Git LFSgit lfs install# 跟踪大文件git lfs track "*.psd"git lfs track "*.mp4"# 查看跟踪的文件git lfs ls-files# 提交 .gitattributesgit add .gitattributesgit commit -m "配置 Git LFS"

8. 搜索和过滤

搜索提交:

# 搜索提交信息git log --grep="关键词"# 搜索代码更改git log -S"函数名"# 搜索特定作者git log --author="作者名"# 搜索特定时间范围git log --since="2024-01-01" --until="2024-12-31"

在 VSCode 中:

  • 使用 GitLens 的搜索功能

  • 命令面板: “GitLens: Search Commits”

常见问题解决

1. 认证问题

HTTPS 认证:

# Windows: 使用凭据管理器git config --global credential.helper wincred# Mac: 使用钥匙串git config --global credential.helper osxkeychain# Linux: 缓存凭据git config --global credential.helper cachegit config --global credential.helper 'cache --timeout=3600'

SSH 认证:

# 生成 SSH 密钥ssh-keygen -t ed25519 -C "your.email@example.com"# 启动 ssh-agenteval "$(ssh-agent -s)"# 添加密钥ssh-add ~/.ssh/id_ed25519# 测试连接ssh -T git@github.com

2. 行尾符问题

# Windows 用户git config --global core.autocrlf true# Mac/Linux 用户git config --global core.autocrlf input# 禁用自动转换git config --global core.autocrlf false

3. 中文文件名显示问题

# 解决中文文件名显示为数字的问题git config --global core.quotepath false

4. 撤销已推送的提交

# 方法一: Revert（推荐，创建新提交）git revert HEADgit push# 方法二: Reset（危险，重写历史）git reset --hard HEAD~1git push --force

5. 清理未跟踪的文件

# 查看将被删除的文件git clean -n# 删除未跟踪的文件git clean -f# 删除未跟踪的文件和目录git clean -fd# 包括被忽略的文件git clean -fdx

6. 合并冲突解决策略

# 使用当前分支的版本git checkout --ours file.txt# 使用合并分支的版本git checkout --theirs file.txt# 中止合并git merge --abort# 中止变基git rebase --abort

7. 恢复已删除的分支

# 查看引用日志git reflog# 恢复分支git checkout -b recovered-branch <commit-hash>

8. 减小仓库大小

# 清理和优化git gc --aggressive --prune=now# 查看大文件git rev-list --objects --all | \  git cat-file --batch-check='%(objecttype) %(objectname) %(objectsize) %(rest)' | \  sed -n 's/^blob //p' | \  sort --numeric-sort --key=2 | \  tail -n 10# 从历史中删除大文件git filter-branch --tree-filter 'rm -f path/to/large/file' HEAD

9. VSCode Git 不工作

检查步骤:

  1. 确认 Git 已安装: git --version

  2. 检查 VSCode 设置中的 Git 路径

  3. 重启 VSCode

  4. 检查输出面板的 Git 日志

  5. 禁用可能冲突的插件

重置 Git 配置:

# 查看当前配置git config --list# 重置特定配置git config --global --unset user.namegit config --global --unset user.email

10. 性能优化

# 启用文件系统监视器git config --global core.fsmonitor true# 启用并行索引git config --global index.threads true# 启用提交图git config --global core.commitGraph truegit config --global gc.writeCommitGraph true# 增加缓冲区大小git config --global http.postBuffer 524288000

最佳实践

1. 提交规范

  • 频繁提交: 小步提交，每个提交只做一件事

  • 有意义的提交信息: 清楚描述做了什么和为什么

  • 提交前检查: 使用 git diff 检查更改

  • 避免提交敏感信息: 密码、密钥、个人信息

2. 分支策略

Git Flow:

  • main: 生产环境代码

  • develop: 开发分支

  • feature/*: 功能分支

  • hotfix/*: 紧急修复分支

  • release/*: 发布分支

GitHub Flow (简化版):

  • main: 主分支，始终可部署

  • feature/*: 功能分支，完成后合并到 main

3. 代码审查

  • 使用 Pull Request / Merge Request

  • 小批量提交，便于审查

  • 添加详细的 PR 描述

  • 及时响应审查意见

4. 安全建议

  • 不要提交敏感信息

  • 使用 .gitignore 排除配置文件

  • 使用环境变量管理密钥

  • 定期更新依赖

  • 启用双因素认证

5. 团队协作

  • 统一代码风格（使用 ESLint、Prettier）

  • 编写清晰的 README

  • 使用 Issue 跟踪任务

  • 定期同步远程分支

  • 沟通重要更改

快捷键速查表

Windows/Linux

操作 快捷键
打开源代码管理 Ctrl+Shift+G
提交 Ctrl+Enter
刷新 Ctrl+R
打开命令面板 Ctrl+Shift+P
打开终端 Ctrl+ `
查看差异 点击文件
暂存文件 Ctrl+Enter (在文件上)

Mac

操作 快捷键
打开源代码管理 Cmd+Shift+G
提交 Cmd+Enter
刷新 Cmd+R
打开命令面板 Cmd+Shift+P
打开终端 Ctrl+ `

AD：【资源若失效或者不可用，请留言评论或加老夜微信 al_tmen】>>点此前往<<
本站文章均为手工撰写未经允许谢绝转载：夜雨聆风 » VSCode 使用 Git 和插件完全指南
xiaoqiang, wang

wang

猜你喜欢

评论 抢沙发

取消

9 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮