ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

VSCode+Gitee保姆级教程:代码托管与版本控制从零到一

VSCode+Gitee保姆级教程:代码托管与版本控制从零到一 写在前头的一句话带过几波新人之后我发现真正劝退一个刚接触编程的人往往不是语法本身而是代码写好了、本地也能跑转过头却不知道怎么把它存到一个靠谱的地方——重装系统怕丢、换电脑怕丢、给别人看还得靠微信传文件。我的答案一直很固定VSCode配合Gitee。这套组合把“写代码”和“管代码”两件事拆得清清楚楚前者管编辑后者管保存和版本回溯对新手来说是最没必要折腾、却能立刻解决问题的方案。这篇就把从零开始的完整流程写透不跳步、不藏着掖着适合第一次接触代码托管的人也适合想把手头项目好好规整一遍的老开发。1. 为什么是VSCode和Gitee的组合而不是其他方案很多人在装好VSCode之后会理所当然认为“代码写完了就该放在编辑器里”。严格来说不对——VSCode只是用来编辑文件的工具它根本不负责保存你的项目历史。这就像你用一个很顺手的记事本写稿子记事本本身没有“备份多个版本”的功能稿子丢了就是丢了。代码托管平台Gitee才是那个负责把项目“存起来、记住过程、能随时翻回去”的地方。两者合在一起才是完整的工作链路。1.1 两件工具在完整工作流里的分工我习惯把这条链路说成三环VSCode负责“写”Git负责“记”Gitee负责“存和传”。VSCode通过内置的Git集成调用电脑上安装的Git命令把你写的代码打成一个个“版本快照”然后推到Gitee的远程仓库里。换句话说VSCode只是个操作界面背后干活的其实是Git。很多新手会混淆“Git”和“Gitee”这两个名字我打个比方Git是一套记账规则只要你遵守规则就能记录每一笔代码改动Gitee是银行你的账本存在这家银行里换电脑之后从银行把账本取出来接着记。所以哪怕本地代码全毁了只要远端仓库在项目就能恢复损失最多只是最近一次还没提交的内容。理解了这一层后面所有的命令和按钮都不会觉得莫名其妙。1.2 保姆级教程里绕不开的几个基础概念在这个教程里我尽量少用术语但有四个词必须提前认识因为后面的每一步都会碰到仓库Repository一个项目的完整代码和全部历史记录的集合。可以理解成一个特殊的文件夹只不过这个文件夹“长了记性”。提交Commit把当前所有改动存成一个版本点。每个提交有编号、说明文字、作者和时间像游戏里的存档。推送Push把本地的提交同步到Gitee远程仓库。只有推送到远程别人才能在别的电脑上看到最新代码。分支Branch一条独立的开发线。默认分支通常是master或main正常单人使用时只要不特意乱建分支用默认分支就够了不用过度纠结。概念懂得再多不如亲手跑通一次。所以这一篇的核心目标是让一个完全没接触过版本控制的人在半小时内亲手完成“本地代码 → Gitee远程仓库”的第一次推送。只要成功一次后面所有疑惑都会自己解开。1.3 这套组合适合谁如果你是第一次用编辑器写代码的学生、刚入职需要把项目放进公司仓库的职场新人、或者有一堆旧代码想整理出版本历史的程序员这一篇都适用。我也见过不少用PyCharm、IDEA的人来看这篇核心流程完全通用因为编辑器可以换Git的逻辑是不变的。文章里我会同时讲图形化按钮和命令行两种方式你按自己的习惯选择就行。2. 起步环境搭建VSCode安装、汉化、装哪些插件“保姆级”第一步就是老实把VSCode装好。这一步听起来简单实际栽跟头的人不少——不是下载错了版本就是装的时候漏勾了关键选项后面想用命令打开编辑器时一脸懵。2.1 官网下载和安装的细节VSCode的安装包从官网下载即可进入官网后首页就有大大的下载按钮。Windows系统直接点Windows版本的安装包下载完双击运行安装过程绝大部分保持默认就行只有一个地方必须注意在“选择附加任务”这一步务必勾选“添加到PATH”。这个选项的意思是安装完之后你在任何一个终端窗口里敲code就能打开VSCode。如果漏勾了后面在终端里想用code .打开当前文件夹时会提示“找不到命令”虽然可以补救但完全没有必要踩这个坑。另外提醒一句网上搜VSCode很容易点到第三方下载站和广告页下回来一堆捆绑软件。认准官方渠道域名或者直接在官网首页下载不进任何镜像站和下载器。装完之后打开VSCode看到英文界面别慌下一步就是汉化。注意老机器如果是Windows 7系统新版VSCode早就停止支持了需要到官网找历史版本下载。装系统的时候尽量别把安装路径放在带中文或空格的目录里虽然大多数情况下能跑但之后编译调试时会遇到一些莫名其妙的路径问题。2.2 中文界面VSCode默认是英文界面汉化只需装一个语言包。打开VSCode左侧边栏的扩展图标形状像四个小方块在搜索框里输入“Chinese”找到名为“Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code”的扩展点击Install安装。安装完成之后右下角会弹出一个提示框点“Change Language and Restart”界面就会自动重启并变成中文。如果没有弹出提示按快捷键CtrlShiftP打开命令面板输入“display language”选择配置显示语言把locale改成zh-cn保存重启即可。这一步没有技术含量但建议新手先把界面调成自己看得懂的语言再看后面的操作会顺畅很多。不要觉得“用中文界面丢人”工具是为人服务的先把流程跑通英文术语见得多了自然就熟了。2.3 插件列表语言环境、Git增强和Gitee相关VSCode的功能一半靠插件但不是装得越多越好。针对“VSCode加Gitee”这条主线我按用途分三类推荐新手照抄即可必装类别——语言环境类插件名作用适用场景PythonPython代码补全、调试、运行写Python必装C/C Extension Pack包含C、C语法提示和调试套件配C/C环境时用得上ESLintJavaScript/TypeScript语法检查前端项目推荐很多热词里提到的“vscode配置python环境”“vscode配置c/c环境”本质就是装这几个插件再加上电脑里本身要有对应的Python解释器或编译器。插件负责“看懂你的代码”解释器/编译器负责“运行你的代码”两件事别搞混。必装类别——Git/Gitee相关由于VSCode内置了Git支持严格来说上传代码不需要装任何额外插件。但我还是建议装一个GitLens它能在代码行旁边显示每一行是谁在什么时候改的查看提交历史时非常直观。至于专门的“Gitee插件”我的个人建议是初期不装——第三方插件交互质量参差不齐反而把内置流程搞复杂。网页版Gitee负责建仓库和看远端状态VSCode内置Git负责提交和推送这个组合最干净。选装类别——外观和效率Prettier做代码格式化、Material Icon Theme换图标、Path Intellisense自动补全路径这些都属于“提高幸福感”的插件等跑通主流程之后再慢慢加不迟。另外现在很多AI编程插件比如接入DeepSeek、Codex、Claude Code的扩展也能提高效率但那是另一个话题别在第一次接触时混在一起容易乱。3. 连接前的关键一步Git安装与SSH密钥配置前面说过VSCode背后真正干活的是Git。所以VSCode装好之后还要保证电脑上有Git环境并且让它认识Gitee账号。这一段是整个教程里最容易出错、也最值得仔细讲的地方。3.1 安装GitGit也是从官网下载Windows版本下载后一路下一步即可。安装过程会出现很多选项新手保持默认就够用。装完别急着关终端打开任意命令行窗口在VSCode里按Ctrl打开终端也行输入git --version如果看到类似git version 2.40.0的输出说明安装成功。如果提示找不到命令多半是安装时没勾选添加到PATH或者装完没重启终端。装完之后需要先把身份信息告诉Git这一步不是可选的——它决定了你的提交记录上写谁的名字。在终端里执行git config --global user.name 你的Gitee用户名 git config --global user.email 你的Gitee注册邮箱注意邮箱必须和Gitee注册邮箱一致否则后面推送时会遇到邮箱隐私校验问题这个我在第6节的报错清单里会展开。3.2 生成SSH密钥Git装好身份也配好了接下来要想办法让电脑和Gitee服务器互相确认“我是我”。两边的验证方式有两种——HTTPS每次传用户名密码SSH靠密钥对免密登录。我推荐用SSH因为搭配好之后推送代码不用反复输密码体验顺畅得多。密钥对的原理可以理解成一把锁和一把钥匙公钥相当于锁放心交给Gitee私钥是钥匙永远只留在自己电脑里。Gitee用公钥确认“你确实拥有这把锁”而你电脑里的私钥负责解锁。在终端中生成密钥建议直接使用ed25519算法安全性高、长度短ssh-keygen -t ed25519 -C 你的Gitee注册邮箱执行后终端会询问保存路径默认在用户目录的.ssh文件夹直接按回车即可如果你电脑上之前已经生成过密钥它会提示是否覆盖这步要小心不确定就别覆盖。随后会提示设置密码短语passphrase可以留空直接回车这是给密钥再加一层保护官方场景下够用。生成完成后找到公钥文件Windows系统一般在C:\Users\你的用户名\.ssh\id_ed25519.pubLinux/macOS一般在~/.ssh/id_ed25519.pub。可以用编辑器打开这个.pub后缀的文件复制里面的全部内容下一步要用。3.3 Gitee添加公钥并测试连接登录Gitee网站点右上角头像进入“设置”左侧菜单找到“SSH公钥”。将刚刚复制的公钥粘贴到大文本框里标题可以随便起一个比如“我的电脑”方便以后认出来是哪台设备的钥匙。点提交公钥就保存好了。然后回终端测试连接ssh -T gitgitee.com第一次执行会提示确认指纹输入yes回车。如果看到类似Hi 用户名! Youve successfully authenticated, but GITEE.COM does not provide shell access.的消息说明密钥配置成功电脑和Gitee账号已经打通接下来就可以建仓库和推送代码了。提示如果测试时报Permission denied (publickey)先确认公钥是否完整复制包括结尾的邮箱再确认是不是环境变量里没读到.ssh路径。我遇到最多的情况是用户生成密钥时改了默认路径导致系统找不到私钥。4. Gitee仓库从创建到克隆选项逐个说清楚打通账号连接之后去Gitee上建一个远程仓库。这一步看起来就是填几个表单但很多新手会卡在“开源许可证选什么”“要不要初始化仓库”这类选项上。我把每一个字段都展开讲一遍。4.1 新建仓库时各字段怎么填登录Gitee后页面右上角点“”号选择“新建仓库”。进入创建页面后有几个关键字段仓库名称建议用全英文小写单词之间用短横线连接比如my-first-project。仓库名称会出现在访问路径里中文或空格会导致URL编码问题后续用起来很别扭。路径通常自动跟随仓库名称可以理解为仓库的访问ID建好之后建议不要改改了会影响旧的克隆地址。仓库介绍选填一两句话说明项目是干什么的对以后自己回顾很有帮助。权限选“私有”或“公开”。个人练习代码、还未完成的产品建议选私有防止半成品直接暴露公开仓库适合开源分享。私有仓库在Gitee对个人用户是开放的不用担心收费。初始化仓库可以选择是否自动生成README文件。我的建议是如果你打算先把远程建好再克隆到本地就勾选“初始化仓库”并顺便选上README如果你本地已经有完整项目代码想推上去那就选择“不初始化”避免和本地文件冲突。创建完成后仓库页面会显示一个地址分HTTPS和SSH两种格式。SSH地址长这样gitgitee.com:用户名/仓库名.git。往前走的话都建议把SSH地址复制下来使用和前面配置的密钥正好配对。4.2 开源许可证怎么选这个问题的热度一直很高其实没那么玄。开源许可证本质上是一份“别人能用你的代码做什么”的说明书。如果你只是想把代码托管在Gitee上作为备份并不想公开那许可证可以完全不用选。如果你打算把仓库设为公开让其他人能参考、使用那常见的选择是许可证主要特点适合场景MIT代码几乎可以被任何人任意使用、修改、商用只需保留版权声明个人开源项目、工具库最省事Apache 2.0类似MIT额外包含专利授权条款对大型项目更友好涉及专利的项目GPL别人用了你的代码他的项目也必须开源且使用GPL希望强制“回馈社区”的项目拿不准的时候选MIT就对了这是开源社区最常见的宽松许可证。即便仓库已经建好许可证也可以之后在仓库设置里补上或更换创建时不用纠结太久。4.3 克隆到本地与批量删库警告仓库创建好之后把远程仓库复制到本地叫“克隆clone”。在VSCode里按CtrlShiftP打开命令面板输入“Git: Clone”粘贴仓库的SSH地址然后选择本地存放文件夹VSCode会自动把仓库拉取到本地并打开。这种方式适合“远程先建好、本地是全新的”场景。顺带提一个搜索热词里的“Gitee批量删库”。Gitee提供了在仓库列表页勾选多个仓库、批量删除的能力。这个操作确实方便但它没有“后悔药”——仓库里的代码、Issues、历史一旦删掉不会进入回收站可以直接恢复。所以只建议在明确知道“这些仓库没用、且本地有完整副本”的情况下使用千万不要拿它清理不确定的项目。我个人的底线是删仓库前先把本地代码推到一个存档目录或打个压缩包多一步操作换来的是心安。5. 重头戏把写好的代码推到Gitee的完整流程前面这么多准备都是为了此刻。把本地项目上传到Gitee仓库有两种常见场景操作稍有不同我分开讲你只要对应自己属于哪种就行。5.1 场景区分新克隆仓库还是已有本地项目**场景A你按照4.3节的方式从Gitee克隆了一个空仓库到本地。**这种情况下本地文件夹已经自带Git环境远程地址也已经关联好了。你只需要把自己的代码文件复制进这个文件夹然后直接跳到5.2节从“暂存”开始操作即可。**场景B你早就有一个写了一半的项目文件夹里面堆了成百上千个文件现在想把整个项目推上Gitee。**这也是最多人遇到的场景。先在Gitee建一个不初始化任何文件的空仓库复制SSH地址然后在VSCode里打开你的项目文件夹按Ctrl快捷键调出终端依次执行git init git remote add origin gitgitee.com:用户名/仓库名.gitgit init的作用是把这个普通文件夹变成Git仓库git remote add origin则是告诉Git“我们要把代码传到哪个远程地址”。如果不放心是否关联成功可以执行git remote -v查看看到输出里有你刚设置的地址就对了。5.2 我用VSCode源代码管理面板操作的全流程VSCode左侧边栏有一个“源代码管理”图标长得像3个圆圈带分支符号这是上传代码的主入口。点击它你会看到所有还没提交的文件列表。接下来按顺序执行三个动作暂存、提交、推送。第一步“暂存”Git add在源代码管理面板的文件列表处点文件后面的“”号或者点顶部“更改”旁边的“”把文件加入暂存区。暂存的意思是把这些文件先“圈起来”确定为本次提交要将哪些内容存档。第二步“提交”Git commit在面板顶部的输入框里填写本次提交的说明比如“初始化项目完成登录功能”然后点上面的对勾图标。代码就被保存在本地Git仓库里了。这一步只是本地存档还没有传上网。第三步“推送”Git push点源代码管理面板顶部的三个点“···”选择“推送到远程”等待片刻代码就上传到Gitee了。如果是第一次推送可能会要求你选择远程分支默认选origin/master或者要求输入用户名密码——这个问题在第6节详细说。如果你更喜欢命令行等价操作是三行命令git add . git commit -m 初始化项目完成登录功能 git push -u origin master第一行的git add .表示暂存当前目录下所有改动文件第二行提交到本地并附上说明第三行推送到远程的master分支并建立跟踪关系。.前面有个空格别敲漏了。整个流程跑完之后刷新Gitee仓库页面就能看到代码文件已经整整齐齐躺在那里了。第一次推送成功的那一刻你就算真正跨过了版本控制的门槛。5.3 第一次推送成功后规律和提交规范一次推送成功之后后续的使用规律就一句话改代码 → 暂存 → 提交 → 推送。刚开始用的时候很容易要么忘了提交、要么提交了但忘了推送。我的建议是先提交后推送提交是防止自己电脑上的改动丢失推送是防止电脑损毁导致代码全没。对于单人项目一天结束前保证代码已经推送到Gitee这是最低要求。关于提交说明commit message很多人习惯写“update”“修改”等于什么都没写。三个月后回看历史你会对着一串“update”发呆。我自己的写法是“用什么语气说都行但一定让别人包括三个月后的自己看懂这次改了什么”。比如“修复登录页在手机端显示错位的问题”比“fix bug”有价值得多。提交说明不需要写长篇大论一句话说清楚即可。6. 高频报错与忽略文件给新手的避坑清单这部分是我带人时最常被问到的内容。新手报错不是不够努力而是报错信息往往看不懂不知道去哪一步排查。下面把针对本文流程的高频问题列出来对应解决。6.1 这些报错信息对应的问题“fatal: remote origin already exists.”说明本地仓库已经关联过一个远程地址。解决办法是用git remote remove origin删掉旧关联然后重新执行git remote add origin 新地址或者用git remote set-url origin 新地址直接替换。“Permission denied (publickey)”SSH密钥没有配对成功。依次检查Gitee的SSH公钥是否添加成功、终端里的私钥路径是否是默认路径、ssh -T gitgitee.com能不能返回成功消息。不要跳过测试直接推送测试通过了再推。“remote: error: GE007: Your push would publish a private email address.”Git里的邮箱和Gitee注册邮箱不一致Gitee出于隐私保护拒绝了这次推送。去Gitee设置里查看邮箱配置把git config --global user.email改成和Gitee邮箱完全一致。“fatal: Authentication failed”通常出现在用HTTPS地址推送时账号密码或私人令牌填错了。在Windows上错误的账号密码会被凭据管理器记住下一次还会自动用错的那个再试。这时候要去控制面板的“Windows凭据管理器”里删除Gitee相关条目再重新推送重新输入正确信息。不想被这种问题反复打扰的话最彻底的办法就是改用SSH地址执行git remote set-url origin gitgitee.com:用户名/仓库名.git。本地分支和远程分支名字不一致。比如git init出来的默认分支叫master而Gitee仓库创建时默认分支叫main推送时会报错提示分支名对不上。可以用git branch -M main把本地分支重命名为main然后再执行git push -u origin main。总之以仓库页面上默认显示的分支名为准两边对齐就行。报错信息问题根源优先排查方向Permission denied (publickey)SSH密钥没配对公钥是否添加到Gitee、私钥路径是否正确Authentication failed账号密码/令牌错误清除Windows凭据、改用SSHGE007 邮箱隐私本地邮箱与Gitee不一致核对user.emailorigin already exists重复关联远程地址先remove再add分支名不一致master与main冲突用-b或-M对齐分支名6.2 .gitignore到底怎么写、写什么很多新手一上来git add .把自己项目里的临时文件、配置垃圾全都提交上去了最典型的是Python项目里的__pycache__、.venv、.pycNode项目里的node_modules还有系统自动生成的.DS_Store。这些文件既大又没用传到仓库里只会把项目搞乱。解决办法是在项目根目录创建一个.gitignore文件把不想上传的文件写进去。每行一个忽略规则#号开头是注释/结尾表示忽略目录。一个最小的示例# Python __pycache__/ *.pyc .venv/ venv/ # Node node_modules/ # 构建产物 dist/ build/ # 系统和编辑器 .DS_Store Thumbs.db .vscode/注意.gitignore只对“还没被Git跟踪”的文件生效。如果你之前已经不小心把node_modules提交上去了只改.gitignore并不会让它消失必须先把已跟踪的文件从仓库移除执行git rm -r --cached node_modules--cached参数让它保留在本地磁盘只是从版本控制里删掉然后再提交推送。6.3 后续还能这么玩Gitee Pages静态托管和AI插件整套流程跑熟之后Gitee还有两个方向值得延伸。第一个是Gitee Pages静态托管。如果你写了一个纯前端的静态网站比如一个HTML简历、一个小工具页面可以把代码推送到Gitee仓库然后在仓库的“服务”菜单里找到Gitee Pages选择要发布的分支点启动Gitee会自动生成一个访问网址别人打开就能看到页面。这个功能对个人展示、项目演示非常实用相当于一个非常低门槛的网页托管服务。第二个是配合AI编程助手插件。VSCode现在可以装不少AI辅助工具接入DeepSeek、Codex、Claude Code等模型之后写代码、看报错、自动生成提交说明都变得很快。我的建议是AI可以帮你写代码但版本控制的流程——提交、推送、管理分支——务必亲手操作因为这才是后期协作和查历史时真正保命的能力。带过这么多新人我越来越觉得VSCodeGitee这套组合最大的价值不是某个具体功能多强大而是它能让人在最早期的编程阶段就养成“代码有备份、改动有记录”的习惯。哪怕你未来不写代码了这种“重要文件应该有版本、有异地备份”的意识也会一直在。把这篇文章的流程从头到尾亲手走一遍复现任何一个步骤卡住都不丢人对照报错表一步步排查你会发现这些报错翻来覆去就那么几个原因。等第一次推送成功再往后就都是重复劳动了。
返回列表