|
|
@ -0,0 +1,480 @@ |
|
|
|
# 水杉码园学生使用手册(进阶版) |
|
|
|
|
|
|
|
[toc] |
|
|
|
|
|
|
|
## 一、前言 |
|
|
|
|
|
|
|
水杉码园是一个代码托管与协作平台,利用开源项目Gitea进行搭建,运行快速、使用体验良好,支持跨平台以及多种功能。 |
|
|
|
|
|
|
|
通过对开源平台Gitea的深度定制,让教育与项目协作相结合,更符合学校的教学场景,更有利于教师和学生的课外互动、学生与学生的作业协作;让教育与激励相结合,调动学生的参与热情,科学公正地评判平时成绩;让教育与数据相结合,从学生出发到学生中去,通过自有平台的数据采集与分析,重新审视现有的教育模式,更好地解决教育问题。 |
|
|
|
|
|
|
|
本文主要介绍如何在VSCode中集成使用Git,以及如何在仓库托管平台上进行代码托管与协作。 |
|
|
|
|
|
|
|
## 二、Git |
|
|
|
|
|
|
|
**1、Git是什么** |
|
|
|
|
|
|
|
Git是一个版本控制系统工具,它可以帮你管理项目,记录每一次提交的变化,以方便你在发生错误时进行回滚。它几乎所有的控制操作都可以在本地执行,不需要网络开销的好处是Git的操作十分迅速。 |
|
|
|
|
|
|
|
|
|
|
|
**2、安装Git** |
|
|
|
|
|
|
|
访问 https://git-scm.com/downloads ,根据自己的机器平台下载合适的安装包后进行安装。 |
|
|
|
|
|
|
|
|
|
|
|
**3、添加到Path** |
|
|
|
|
|
|
|
打开终端,输入git并回车。如果有git信息,则说明已经将git添加到path中,否则请找到git安装位置,然后添加到你系统的path中。各系统方式不同,请自行查阅资料。 |
|
|
|
|
|
|
|
正常情况下的反应如下: |
|
|
|
|
|
|
|
![git1](image/git1.png) |
|
|
|
|
|
|
|
|
|
|
|
**4、详细Git教程** |
|
|
|
|
|
|
|
参考:https://www.liaoxuefeng.com/wiki/896043488029600/ |
|
|
|
|
|
|
|
|
|
|
|
**5、Git命令简介** |
|
|
|
|
|
|
|
① 创建仓库 |
|
|
|
|
|
|
|
`$ git init` |
|
|
|
|
|
|
|
这会将当前目录创建为一个仓库,并产生一个新的名为.git的文件夹,其中存储着版本控制信息,我们不需要去在意里面具体是什么。这样,我们就创建好了一个空的仓库。 |
|
|
|
|
|
|
|
② 添加文件并查看仓库 |
|
|
|
|
|
|
|
现在让我们尝试在我们新的空仓库(就是你创建的文件夹下)中添加一个新的文件,可以是一个word,可以是一份c语言源文件,其他什么文件都可以。当你添加了一个文件后,我们使用下面的命令去查看当前的仓库情况: |
|
|
|
|
|
|
|
`$ git status` |
|
|
|
|
|
|
|
终端会显示出你目前在master分支上还没有过提交,并且有一个文件还未被git追踪。 |
|
|
|
|
|
|
|
![](image/git8.png) |
|
|
|
|
|
|
|
③ 追踪、提交文件 |
|
|
|
|
|
|
|
接着我们使用下面命令去追踪文件: |
|
|
|
|
|
|
|
`$ git add .` |
|
|
|
|
|
|
|
注意add后面这个点不要漏了,这代表加入所有未被追踪的文件到git中。然后使用下面的命令去提交我们这次文件改动,顺带写上一些信息表示我们这次提交的主要内容。 |
|
|
|
|
|
|
|
`$ git commit -m "my first file"` |
|
|
|
|
|
|
|
注意使用选项-m去加上提交的信息,如果直接使用git commit会调用编辑器让你继续输入你这次提交的主要信息。 |
|
|
|
|
|
|
|
④ 查看分支 |
|
|
|
|
|
|
|
紧接着,你可以在终端中输入如下命令查看分支: |
|
|
|
|
|
|
|
`$ git branch` |
|
|
|
|
|
|
|
结果应该如下图所示: |
|
|
|
|
|
|
|
![](image/git9.png) |
|
|
|
|
|
|
|
注意,如果你发现没有任何输出,那就说明上面的commit操作你还没成功,因为我们刚刚创建的仓库是空的,在Git中分支必须指向一个commit。如果还没有commit任何文件,那么就看不到分支。当我们第一次提交后就会自动将master分支作为我们的主要分支,指向你的第一次提交。然后你再使用一次git branch命令就能查看分支,并且分支名字前面带*的就是当前所处的分支。 |
|
|
|
|
|
|
|
⑤ 创建并切换分支 |
|
|
|
|
|
|
|
Master分支一般更多是用来保存完整的项目内容,当你进行开发或者修改bug的时候应该切换到新的分支进行开发工作。你可以使用下面命令创建一个新的分支: |
|
|
|
|
|
|
|
`$ git branch dev` |
|
|
|
|
|
|
|
这样,你就创建了一个名为dev的分支。 |
|
|
|
|
|
|
|
你可以使用下面命令切换分支: |
|
|
|
|
|
|
|
`$ git checkout dev` |
|
|
|
|
|
|
|
这样你就切换回了master分支。你也可以把这两步操作合并一下,用这个命令: |
|
|
|
|
|
|
|
`$ git checkout -b dev` |
|
|
|
|
|
|
|
这样你就会创建dev分支然后切换过去。 |
|
|
|
|
|
|
|
**6、常用Git命令** |
|
|
|
|
|
|
|
- **新建代码库** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 在当前目录新建一个Git代码库 |
|
|
|
$ git init |
|
|
|
|
|
|
|
# 新建一个目录,将其初始化为Git代码库 |
|
|
|
$ git init [project-name] |
|
|
|
|
|
|
|
# 下载一个项目和它的整个代码历史 |
|
|
|
$ git clone [url] |
|
|
|
``` |
|
|
|
|
|
|
|
- **配置** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 显示当前的Git配置 |
|
|
|
$ git config --list |
|
|
|
|
|
|
|
# 编辑Git配置文件 |
|
|
|
$ git config -e [--global] |
|
|
|
|
|
|
|
# 设置提交代码时的用户信息 |
|
|
|
$ git config [--global] user.name "[name]" |
|
|
|
$ git config [--global] user.email "[email address]" |
|
|
|
``` |
|
|
|
|
|
|
|
- **增加/删除文件** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 添加指定文件到暂存区 |
|
|
|
$ git add [file1] [file2] ... |
|
|
|
|
|
|
|
# 添加指定目录到暂存区,包括子目录 |
|
|
|
$ git add [dir] |
|
|
|
|
|
|
|
# 添加当前目录的所有文件到暂存区 |
|
|
|
$ git add . |
|
|
|
|
|
|
|
# 添加每个变化前,都会要求确认 |
|
|
|
# 对于同一个文件的多处变化,可以实现分次提交 |
|
|
|
$ git add -p |
|
|
|
|
|
|
|
# 删除工作区文件,并且将这次删除放入暂存区 |
|
|
|
$ git rm [file1] [file2] ... |
|
|
|
|
|
|
|
# 停止追踪指定文件,但该文件会保留在工作区 |
|
|
|
$ git rm --cached [file] |
|
|
|
|
|
|
|
# 改名文件,并且将这个改名放入暂存区 |
|
|
|
$ git mv [file-original] [file-renamed] |
|
|
|
``` |
|
|
|
|
|
|
|
- **代码提交** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 提交暂存区到仓库区 |
|
|
|
$ git commit -m [message] |
|
|
|
|
|
|
|
# 提交暂存区的指定文件到仓库区 |
|
|
|
$ git commit [file1] [file2] ... -m [message] |
|
|
|
``` |
|
|
|
|
|
|
|
- **分支** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 列出所有本地分支 |
|
|
|
$ git branch |
|
|
|
|
|
|
|
# 列出所有远程分支 |
|
|
|
$ git branch -r |
|
|
|
|
|
|
|
# 列出所有本地分支和远程分支 |
|
|
|
$ git branch -a |
|
|
|
|
|
|
|
# 新建一个分支,但依然停留在当前分支 |
|
|
|
$ git branch [branch-name] |
|
|
|
|
|
|
|
# 新建一个分支,并切换到该分支 |
|
|
|
$ git checkout -b [branch] |
|
|
|
|
|
|
|
# 切换到指定分支,并更新工作区 |
|
|
|
$ git checkout [branch-name] |
|
|
|
|
|
|
|
# 建立追踪关系,在现有分支与指定的远程分支之间 |
|
|
|
$ git branch --set-upstream [branch] [remote-branch] |
|
|
|
|
|
|
|
# 合并指定分支到当前分支 |
|
|
|
$ git merge [branch] |
|
|
|
``` |
|
|
|
|
|
|
|
- **远程同步** |
|
|
|
|
|
|
|
```shell |
|
|
|
# 下载远程仓库的所有变动 |
|
|
|
$ git fetch [remote] |
|
|
|
|
|
|
|
# 显示所有远程仓库 |
|
|
|
$ git remote -v |
|
|
|
|
|
|
|
# 显示某个远程仓库的信息 |
|
|
|
$ git remote show [remote] |
|
|
|
|
|
|
|
# 增加一个新的远程仓库,并命名 |
|
|
|
$ git remote add [shortname] [url] |
|
|
|
|
|
|
|
# 取回远程仓库的变化,并与本地分支合并 |
|
|
|
$ git pull [remote] [branch] |
|
|
|
|
|
|
|
# 上传本地指定分支到远程仓库 |
|
|
|
$ git push [remote] [branch] |
|
|
|
|
|
|
|
# 强行推送当前分支到远程仓库,即使有冲突 |
|
|
|
$ git push [remote] --force |
|
|
|
|
|
|
|
# 推送所有分支到远程仓库 |
|
|
|
$ git push [remote] --all |
|
|
|
``` |
|
|
|
|
|
|
|
## 三、Visual Studio Code |
|
|
|
|
|
|
|
1、安装VSCode |
|
|
|
|
|
|
|
访问 https://code.visualstudio.com/Download 下载符合您机器平台的安装包后进行安装。 |
|
|
|
|
|
|
|
|
|
|
|
2、界面介绍 |
|
|
|
|
|
|
|
VSCode打开后的界面如下图所示: |
|
|
|
|
|
|
|
![VSCode 主界面](image/vscode.png) |
|
|
|
|
|
|
|
A区是侧边活动栏,B区是底部栏,C区是编辑区域,D区是面板区域,E区是状态栏,当然顶部还有一个菜单栏。VSCode区域划分的非常友好,对文件进行编辑的同时也可以在面板区域中查看终端的输出信息等。 |
|
|
|
|
|
|
|
|
|
|
|
3、插件介绍 |
|
|
|
|
|
|
|
能够让VSCode火爆的原因就是它拥有庞大的插件库,在A区的活动栏中选择插件活动,就可以在市场中搜索你想要的插件。它可以帮你实现代码高亮、自动补全、格式校验等功能,对编辑代码有着非常好的帮助。 |
|
|
|
|
|
|
|
|
|
|
|
## 四、Git SSH配置 |
|
|
|
|
|
|
|
使用SSH的方式拉取仓库中的代码或资料需要进行如下配置,使用HTTP的方式拉取仓库中的代码或资料可以本章节的配置。 |
|
|
|
|
|
|
|
两种方式的主要区别在于git clone时使用的URL不同。 |
|
|
|
|
|
|
|
![image-20210306195002341](image/image-20210306195002341.png) |
|
|
|
|
|
|
|
|
|
|
|
1、查看邮箱,并配置Git信息 |
|
|
|
|
|
|
|
登录水杉码园,单击水杉码园首页右上角的头像,单击“个人信息”。 |
|
|
|
|
|
|
|
![](image/gitea2.png) |
|
|
|
|
|
|
|
查看你水杉码园账户的对应邮箱,等下要用。 |
|
|
|
|
|
|
|
![](image/gitea3.png) |
|
|
|
|
|
|
|
打开终端,输入以下命令用以设置你本地git的姓名和邮箱信息。请确保邮箱和刚刚水杉码园中查看到的邮箱相同。 |
|
|
|
|
|
|
|
`$ git config --global user.name "Your Name"` |
|
|
|
|
|
|
|
`$ git config --global user.email yourmail@example.com` |
|
|
|
|
|
|
|
设置完后可以通过下面命令查看姓名和邮箱: |
|
|
|
|
|
|
|
`$ git config user.name` |
|
|
|
|
|
|
|
`$ git config user.email` |
|
|
|
|
|
|
|
正常情况下的输出如图所示: |
|
|
|
|
|
|
|
![](image/git2.png) |
|
|
|
|
|
|
|
|
|
|
|
2、在本地(你的笔记本电脑)生成SSH密钥 |
|
|
|
|
|
|
|
在命令行输入ssh-keygen -t rsa -C ‘你的邮箱地址’后回车,如下: |
|
|
|
|
|
|
|
![](image/git3.png) |
|
|
|
|
|
|
|
红框中是提示你要将密钥存放在哪里,括号里的是默认的存放路径,请记住这个路径,我们之后需要这个路径找到密钥。 |
|
|
|
|
|
|
|
接着直接按回车,如果你之前也按照默认的路径生成过SSH密钥,会出现如下图中的情况,询问你是否要覆盖。 |
|
|
|
|
|
|
|
![](image/git4.png) |
|
|
|
|
|
|
|
输入y覆盖原有的密钥,或者之前没有生成过密钥,就会出现如下图中情况: |
|
|
|
|
|
|
|
![](image/git5.png) |
|
|
|
|
|
|
|
直接回车不用管,如下: |
|
|
|
|
|
|
|
![](image/git6.png) |
|
|
|
|
|
|
|
直接回车不用管,之后如下: |
|
|
|
|
|
|
|
![](image/git7.png) |
|
|
|
|
|
|
|
可以看到你的密钥已经创建成功。 |
|
|
|
|
|
|
|
|
|
|
|
3、上传密钥到水杉码园 |
|
|
|
|
|
|
|
登陆水杉码园后,在右上角头像的下拉框中点击设置 |
|
|
|
|
|
|
|
![](image/gitea4.png) |
|
|
|
|
|
|
|
在标签中选择SSH/GPG密钥 |
|
|
|
|
|
|
|
![](image/gitea5.png) |
|
|
|
|
|
|
|
在管理SSH密钥卡片右侧点击增加密钥 |
|
|
|
|
|
|
|
![](image/gitea6.png) |
|
|
|
|
|
|
|
打开你的id_rsa.pub文件,将里面所有的内容复制到密钥内容一栏中,然后给这个密钥取一个名字,比如:我的MacBook。点击绿色的增加密钥按钮后,就成功添加了SSH密钥。 |
|
|
|
|
|
|
|
![](image/gitea7.png) |
|
|
|
|
|
|
|
|
|
|
|
4、新建远程仓库 |
|
|
|
|
|
|
|
点击头像边上的加号,接着点击创建仓库 |
|
|
|
|
|
|
|
![](image/gitea8.png) |
|
|
|
|
|
|
|
为仓库取一个名字后点击下面的创建仓库按钮,就可以正常创建仓库了,如果你不想让别人看到你的仓库内容,记得设置你的仓库为私有。 |
|
|
|
|
|
|
|
![](image/gitea9.png) |
|
|
|
|
|
|
|
|
|
|
|
5、你的仓库SSH地址 |
|
|
|
|
|
|
|
当你创建完仓库后,你会跳转到仓库的主页,如下图所示: |
|
|
|
|
|
|
|
![](image/gitea10.png) |
|
|
|
|
|
|
|
上图红框中,选择SSH,就可以看到你仓库的SSH地址,这个之后会用到。 |
|
|
|
|
|
|
|
|
|
|
|
## 五、VS Code集成Git使用 |
|
|
|
|
|
|
|
1、拉取仓库 |
|
|
|
|
|
|
|
打开VSCode,在左边选择git活动。 |
|
|
|
|
|
|
|
![](image/vscode2.png) |
|
|
|
|
|
|
|
点击上图红框中的按钮,然后在弹出的框中复制你刚才仓库的SSH地址,然后回车。 |
|
|
|
|
|
|
|
![](image/vscode3.png) |
|
|
|
|
|
|
|
选择仓库的存放地址,即可将仓库拉取到本地。接着右下角会弹出一个是否打开该仓库的提示,点击open打开该仓库。 |
|
|
|
|
|
|
|
|
|
|
|
2、修改仓库文件 |
|
|
|
|
|
|
|
你可以随意修改仓库文件,只要添加了一些新的文件或者有了一些新的修改即可。 |
|
|
|
|
|
|
|
![](image/vscode4.png) |
|
|
|
|
|
|
|
我们添加了两个源文件用于进行接下去的步骤 |
|
|
|
|
|
|
|
|
|
|
|
3、暂存修改的文件 |
|
|
|
|
|
|
|
按下图进行操作,这会将你所有的修改放入暂存区 |
|
|
|
|
|
|
|
![](image/vscode5.png) |
|
|
|
|
|
|
|
|
|
|
|
4、提交暂存的文件 |
|
|
|
|
|
|
|
按下图进行操作,将暂存区的修改文件进行提交。这不是提交到远程仓库,是提交到本地git,产生一个新的commit。 |
|
|
|
|
|
|
|
![](image/vscode6.png) |
|
|
|
|
|
|
|
紧接着,在弹出的框中,输入你这次提交的备注信息,用于说明你这次commit主要的内容是什么。 |
|
|
|
|
|
|
|
![](image/vscode7.png) |
|
|
|
|
|
|
|
|
|
|
|
5、推送到水杉码园远程仓库 |
|
|
|
|
|
|
|
![](image/vscode8.png) |
|
|
|
|
|
|
|
即可正确推送到水杉码园。 |
|
|
|
|
|
|
|
|
|
|
|
6、切换分支 |
|
|
|
|
|
|
|
通常我们不是只在一个分支上开发,master分支用来存放当前开发的稳定分支。可以按照下图产生并切换到新分支。 |
|
|
|
|
|
|
|
![](image/vscode9.png) |
|
|
|
|
|
|
|
## 六、VS Code中GitLens的使用 |
|
|
|
|
|
|
|
**1、GitLens是什么** |
|
|
|
|
|
|
|
GitLens 是**一个 VS Code 扩展,可以帮助你更好地使用Git 和GitHub** 。 它提供了许多功能,包括在编辑器内查看Git 信息,在编辑器内比较文件版本,查看代码提交历史记录等一些功能。如今已经有接近三千万次的下载量。 |
|
|
|
|
|
|
|
**2、如何安装GitLens** |
|
|
|
|
|
|
|
在扩展中直接搜索GitLens,出现的第一个就是需要的扩展,然后点击安装 |
|
|
|
|
|
|
|
![](image/down1.png) |
|
|
|
|
|
|
|
当你的VS Code左侧有这个图标时,表示安装成功了 |
|
|
|
|
|
|
|
![image-20231214193733674](image/down2.png) |
|
|
|
|
|
|
|
**3、如何使用GitLens** |
|
|
|
|
|
|
|
首先点击GitLens图标,点击该按键,打开本地项目(可以按照步骤五的配置配置)或者拉取目标远程仓库(如拉取Github项目) |
|
|
|
|
|
|
|
![](image/use1.png) |
|
|
|
|
|
|
|
然后就可以使用了 |
|
|
|
|
|
|
|
**4、GitLens的页面** |
|
|
|
|
|
|
|
完成以上步骤后就可以使用GitLens了 |
|
|
|
|
|
|
|
首先介绍一下GitLens的检查侧边栏包括: |
|
|
|
|
|
|
|
- 提交详细信息 |
|
|
|
- 线路历史 |
|
|
|
- 文件历史记录 |
|
|
|
- 可视文件历史记录 |
|
|
|
- 搜索与比较 |
|
|
|
|
|
|
|
如图所示 |
|
|
|
|
|
|
|
![](image/use2.png) |
|
|
|
|
|
|
|
GitLens的源码侧边栏包括: |
|
|
|
|
|
|
|
- 提交 |
|
|
|
- 分支机构 |
|
|
|
- 遥控器 |
|
|
|
- 藏品 |
|
|
|
- 标签 |
|
|
|
- 工作树 |
|
|
|
- 贡献者 |
|
|
|
- 存储库 |
|
|
|
|
|
|
|
![](image/use3.png) |
|
|
|
|
|
|
|
其他view的详情可在https://help.gitkraken.com/gitlens/side-bar/此网站查询 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**5、GitLens的功能** |
|
|
|
|
|
|
|
- 修订历史 |
|
|
|
|
|
|
|
![](image/use4.png) |
|
|
|
|
|
|
|
点击代码右上角的这个按钮可以进入代码修订模式,可以比较当前文件与修订之前的文件,效果如下图所示。 |
|
|
|
|
|
|
|
![](image/use5.png) |
|
|
|
|
|
|
|
- 显示信息在文件顶部和代码块上(可自定义信息) |
|
|
|
|
|
|
|
![](image/use6.png) |
|
|
|
|
|
|
|
如最近更改,作者,时间等信息等 |
|
|
|
|
|
|
|
- 鼠标悬停 |
|
|
|
|
|
|
|
![](image/use7.png) |
|
|
|
|
|
|
|
将鼠标悬停在当前行可以展示代码信息(可自定义) |
|
|
|
|
|
|
|
也可将鼠标悬停在注视上,可以显示更多的提交详情信息。 |
|
|
|
|
|
|
|
其余功能可以在https://help.gitkraken.com/gitlens/gitlens-features/此网站查询 |
|
|
|
|