> 技术文档 > 新手必看:VS Code+ Gitee 的高效联合使用_vscode gitee

新手必看:VS Code+ Gitee 的高效联合使用_vscode gitee


一.为什么选择vscode+git?

        在了解了git这个版本控制软件后,我们可能会觉得这个软件虽然很方便,但是命令行操作还是有点太麻烦了,而且不直观,还有没有其他方法呢?

        有的,兄弟有的,方法还有很多,使其可视化的方法数不胜数,这里介绍的是用vscode来实现。VS Code 提供了直观的 Git 变更管理,例如 高亮显示修改部分差异对比冲突解决工具,让 Git 操作更直观,降低了命令行的使用门槛。

二.vscode中git的基本操作

1.初始化仓库

先将一个新建的文件拖到vscode中

再点击初始化仓库就可以成功创建一个git仓库了

2.使用源代码管理工具进行git命令操作

初始化仓库后就会显示成这样,当文件后面有个U的标记就表明文件在工作区,还没有被追踪到暂存区。

2.1提交文件

        当我们需要加入暂存区时,就点击+号将其加到暂存区中,作用是git中的git add,这时我们可以看到文件有一个大写的A标记,这就说明文件已经进入暂存区了。

        要将其提交(git commit)就直接在其中输入注释然后点提交就行,消息栏中建议输入代码的变化和目的,方便浏览版本差异

        如果忘记在消息栏里输入注释,直接提交则会弹出一个COMMIT_EDITMSG文件,这里第一行空着就是让我们输入提交的注释,下面的提示也是大概的意思。输入完成后保存并关闭也可以成功提交,但还是建议大家不要忘记。

这时候我们就完成了代码的提交。

vscode文件右侧字母含义:

字母 含义 对应的 Git 状态 U Untracked(未跟踪) 文件未被 Git 追踪(新文件,尚未 git addM Modified(已修改) 文件已修改,但未提交 A Added(已添加) 新文件已添加到暂存区(git add 之后) D Deleted(已删除) 文件被删除,但尚未提交 R Renamed(已重命名) 文件被重命名

2.2修改文件

        这里我们对已上传的文件进行修改,并且提交上去我们就可以看到不同的颜色,他们对应不同的修改,下面会详细介绍。

        提交之后我们可以在这里看到一个直观的源代码管理图,它代表的是不同的版本,并且是图形化界面,比起命令行更加的直观。

        我们点击第二次提交可以看到一个新的对比文件,这是对比的上一次提交,左边是上一个版本,右边是此次的版本,绿色就代表是新增的内容,像下面的红色就代表删除的内容。可以更直观的看到修改的内容。

三.gitee与vscode的协作

1.协作用途

        在学习和开发过程中代码管理是至关重要的一环。使用 Git 进行版本控制可以大幅提高开发效率,而 Gitee 作为国内主流的 Git 托管平台,与 VS Code 结合使用,可以实现高效的本地与远程协作开发。

        在团队合作开发时,每个人都有自己的电脑,且可能不在一起,这时候仅仅依赖本地开发是不够的,必须依赖远程仓库来实现高效协作。所有团队成员在本地仓库中开发和修改代码,完成自己的功能后,将代码推送到远程仓库,确保所有人都能获取最新的代码版本。同时,团队成员也可以随时从远程仓库拉取最新代码,避免冲突,确保代码的同步和一致性。

        远程仓库不仅在团队合作中发挥着重要作用,对于个人开发者来说,同样是一个高效的代码管理工具。我们可以创建自己的远程仓库,将每次练习的代码提交到云端,确保代码不会因设备损坏或丢失而丢失。这样,即使换了一台电脑,只需从远程仓库拉取代码,就能无缝继续开发,而无需手动拷贝文件。此外,远程仓库还能帮助我们记录代码的演变过程,方便版本管理和回溯,避免因误操作导致数据丢失。长期积累下来,不仅能养成良好的编码习惯,还能建立自己的代码库,方便查找和复用,极大地提升开发效率。

2.创建gitee仓库

        这里拥有远程仓库服务的平台很多,例如gitLab、GitHub、gitee等,这里主要介绍gitee的使用,学会了这个其他平台其实都大同小异。

首先我们要创建一个gitee账号,这里就不多赘述了,用手机号注册一个就行。然后就是在gitee上创建一个仓库。

仓库名可以随便起自己喜欢的,如果只是自己用来学习保存代码,就直接用选开源的,这里我就以开源的为例,名称起好了点创建就行。

3.添加远程仓库

我们先点击克隆/下载这个按键,就可以看到这个提示框,这里我们先将初始化用户名和邮箱的命令在vscode中执行一下,方便提交被识别出来。

git config --global user.name \'你的用户名\' git config --global user.email \'设置的邮箱\'

这里的用户名使用的就是gitee的用户名,邮箱的话需要自己新添加一个,毕竟gitee用的是手机号实名注册并没有使用邮箱。

我们在vscode中打开终端,执行一下这两个命令。

如果要查看自己设置是否成功,可以打开c盘,进入用户,选择当前用户的文件夹,打开里面的一个.gitconfig文件,如果里面内容和你设置的一致,那就是成功了。

        接着我们将提示框中的第一个网址复制下来,然后照着下面选择添加远程存储库,这里又要你提供名称,不过这是针对本地仓库的,和远程仓库没有关系,我们直接用的是gitee,那就直接将其名称也起为gitee就行。

然后在源代码管理工具页面点击蓝色的发布branch,下面的管理图中显示紫色云的标记就是成功了

这里第一次同步的适合可能要填写用户名和密码,我这里时已经填过了所有没有弹出来。这里需要填写的用户名和密码有些不同。这里的用户名用的是下面红线@后面的内容,密码则是注册gitee时设置的密码。

4.将本地修改推送(push)到gitee远程仓库

        要将代码同步推送到远程仓库中,修改和提交与之前一样,但提交了之后会多显示一步同步更改操作,这里我们也可以看到我们没点同步时,我们本地的进度和我们云端的进度也是不一样的,所有我们点击这个同步更改。

我们再刷新一下库就可以看到我们提交上去的代码了。

5.从gitee中拉取(pull)代码

        当我们手上没带电脑时,又想继续把没写完的代码写完,那么我们就要把gitee上的代码拉下来,这时候我们可以点击橙色的克隆/下载那个按钮,这样会弹出一个提示框。

这里提示的很清楚,我们只要新建一个文件再打开终端,将那个命令执行一下然后就可以看到我们的代码了,还有源代码管理器中的设置。这就是我们所说的去gitee或者GitHub上把代码拉下来,这样我们随时随地只要手中有电脑都可以就行操作。

四.总结

        VS Code 和 Gitee 的组合,为开发者提供了高效、便捷的代码管理和协作工具。无论是个人项目还是团队开发,掌握这两款工具的使用都能显著提升工作效率。通过本文的指导,我想你应该也掌握了基本的用法。接下来,重要的就是要多练,小编可能也有很多忽略了的地方,遇到问题也可以直接不管了,先乱点。毕竟重要的是动手和敢操作。

当然如果你有其他问题或想分享使用心得,欢迎在评论区留言!🚀

母婴知识百科