ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

VSCode与Gitee联动实操:从安装配置到代码推送完整指南

2026/9/14 20:11:30 拓冰建站 浏览量
VSCode与Gitee联动实操:从安装配置到代码推送完整指南 最近项目组同事问我最多的一句话就是我在 VSCode 里写好的代码要怎么才能放到 Gitee 上其实这个需求特别普遍很多刚学编程的朋友本地代码写了一堆却不知道如何交给“远程仓库”管理结果就是硬盘里全是 final、final2、最终版3。这篇文章我不讲虚的就按我实际操作的顺序把 VSCode 和 Gitee 的完整链路走一遍从安装工具、配置 Git、创建远程仓库到把代码推上库每一步都写得足够细适合零基础直接照着做也适合想理顺 Git 工作流的人查漏补缺。1. 为什么推荐 VSCode 加 Gitee 这套组合1.1 VSCode 解决的是“怎么写代码”的问题VSCode 本质上是一个代码编辑器但它又不是普通的编辑器。免费、开源、插件生态庞大这些都对但更关键的是它把“编辑代码”和“管理代码”这两件事放到了同一个界面里。左侧有源代码管理面板底部有集成终端装好 Git 插件后需要敲命令的地方可以直接在编辑器里完成不需要来回切换窗口。对于新手来说界面不吓人语法高亮、代码提示开箱即用配合插件之后几乎能覆盖所有主流语言的开发需求。我自己的体验是很多人第一次用 VSCode 是因为装 Python 或 C/C 环境后来逐渐把日常开发都搬进来了。原因很简单它就是够快、够轻、够灵活。用顺手之后再去看其他重型 IDE反而会觉得启动慢、内存高。当然这不代表 VSCode 能替代所有工具复杂大型项目里 IDE 依然有优势但作为日常主力编辑器它完全能打。1.2 Gitee 解决的是“代码丢不了、改不坏”的问题Gitee 是国内团队做的代码托管平台你可以把它理解成一个存代码的“云端硬盘”但它比普通网盘强的地方在于它记录每一次修改的历史可以随时回退到任意版本多人协作时每个人改动哪里都有记录不用再把代码压缩包传来传去代码放在远程仓库里本地电脑出问题也不会丢。为什么选 Gitee 而不是其他平台几个很实际的理由访问速度快中文界面友好私有仓库免费还内置了 Issue、Pull Request、流水线、Pages 静态托管等功能。尤其对国内新手来说不用跟复杂的网络环境较劲注册一个账号就能开干。这套操作练熟之后换成其他 Git 托管平台流程几乎一模一样。2. 先把工具装好VSCode 和 Git 一个都不能少2.1 VSCode 下载安装时的几个关键选项VSCode 官方下载地址是 code.visualstudio.com认准官网即可不要在第三方下载站随便下我以前就见过很多“全家桶捆绑安装”的坑。下载时注意选对系统版本Windows 用户一般选 User Installer 64 位版本下载体积不大安装速度也很快。安装过程中有几个选项容易忽略但实际很关键。安装向导走到“选择附加任务”那一步时建议勾上“添加到 PATH”和“通过 Code 打开”这两项。勾了之后你以后可以在任何命令行目录里直接输入 code . 打开当前文件夹右键菜单里也会出现“Open with Code”用起来非常顺手。如果当初没勾也不用重装手动把 VSCode 安装目录加入系统环境变量就能达到同样效果不过麻烦一点。装完之后按 WinR 输入 cmd 打开终端执行 code --version如果能输出版本号说明安装成功且 PATH 配置成功。如果提示“不是内部或外部命令”多半是 PATH 问题先按前面说的检查一下。2.2 Git 安装与配置时的隐藏细节VSCode 自己不能直接管理版本它只是调用 Git所以必须先单独安装 Git。下载地址是 git-scm.comWindows 版直接下一步安装即可。不过有几个页面不要无脑下一步稍微看一眼。第一安装向导选择默认编辑器时建议选“Visual Studio Code”而不是 Vim这样后面 Git 需要输入提交信息时会直接打开 VSCode比较符合习惯。第二调整 PATH 环境那页选默认的“Git from the command line and also from 3rd-party software”就行保证 Git 命令可以在各类终端里直接用。第三换行符处理那页Windows 用户选第一项“Checkout Windows-style, commit Unix-style line endings”这是最不容易出问题的方式。安装完成后打开任意终端输入 git --version能输出类似 git version 2.4x.x 的结果就说明安装成功。这一步是后面所有操作的基石命令行工具都装好VSCode 才能把 Git 功能带起来。2.3 VSCode 汉化与装插件的小习惯新装好的 VSCode 是英文界面对英文不太熟练的朋友第一反应是汉化。操作很简单左侧扩展图标搜索 Chinese找到“Chinese (Simplified) Language Pack”这个官方简体中文语言包点击 Install装完后右下角会提示切换语言重启一下 VSCode 就是中文界面了。不过我想多说一句插件够用就好别急着装一大堆。很多人拿到 VSCode 先装二十个插件结果启动变慢、界面拥挤、功能互相冲突。我的建议是先装必备的几个边用边加。到了后面章节我会列一份我常用插件清单给大家做一个参考。3. Gitee 仓库创建与本地身份配置3.1 Gitee 注册与仓库参数怎么选去 gitee.com 注册账号流程不复杂手机号验证就行。登录后点右上角“”选择“新建仓库”这里需要填写几个关键字段。仓库名称是必填项也是远程仓库路径的一部分比如名字叫 my-project那么仓库地址就是 gitee.com/你的用户名/my-project。路径也一样通常跟仓库名保持一致。仓库介绍可以留空也可以写一句项目说明这个会显示在仓库头部建议填写。接着是“开源”还是“私有”私有仓库默认只有自己和邀请的成员能看Gitee 的私有仓库免费平时练习或个人代码建议选私有避免把半成品暴露在公网。开源仓库任何人都能看适合想分享源码的情况。再往下有“初始化仓库”几个选项是否添加 README 文件、是否添加 .gitignore 模板、是否选择开源许可证。这里有个容易踩的坑如果本地已经有代码就不要再勾选“初始化仓库”的 README 和 .gitignore否则远程仓库和本地历史不一致第一次推送会撞车。如果仓库完全从空开始勾上 README 没问题。开源许可证按需选不清楚含义就选不使用或 MITMIT 是最宽松的许可证意思是别人可以用你的代码但出了问题你不承担责任。3.2 配置 Git 用户名和邮箱别用错身份提交在本地 Git 提交代码时每次提交都会记录作者信息。如果不配置Git 会拿系统默认值去提交或者直接报错。打开终端执行下面两条命令git config --global user.name 你的名字 git config --global user.email 你的邮箱这里的名字和邮箱建议跟 Gitee 账号保持关联。虽然 Git 并不会强制校验邮箱和账号是否一致但如果你用了一个乱填的邮箱提交记录里显示的作者信息就不是你的 Gitee 账号之后想要统计、认领代码都会麻烦。检查配置是否生效执行 git config --global --list能列出刚才设置的内容。如果以后换电脑或在别的项目里想用不同身份可以去掉 --global在项目目录里单独配置影响范围只限于当前项目。3.3 生成 SSH 密钥并把公钥交给 Gitee本地 Git 要和 Gitee 通信有两种方式HTTPS 和 SSH。HTTPS 每次推送都要输账号密码虽然可以记住但总是麻烦SSH 配置一次之后几乎全程免密效率高很多所以推荐大家用 SSH 方式。打开终端执行ssh-keygen -t rsa -b 4096 -C 你的邮箱这里 -t rsa 指定算法-b 4096 指定密钥长度-C 只是一个备注信息写上邮箱方便识别。执行之后会提示设置保存路径和密码路径默认就行一般是用户目录下的 .ssh/id_rsa密码建议直接留空按两次回车跳过不然每次操作 Git 都要输入密钥密码反而麻烦。生成完成后查看公钥内容cat ~/.ssh/id_rsa.pubWindows 下如果 cat 命令不好使也可以打开文件资源管理器进入 C:\Users\你的用户名.ssh用记事本打开 id_rsa.pub 文件。把里面的内容完整复制然后登录 Gitee进入“设置”→“安全设置”→“SSH 公钥”标题随便填比如“我的电脑”公钥框粘贴刚才复制的内容保存。配置完成后在终端执行连接测试ssh -T gitgitee.com首次连接会提示确认指纹输入 yes 回车。看到类似“Hi 你的用户名! Youve successfully authenticated”的提示就说明 SSH 通道已经通了可以继续下一步。4. 第一次推送代码从仓库到本地的完整实操4.1 情景一远程仓库是空的直接克隆下来如果你创建仓库时勾选了“初始化仓库”或者远程仓库里什么都没写最简单的开始方式是克隆。先在 Gitee 仓库页面找到 SSH 地址形如 gitgitee.com:你的用户名/仓库名.git。在本地想放项目的目录下打开终端执行git clone gitgitee.com:你的用户名/仓库名.git执行完当前目录会生成一个和仓库同名的文件夹里面已经自动初始化好 Git并且远程地址也配置好了。你可以直接往里放代码文件、写代码之后进入该目录操作提交推送即可。这种情况适合刚起步的新项目流程最顺不用手动处理远程地址和分支状态。克隆完之后在 VSCode 里打开这个文件夹左侧源代码管理面板就能看到 Git 状态。4.2 情景二本地已经有一大堆代码怎么推到 Gitee更多时候我们手里已经有一个本地项目代码写了一堆还没做任何版本管理。这时推送逻辑不太一样需要在本地先初始化 Git再关联远程仓库。步骤如下在本地项目根目录打开终端执行 git initGit 会创建一个隐藏的 .git 目录表示当前文件夹进入版本管理。然后执行 git remote add origin 仓库的 SSH 地址给远程仓库起一个别名。这里 origin 是默认命名意思是“远程主仓库”你也可以换成别的名字但建议遵从惯例。添加完远程地址后先检查一下有没有配错git remote -v能打印出 fetch 和 push 两个地址说明关联成功。接着把文件加入暂存区git add .注意 add 后面有一个点表示把当前目录下所有未忽略的文件都加进来。这时会有很多文件进入暂存状态如果你想确认有没有遗漏或误加可以执行 git status 查看。确认没问题后提交git commit -m first commit-m 后面的内容是提交说明。第一次提交有很强的仪式感建议写清楚比如“项目初始化”。最后推送git push -u origin master这里 -u 的意思是把本地的 master 分支和远程的 master 分支关联起来之后推送直接 git push 就够了。第一次推送如果你在创建仓库时不小心勾了生成 README这里就会报错远程仓库和本地历史分叉了解决办法在常见问题章节里说。4.3 提交信息怎么写以及 .gitignore 到底忽略什么很多新手提交信息都是“更新”“修改”这种信息回头自己看都看不懂。我的习惯是一次提交只做一件事提交说明用动词开头简单描述这次改动比如“修复登录页面的跳转错误”“添加用户注册接口”。这样以后翻提交历史能一眼看出每个版本做了什么。另一个早期就该养成的习惯是 .gitignore。这个文件用来告诉 Git哪些文件不要管。比如 Python 项目里的pycache和 .venvNode 项目里的 node_modules这些文件要么是自动生成的要么体积巨大不该进仓库。在项目根目录创建 .gitignore写入忽略规则即可。不知道怎么写的可以去 Gitee 创建仓库时生成一个对应语言的模板或者基于模板改。4.4 推送成功后去 Gitee 页面确认状态很多人推完代码就关了终端我建议多花十秒钟确认一下。刷新 Gitee 仓库页面应该能看到刚刚 push 上来的文件和提交记录。页面顶部会显示分支信息、最近提交时间文件列表里能看到所有文件。这一步很值得做。一方面是从提交记录里验证自己的配置是否正确比如作者名字有没有显示成自己的账号另一方面是让自己对“远程仓库变成了什么样”有具象的感知。如果你发现文件没被提交上去大概率是 git add 的时候漏了文件或者 .gitignore 规则太宽把需要提交的文件也忽略了。5. VSCode 里的日常 Git 循环5.1 源代码管理面板的基本操作利用 VSCode 做 Git 操作不需要记住全部命令。左侧活动栏有一个源代码管理图标点击之后当前项目所有改动都会列出来。改动文件分两类已暂存的更改和更改对应命令行里的 staged 和 modified 状态。要提交代码先点文件后面的加号把改动加入暂存区接着在上方输入提交信息点对勾按钮完成提交。如果要推送直接点工具栏里的“推送”图标VSCode 会自动识别当前分支对应的远程分支并推送。整个过程在图形界面里完成对新手友好对老手也能省去不少输入命令的时间。不过我仍然建议大家理解底层命令因为图形界面只是命令的包装一旦遇到报错或复杂场景最终还是需要通过命令排查。VSCode 的源代码管理面板右侧有更多操作菜单可以对文件进行比较、放弃更改、拉取、推送、分支管理等功能非常完整。5.2 分支、合并与管理远程推送分支这个词听起来高级但其实很简单。你可以把它理解成“平行世界里的副本”主分支 master或 main是最稳定的版本日常开发在功能分支上做做完再合并回主分支。这样就算某个分支改坏了主分支依然是安全的。在 VSCode 左下角点击分支名可以创建新分支、切换分支。新建分支输入名字回车就切过去了。修改代码、提交、推送时远程也会多出这个分支。要合并时先切回目标分支一般是 master源代码管理面板里找到“合并分支”选择要合并进来的分支VSCode 会自动完成合并。合并过程中遇到冲突会高亮显示冲突区域红色是当前分支蓝色是外来分支手动保留需要的代码保存后再提交即可。我初期用 Git 时最怕冲突后来想明白一个道理冲突不是坏事说明 Git 检测到了两处不同的修改。真正好的习惯是频繁拉取远程代码尽量让本地基于最新版本修改冲突的出现频率会大大降低。5.3 拉取与推送的顺序别养成直接推的坏习惯多人协作时顺序很重要。我见过不少新手改完代码直接 git push结果连 push 都被拒绝原因是远程已经有人提交了新内容本地落后了。正确做法是改代码前先 git pull 拉一次改完再 push。如果没有冲突pull 会自动合并如果提示冲突就手动解决再提交。VSCode 的源代码管理面板也支持拉取操作点击菜单里选择“拉取”即可。团队协作时我一般固定节奏早上一来先拉取改完一批功能再提交推送长任务期间阶段性 commit避免一次提交改动过多。6. 常见问题速查与避坑记录6.1 第一次 push 被拒绝远程仓库已有文件提示信息通常是 ! [rejected] master - master (fetch first)原因多半是远程仓库初始化时勾选了 README 或 .gitignore导致远程有了一次初始提交而本地 Git 历史跟远程不连续。解决方案有两种。第一种远程确实不需要那些初始化文件本地代码还没正式推过。可以直接先强制推送一次git push -u origin master --force但这个方法要用得谨慎强制推送会覆盖远程历史仅适合在确定远程都是无用初始化文件的情况下使用。第二种远程的 README 你想保留那就先拉取并合并git pull origin master --rebaserebase 的意思是把自己的提交“重新放到”远程提交后面保持线性历史。合并完成后再 git push 就能成功。实际项目中我几乎不用第一种强制方式因为历史被覆盖可能影响其他协作者。6.2 SSH 密钥配置了但连接测试还是失败有几种常见原因。第一公钥没粘贴完整粘贴时注意开头从 ssh-rsa 开始结尾到邮箱或备注结束不能多空格也不能省略。第二检查粘贴的密钥是 id_rsa.pub 而不是私钥 id_rsa私钥绝不能发给别人这个要特别注意。第三测试命令敲错Gitee 的测试命令是 ssh -T gitgitee.com注意用户名是 git不是你的 Gitee 用户名。如果本地多把密钥还要检查 ~/.ssh/config 是否正确指定了对应密钥。另外Windows 用户的首次连接提示指纹时一定要输入 yes 回车很多人手滑输入 y虽然有些场景也通过但最好按提示完整输入。6.3 中文文件名乱码和换行符问题Git 默认会把非 ASCII 文件名转成转义序列显示导致中文文件名在终端里看起来是乱码。这不是文件损坏只是显示问题。执行git config --global core.quotepath false再查看 git status中文文件名就能正常显示了。换行符问题则是 Windows 和 Linux 的差异引起的Windows 用 CRLFLinux 用 LF。Git 提供了自动转换机制安装 Git 时选了“Checkout Windows-style, commit Unix-style”就能避免大部分问题。如果仓库里已经混入了错误的换行符可以用编辑器统一格式或者让 IDE 自动识别。6.4 删库、误操作与批量管理仓库Gitee 删除仓库的入口在仓库的“管理”页面最底部有删除仓库按钮需要输入仓库名称确认。删除操作不可恢复涉及关键数据前一定要确认本地还有副本。Gitee 还提供了仓库批量管理功能进入个人主页的“仓库管理”可以勾选多个仓库执行批量操作。之前有人用它批量删库结果误删了不想删的仓库后悔也没办法。我的建议是批量操作前截图留一份仓库列表重要仓库单独备份或者把成员权限里“管理员”角色只留给少数人降低手滑风险。6.5 网络不通、连接超时先检查这几点如果执行 git push 或 git pull 时提示连接超时、unable to access先不要慌按顺序排查。第一仓库地址是否写错SSH 方式有没有把 git 开头拼错第二本地网络是不是出了问题可以 ping 一下 gitee.com 看通不通第三如果是公司或学校网络检查防火墙是否拦截了 SSH 的 22 端口。把这几项过一遍大概率能定位问题。7. 从会用到用好环境配置与插件加分项7.1 Python 与 C/C 环境快速配置VSCode 最大的优势之一就是多语言支持。以 Python 为例装好 Python 解释器后在扩展市场安装 Python 扩展打开 Python 文件就能获得代码提示、语法检查、调试等功能。C/C 场景则装 C/C 扩展和 Code Runner 插件前者负责智能提示和调试后者负责一键运行代码。可能过程里会遇到编译器路径配置、环境变量问题但跟着扩展文档走大部分都能顺利解决。我建议新手在配置环境时先看扩展主页的说明文档装一个测试一个不要一口气装一堆否则出了问题都不知道是哪个插件引起的。7.2 我的插件清单按使用频率排序插件名用途说明Chinese (Simplified)中文语言包汉化界面PythonPython 开发微软官方调试/提示C/CC/C 开发微软官方Code Runner一键运行代码支持多语言GitLensGit历史增强能看到每行代码的提交记录Remote - SSH远程开发连接服务器写代码Prettier格式化代码统一代码风格ESLintJS代码检查前端项目常用这里面 GitLens 对 Git 学习者特别有帮助它能直观显示每行代码是谁、什么时候、为什么改的配合 Gitee 远程仓库看历史非常方便。7.3 进阶方向AI 辅助、远程开发与静态托管VSCode 现在的另一个热点是 AI 编程辅助。扩展市场里搜 Codex、DeepSeek、Claude Code 等关键词会有对应的官方或第三方插件可以接入聊天、补全代码甚至直接调用模型解读报错。这类插件配置并不难大多数只需按说明填入 API Key但我提醒一句填 API Key 时要注意保密别把它提交进 Git 仓库收到平台的安全提醒要第一时间处理。如果写的代码要部署到服务器Remote - SSH 插件能让你直接在 VSCode 里打开远程服务器上的文件夹和编辑本地文件几乎没有区别。另外Gitee 的 Pages 服务可以把仓库里的静态网页托管上线适合部署个人主页或前端演示项目这类文档在网上都挺全。最后分享一点我自己的体会工具说到底只是辅助真正值钱的是一套规范的版本管理习惯。我现在哪怕一个人写小项目也会从第一天就建仓库、写 .gitignore、频繁提交、认真写提交信息这些习惯在团队协作时会救你一命。刚开始用 Git 时别怕报错报错信息里藏着 80% 的答案。把这套流程走通之后你会发现写代码的自由度反而更大了因为你知道不管怎么折腾远程仓库里永远有一个安全版本兜底。