如何在VsCode中使用git(免敲命令版本!保姆级!建议收藏!)

如何在VsCode中使用git(免敲命令版本!保姆级!建议收藏!)

目录

文章目录

前言

一、电脑安装git

二、在vscode安装git插件

三、克隆仓库

四、提交代码

五、创建分支、切换分支、合并分支

1、创建分支

2、切换分支

3、合并分支

六、创建标签和推送标签

七、解决冲突

八、拉取、抓取仓库

九、Reivew代码

总结


前言

随着Vscode的推出和普及,Git的使用也发生了变化,从原来的命令行管理仓库,再到现在用vscode从提交代码、解决冲突、reivew代码,整个管理仓库的过程全部都是可视化,大大降低了新手的使用难度,让新手也能轻松使用git

一、电脑安装git

git官网:Git - 安装 Git

安装完git后,打开vscode显示这样的界面就是安装成功了

二、在vscode安装git插件

安装这三个插件,这三个插件可以帮助你查看历史提交记录和分支管理

三、克隆仓库

在githu或者gitlab上面复制你仓库的URL,Https和SSH都可以

点击克隆仓库

粘贴刚刚复制的URL

存储在你的文件夹中

 克隆完后会弹窗提示,我们打开刚刚克隆的仓库

 这样我们就能看到仓库的工程目录了

四、提交代码

修改保存的文件都在这个框会显示,暂存更改就是相当于命令行的 git add

 填写完后点击提交就提交到本地仓库,再同步提交到远程。这里相当于命令行的 git push

如果想撤回暂存的提交也可以点击 撤销上次提交就可以退回未提交前的状态了

五、创建分支、切换分支、合并分支

1、创建分支

 输入你新分支的名字,我这里就设置为feature-led-name,后面的name就是你的名字,关于分支的命名规范,你们的可以搜下git命名规范照着命名就可以了

创建分支成功会自动切换程新建的分支,然后就可以开始写代码了,如下图所示:

2、切换分支

这里分本地分支和远程分支,本地分支就是你新建的分支还没推到远程仓库上面的,其他仓库组成员是看不到的,远程分支则是已经推送到了远程仓库的分支,其他组成员是能拉到本地进行开发的分支,点击你想切换的分支进行切换即可

这里有个容易忽略的地方,就是切换分支之前,一定要把修改的东西先提交或者撤销,否则会切换不成功

3、合并分支

合并分支就可以用到我们刚刚安装的那三个插件的其中之一git graph了,打开git graph,可以看到仓库分支代码提交的作者、日期、分支创建、合并等等信息,非常方便

提交完代码后,先切换到你要合并的分支,例如release分支,然后右击要合并的分支

合并完再同步提交到远程仓库就大功告成了

六、创建标签和推送标签

七、解决冲突

这时候又用到刚刚安装的三个插件之一GitLens了,解决完冲突重新提交即可

八、拉取、抓取仓库

九、Reivew代码

点击你要reivew的分支就可以看到别人提交的代码和信息了,点击文件就可以开始查看了

左边是提交前的代码,右边是提交后的代码,一目了然知道他修改了什么

 


总结

本文详细介绍了在VSCode中使用Git进行代码管理的完整流程,包括Git安装、插件配置、仓库克隆、代码提交、分支管理(创建/切换/合并分支)、标签管理、冲突解决等核心功能。通过可视化操作界面,大大降低了Git的使用门槛,使新手也能轻松掌握版本控制技巧。文章特别强调了VSCode的三款必备插件(Git History、GitLens、Git Graph)在代码审查、分支可视化和冲突解决中的重要作用,并提供了从本地操作到远程协作的完整工作流指导。

Read more

【前端进阶之旅】50 道前端超难面试题(2026 最新版)|覆盖 HTML/CSS/JS/Vue/React/TS/ 工程化 / 网络 / 跨端

【前端进阶之旅】50 道前端超难面试题(2026 最新版)|覆盖 HTML/CSS/JS/Vue/React/TS/ 工程化 / 网络 / 跨端

文章目录 * 前言 * 一、原生开发(HTML/CSS/JavaScript) * 二、框架核心(Vue2/3、React16/18/19) * 三、网络协议 * 四、工程化 * 五、跨端开发(uniapp、uniappX) * 六、TypeScript * 写在最后 前言 作为前端开发者,想要突破中高级面试瓶颈,仅掌握基础语法远远不够 —— 大厂面试更侧重底层原理、手写实现、场景分析与跨领域综合能力。本文整理了50 道无答案版前端超难面试题,覆盖原生开发、框架核心、网络协议、工程化、跨端开发、TypeScript 六大核心方向排序且聚焦高频难点,适合自测、复盘或作为面试出题参考,建议收藏反复琢磨! 一、原生开发(HTML/CSS/JavaScript) 原生能力是前端的根基,

By Ne0inhk
前端代码生成的大洗牌:当 GLM 4.7 与 MiniMax 挑战 Claude Opus,谁才是性价比之王?

前端代码生成的大洗牌:当 GLM 4.7 与 MiniMax 挑战 Claude Opus,谁才是性价比之王?

在 AI 辅助编程领域,长期以来似乎存在一条不成文的铁律:如果你想要最好的结果,就必须为最昂贵的模型买单(通常是 Anthropic 或 OpenAI 的旗舰模型)。然而,随着国产大模型如 GLM 4.7 和 MiniMax M2.1 的迭代,这一格局正在发生剧烈震荡。 最近,一场针对Claude Opus 4.5、Gemini 3 Pro、GLM 4.7 和 MiniMax M2.1 的前端 UI生成横向测评,打破了许多人的固有认知。在这场包含落地页、仪表盘、移动端应用等五个真实场景的较量中,不仅出现了令人咋舌的“滑铁卢”,更诞生了性价比极高的“新王”。 本文将深入拆解这场测试的细节,透过代码生成的表象,探讨大模型在工程化落地中的真实效能与成本逻辑。

By Ne0inhk

Dify Web 前端二次开发(隐藏探索功能 + 替换 Logo)

核心修改内容 1. 隐藏导航栏「探索」功能(图标 + 文字按钮); 2. 将默认 Dify Logo 替换为自定义 FDAI Logo(PNG 格式)。 (一)隐藏「探索」功能完整过程 1. 定位目标组件 探索功能对应的组件文件路径:web/app/components/header/explore-nav/index.tsx(组件名:ExploreNav),该组件被嵌套在 Header 组件中渲染,无需修改布局文件 app/(commonlayout)/layout.tsx。 2. 首次尝试:仅删除图标(未彻底隐藏) * 操作:删除组件内图标渲染代码 { activated ? <RiPlanetFill />

By Ne0inhk