本篇文章带大家聊聊VSCode+Git操作,介绍一下VSCode中git的相关配置与使用,希望对大家有所帮助!
![](https://img-blog.csdnimg.cn/img_convert/49344614a1f67001b2bc6dc4410a044a.jpeg)
(本文操作均在 Gitee 上进行,Gitee 与 Github 操作方式基本基本相同。)
一、搭建 GIt 环境(Windows)
1. 先下载安装 GIt, 随后注册 Git 用户名与邮箱,此步骤在下面文章已有讲述,此处不再赘述;
https://blog.csdn.net/weixin_53072519/article/details/122824860
详细介绍了GIT的使用方式,包括GIT介绍、安装、相关的命令解释,还有项目上传至云端与克隆至本地。
【推荐学习:《vscode入门教程》】
2. 生成 SSH 公钥与密钥;
右键打开 Git Bash Here;
![](https://img-blog.csdnimg.cn/img_convert/18d6883bb26f3da842941217fee365a8.png)
使用命令 ls .ssh 检查我们的目录下是否已经有公钥和私钥(如下是没有的);
![](https://img-blog.csdnimg.cn/img_convert/b19a887b4cf1739149b7b0cb2665961f.png)
创建公钥和私钥,使用命令 ssh-keygen -t rsa -C "邮箱";
![](https://img-blog.csdnimg.cn/img_convert/34ca0c581f46275625abe588e9fe3ec0.png)
此时公钥私钥已经生成,注意提示的路径;
![](https://img-blog.csdnimg.cn/img_convert/a7a9c6b458e00cee0ff19a3dd45b9843.png)
![](https://img-blog.csdnimg.cn/img_convert/99f16b51907341ecc8bcb60704ab2761.png)
3. 将公钥添加到 GitHub/Gitee;
复制公钥;
![](https://img-blog.csdnimg.cn/img_convert/e81fe66144eabe50986edc8dbf118137.png)
进入 Gitee --> "设置" --> “SSH 公钥”,添加新的公钥;
![](https://img-blog.csdnimg.cn/img_convert/64a0388b7a5dccded2c56bfa60b24b67.png)
添加成功后如下;
![](https://img-blog.csdnimg.cn/img_convert/19241285a76024d86e220dc72e845822.png)
4. 测试 SSH 连接;
使用命令 ssh -T git@gitee.com 进行测试,出现 hi... 字样,即连接成功;
同样在使用 GIthub 时使用命令 ssh -T git@github.com 即可;
![](https://img-blog.csdnimg.cn/img_convert/8f7487a4a41a9ea8184b2d45a300af3f.png)
二、VS Code 中 GIt 相关操作
(在这里我将使用一个空文件夹 git 作为项目文件进行相关的演示操作。)
本地类操作
1. 准备项目文件并初始化仓库
新建项目文件夹 git 作为项目;桌面进入 Git Bash Here,输入命令 code git 使用 vs code 打开我们的项目文件夹;
![](https://img-blog.csdnimg.cn/img_convert/fc84df41ac255213379946502e10a5f1.png)
vs code 中进入源代码管理,点击存储库的初始化。这步也就完成了 git 仓库的初始化,此时可以看到文件夹已有 .git 文件夹(默认隐藏,需要设置显示隐藏文件即可看到);
![](https://img-blog.csdnimg.cn/img_convert/c379ce40090433e5cab3591460dd7e84.png)
随后在项目文件 git 中新建文件 demo.html;
![](https://img-blog.csdnimg.cn/img_convert/2356eddb3374fbcfe10e54c373438e0d.png)
此时我们可以看到新建的文件为绿色,且后面有 U 字提示;U 意为 Untracked 未追踪,也就是说此文件目前仅在我们本地,未被 git 进行跟踪。
![](https://img-blog.csdnimg.cn/img_convert/121fcac2cca0ca11297b4e71d70a181e.png)
2. 添加文件至暂存区
进入源代码管理,点击所要操作文件后面的 “+”,即可将文件添加至暂存区,相当于执行命令 git add;
![](https://img-blog.csdnimg.cn/img_convert/c6b2480314ceed11912b7cca4d51ee33.png)
此时文件名仍然为绿色,但是后面的 U 变成了 A,A 则意为此文件已在暂存区。
![](https://img-blog.csdnimg.cn/img_convert/1d15fe056f67518acd968ff31e24c46a.png)
3. 提交暂存区文件至 git 仓库
将暂存区的文件提交至 git,进入源代码管理,在消息框中输入相关备注,然后点击 “√” 即可进行一次提交,也可使用 Ctrl+Enter 快捷键直接提交;
![](https://img-blog.csdnimg.cn/img_convert/17984ef94fcb38c9cb7b7ad37c9851a1.png)
此时文件颜色变为正常,且无字母提示,说明文件已提交至 git。
![](https://img-blog.csdnimg.cn/img_convert/4a9b3557d38fac0cec4aafc13bd918cc.png)
提交也可使用快速提交方式,所谓快速提交就是将新文件或者修改后的文件直接提交,而不用先保存至暂存区。省略了添加至暂存区操作;
如下,如果我们将修改后的文件未保存至暂存区就进行了提交,vs code 会给出警告,这时我们选择“总是”,即可在未来的操作中自动省略添加至暂存区操作。
![](https://img-blog.csdnimg.cn/img_convert/9255aa588f8482c82f8ec55bdc36841c.png)
4. 修改提交后的文件
将提交后的文件内容进行修改后,文件名称会有如下提示;
![](https://img-blog.csdnimg.cn/img_convert/4ca06438d08b12b534412260d483b3ca.png)
此时文件名变为黄色,且有提示字母 M;M 意为 modify,即已修改。
![](https://img-blog.csdnimg.cn/img_convert/2d3b6c42cfb0867f2c66d4b9299fff82.png)
想要撤销修改,进入源代码管理,点击返回箭头放弃更改即可;
5. 查看/新建/切换分支
点击 vs code 底部状态栏的 “master” 即可显示项目中的分支,此处的 master 意为当前所在分支为 master;如下图所示,项目中只有一个 master 分支;
![](https://img-blog.csdnimg.cn/img_convert/963ee91a7757ad2a5a0747ee2abc5d30.png)
创建分支点击 “+ 正在创建新分支...”;
![](https://img-blog.csdnimg.cn/img_convert/d54305d487cc39e7726c1dd1ab32f10b.png)
此时项目中已有两个分支;
![](https://img-blog.csdnimg.cn/img_convert/90161636f3c87f8fe35363c0ad9857db.png)
切换分支只需点击对应分支名称即可;
6. 合并分支
我们先在新建的 xiaoma 分支中修改文件内容并提交;
![](https://img-blog.csdnimg.cn/img_convert/dcf6f857995b202128e031b625a770c9.png)
随后切换到 master 分支,此时 master 分支是没有修改后的内容的;
![](https://img-blog.csdnimg.cn/img_convert/8c35badd83445d1788c7df962b79f8d7.png)
接下来进行合并,首先点击设置图标 “⚙” 打开命令面板;
![](https://img-blog.csdnimg.cn/img_convert/707ae5f672f3dfcf6b0c70cd23ac3657.png)
在命令面板中搜索 git merge,找到合并分支操作,点击合并分支;
![](https://img-blog.csdnimg.cn/img_convert/a69881128a7554d199f76ee5452a493f.png)
此时 master 分支已有 xiaoma 的相关操作;
![](https://img-blog.csdnimg.cn/img_convert/7ee1366fa3ec68951b459884164b5660.png)
7. 临时保存当前分支状态
当我们在工作过程中代码写到一半,并没有完成某个模块的开发,而这时又不得不离开当前分支切换到另一个分支时,就需要将当前分支的状态进行临时保存(储藏、藏匿),相当于 git 命令 git stash;
当在当前分支做了一定的修改后,点击更多 “···”,找到存储-->储藏;
![](https://img-blog.csdnimg.cn/img_convert/498fe6c3603af807f682da7dbee36105.png)
8. 查看当前文件做了哪些修改
当我们正在修改已经提交到 git 的文件内容时,vs code 会即使提示我们做了哪些操作,相当于 git 命令 git diff,如下:
蓝色代表此处已经被修改或者删除
绿色代表此处代码为新增内容
![](https://img-blog.csdnimg.cn/img_convert/247775d4ae36bd67abb216d1d2c54315.png)
远程类操作
1. 新建 GIt 仓库
远程类操作需要结合 Gitee 进行,所以我们先在 gitee 中新建一个仓库,进入 gitee 首页点击+新建仓库;
![](https://img-blog.csdnimg.cn/img_convert/264ff3e64a6787378409af804d96dee5.png)
创建好的仓库如下,我们已经有了 SSH 地址;
![](https://img-blog.csdnimg.cn/img_convert/42fb35e8fd1997881a8678f05da96873.png)
2. 克隆项目(git clone)
首先复制新建仓库所获得的 SSH 链接,打开 vs code 中的命令面板,输入 git clone 找到克隆选项;
![](https://img-blog.csdnimg.cn/img_convert/668f9202720592b39567689cbb483b1c.png)
点击后粘贴我们的 SSH 地址,回车,这时候 vs code 会提示我们选择一个地址用于存放克隆的项目,随后开始克隆,如下;
![](https://img-blog.csdnimg.cn/img_convert/6d8560ea4a7569dfd2e6df7e1e54f995.png)
克隆成功后即可在本地打开项目。
![](https://img-blog.csdnimg.cn/img_convert/bd656fa2c58f6265b946266e869f390e.png)
3. 推送项目(git push)
我们先在刚刚克隆的项目中随意创建一些文件并将它们提交;
![](https://img-blog.csdnimg.cn/img_convert/d287291145c63c63e55e616b541b5802.png)
进入源代码管理,点击更多 “···” 找到 push 进行推送;
![](https://img-blog.csdnimg.cn/img_convert/8f5eb9c49db5766711fa72d37a370d45.png)
推送成功后如下,在 Gitee 中可以看到我们的提交记录;
![](https://img-blog.csdnimg.cn/img_convert/c0e6aedf70c5877e062e952d06fac12b.png)
4. 克隆云端的项目至本地(git pull)
在 Vs Code 中拉取云端项目,进入源代码管理,选择更多 “···” ,选择 “拉取”,即可进行 pull 操作;
![](https://img-blog.csdnimg.cn/img_convert/ae21259a7b240b3fa6a2277704c63cae.png)
注意:每当进行推送项目(push)时,最好先拉取一下云端代码(pull)以保证云端已经更新到最新状态,防止推送项目后造成代码冲突;
更多关于VSCode的相关知识,请访问:vscode教程!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)