手把手教你用VS Code玩转Gitee协作：从环境配置到高效提交

✨点击上方关注☝️，追踪不迷路！

一、前言

在现代软件开发中，版本控制和团队协作是不可或缺的环节。作为国内流行的代码托管平台，Gitee（码云）提供了稳定、高效的代码托管服务；而VS Code作为一款轻量级但功能强大的代码编辑器，深受开发者喜爱。本文将详细介绍如何在VS Code中配置Gitee环境，实现从代码编写到提交的全流程高效协作。

二、环境准备

2.1 安装必要软件

首先，我们需要安装以下软件：

1. VS Code ：前往VS Code官网下载并安装最新版本
2. Git ：前往Git官网下载并安装
3. Gitee账号 ：前往Gitee官网注册账号

2.2 配置Git环境

安装完成后，我们需要配置Git的用户信息：

# 配置用户名
git config --global user.name "你的Gitee用户名"

# 配置邮箱
git config --global user.email "你的Gitee注册邮箱"

# 查看配置是否成功
git config --list

三、VS Code配置Gitee

3.1 安装Gitee相关插件

在VS Code中，我们可以通过安装插件来增强与Gitee的集成：

1. 打开VS Code，点击左侧的扩展图标（或使用快捷键Ctrl+Shift+X）
2. 搜索并安装以下插件：
   • Gitee：官方提供的Gitee集成插件
   • GitLens：增强Git功能的强大插件
   • Chinese (Simplified) Language Pack：中文语言包（可选）

3.2 配置Gitee插件

安装完成后，我们需要配置Gitee插件：

1. 点击VS Code左下角的设置图标，选择"设置"
2. 在搜索框中输入"gitee"，找到Gitee相关设置
3. 点击"编辑 in settings.json"，添加以下配置：

{
  "gitee.username": "你的Gitee用户名",
  "gitee.password": "你的Gitee密码或私人令牌"
}

提示：为了安全起见，建议使用私人令牌而非密码。可以在Gitee的"设置-安全设置-私人令牌"中生成。

四、从Gitee克隆仓库

4.1 获取仓库地址

1. 登录Gitee，进入你想要克隆的仓库页面
2. 点击右侧的"克隆/下载"按钮，复制HTTPS或SSH地址

4.2 在VS Code中克隆

1. 在VS Code中按下Ctrl+Shift+P，输入"Git: Clone"
2. 粘贴之前复制的仓库地址，选择本地保存路径
3. 等待克隆完成后，点击"打开仓库"

五、本地开发与提交

5.1 创建和切换分支

在实际开发中，我们通常会为不同的功能或修复创建单独的分支：

# 创建新分支
git checkout -b feature-new-function

# 查看当前分支
git branch

# 切换回主分支
git checkout main

VS Code也提供了图形化界面来管理分支：点击左下角的分支名称，即可查看和切换分支。

5.2 编辑和保存代码

在VS Code中编辑代码时，Git会自动跟踪文件的变化。你可以通过以下方式查看文件状态：

1. 点击左侧的源代码管理图标（或使用快捷键Ctrl+Shift+G）
2. 在这里你可以看到已修改、已暂存和未跟踪的文件

5.3 暂存和提交

当你完成一段代码的编写后，可以进行暂存和提交：

1. 在源代码管理面板中，选中要暂存的文件，点击旁边的"+"号
2. 在消息框中输入提交信息，描述你的更改
3. 点击对勾图标进行提交

也可以使用Git命令行：

# 暂存所有更改
git add .

# 提交更改
git commit -m "提交信息"

六、推送到Gitee远程仓库

6.1 设置远程仓库

如果是首次推送，需要先设置远程仓库：

# 添加远程仓库
git remote add origin 你的仓库地址

# 查看远程仓库
git remote -v

6.2 推送更改

完成本地提交后，可以将更改推送到Gitee：

1. 在VS Code中，点击源代码管理面板右上角的"..."，选择"推送"
2. 或者使用Git命令行：

# 推送当前分支到远程
git push origin 分支名称

# 设置上游分支（首次推送时）
git push --set-upstream origin 分支名称

七、拉取远程更新

在团队协作中，我们需要定期拉取远程仓库的更新：

1. 在VS Code中，点击源代码管理面板右上角的"..."，选择"拉取"
2. 或者使用Git命令行：

# 拉取远程更新
git pull

八、解决冲突

在多人协作中，代码冲突是不可避免的。当遇到冲突时：

1. VS Code会高亮显示冲突的代码部分
2. 你可以选择接受当前更改、接受传入更改或手动合并
3. 解决完所有冲突后，需要再次暂存和提交

九、实用技巧

9.1 使用GitLens增强功能

GitLens插件提供了许多实用功能：

• 行内 blame 信息：显示每行代码的最后修改人
• 代码历史查看：查看文件或代码块的历史变更
• 比较分支和提交：直观比较不同版本的代码差异

9.2 使用快捷键提高效率

以下是一些常用的Git相关快捷键：

• Ctrl+Shift+G：打开源代码管理面板
• Ctrl+Shift+P + Git: Commit：快速提交
• Ctrl+Shift+P + Git: Push：快速推送

9.3 设置Git自动保存

为了避免忘记保存代码，可以在VS Code中开启自动保存：

1. 点击"文件-自动保存"，或使用快捷键Ctrl+Shift+P + "自动保存"
2. 这样在你编辑代码时，VS Code会自动保存更改

十、总结

通过本文的介绍，相信你已经掌握了在VS Code中使用Gitee进行团队协作的基本流程。从环境配置到代码提交，再到解决冲突，这些技能将帮助你在实际开发中提高效率，更好地与团队成员协作。

记住，版本控制是一种习惯，需要在日常开发中不断实践和优化。希望本文对你有所帮助，祝你在Gitee协作中事半功倍！

---

延伸阅读：

• VS Code官方文档
• Git官方文档
• Gitee帮助中心

最后，创作不易请允许我插播一则自己开发的小程序广告，感兴趣可以访问体验：

【「合图图」产品介绍】

• 主要功能为：本地添加相册图片进行无限长图高清拼接，各种布局拼接等

• 安全：无后台服务无需登录，全程设备本地运行，隐私100%安全；

• 高效：自由布局+实时预览，效果所见即所得；

• 高清：秒生高清拼图，一键保存相册。

• 立即体验 →合图图 或微信小程序搜索「合图图」

如果觉得本文有用，欢迎点个赞👍和收藏⭐支持我吧！