VSCode上的Git使用手记(持续更新ing...)

简介: 本笔记是我想要学习如何将本地文件发布到GitHub上时开始看廖雪峰的Git教程,然后打开了VSCode,发现VSCode上面集成的Git辅助使用功能真的很好用……基本上到了不用看教程都可以猜懂的地步。为了整理、规范使用技巧,在经过了一番学习和试验之后,觉得以这样一篇使用手记的形式发布使用技巧相关的博文,以记录和沉淀经验,并帮助更多Git和VSCode初学者少踩坑。本文参考的教程、文档等内容见本文末尾。
  1. 注意:VSCode要求本机上已经下载了Git,而且版本必须新于2.0.0(我下载的是2.31.1)

Windows版本可以通过官网这个网址下载最新版。除了路径我几乎都选的默认选项。


  1. 打开VSCode中版本控制界面Source Control view的位置:点最左边这个图标(或者使用快捷键Ctrl+Shift+G)

image.png


  1. 在commit的时候,如果Git配置中没有设置好username和email的话,会使用本地机器上的信息,详细解释见Git官方文档对这部分的解释(具体细节我还没有研究)。这个的解决方式就是在Git Bash中提前进行设置:

git config --global user.name "您的用户名"

git config --global user.email "您的邮箱"


  1. 如果当前文件夹还没有初始化git,可以在Git Bash中使用git init,也可以直接在Source Control view点击这个按钮:

image.png

此外,如果只是单纯想将项目发布到GitHub上,也可以尝试点击这个按钮:(我还没有尝试过,但是看官方提供的视频感觉也很容易,就傻瓜操作。有条件的读者可以看下Source Control Tip 3: Publishing Repos)

image.png


  1. VSCode中,当前工作文件夹下子文件夹作为Git工作区是可以的,Git工作区之外的文件都不受影响。


  1. Source Control Repositories这个可以勾上

image.png


  1. 在当前文件夹下做的修改都会体现在Source Control view中。逻辑与Git类似,可以去学一下廖雪峰课程了解一些Git的基础常识。


  • 文件修改后首先会出现在changes区:

新增文件,会带个“U”标识

image.png


  • 修改文件,会带个“M”标识

点击文件名可以在右侧工作区显示变化详情(注意这个右侧的编辑栏仍然可以编辑,这是动态比较)

image.png


  • 删除文件,会在文件名上增加下划线,并带个“D”标识

image.png


  • 点击文件名或者其旁边的“Open File”图标都可以打开文件。

open file图标:

image.png

点击“Discard Changes”可以丢弃改动。

discard changes图标:

image.png

点击“Stage Changes”可以将这一改动添加到Staged Changes(类似于用git add将文件添加到缓存区)。

stage changes图标:

image.png

上述两个图标在changes旁边也有,意思就是对changes区中所有的文件作此修改:

image.png


  • 保存修改后,文件就转入staged changes区:

image.png

在Changes这一字符右侧点击上述两个图标可以对所有工作区变动执行相应功能。

对Staged Changes区的文件也可以Unstage Changes再放回Changes区(类似于git reset)。


  • 点击这两个对钩(commit)之一,类似于git commit,可以在弹出的输入框内写注释:

image.png


  • 在这个输入框里直接写注释,然后用Ctrl+Enter可以一步完成全部git add和git commit的工作:

image.png


  • 可能是由于VSCode和GitHub是一家(有一个共同的母亲微软),所以对GitHub支持非常好……除了上面提到的直接发布到GitHub,也可以点击这个图标:

image.png


也是直接发布到GitHub。直接关联你的GitHub账号,然后生成对应文件夹名的项目,还可以选项目是public还是private。然后等待上传即可。由于过程比较傻瓜,我当时几乎没反应过来就做完了,所以没有截图。


  • 如果要添加别的远程库也可以用这个:

image.png

可以自己写。如果已经将VSCode与GitHub账号进行了绑定,点击“Add remote from GitHub”可以直接选自己账号下的文件夹。

image.png


  • pull和push也可以直接从上图的下拉框里选。

sync是先push后pull


  • VSCode还可以设置定时自动fetch。但是我没设。


  1. 可以使用Ctrl+Shift+P调出Command Palette,使用更多语法(如Git: Undo Last Commit等):

image.png


  1. 此外VSCode左下角也有快捷工具栏:

image.png


  1. 可以在Explorer界面看到文档的时间线:(蓝框打码的是我的用户名)

image.png

点击某个commit可以看到与当前文件的对比。

右键commit可以选择:对比,复制commit id 或 commit message

image.png


  1. 复制commit id功能可以用于回退版本:git reset --hard (复制的commit id)

这样就会使对应版本之后的版本全部消失,当前文件回到对应版本


  1. 点击View > Output然后选择Git可以打开Git output window


  1. .gitignore文件保存后就可以生效,Git会忽略其中配置的文件(但是我看了一下好像如果已经上传到版本库(完成commit)了,就没用了。但是我不确定,我以后还准备继续实验能否作此工作),被忽略的文件在explorer中会变灰:

image.png


  1. 另,仍然建议用命令行进行的Git操作:


  • git clone

以我的项目PolarisRisingWar/rgb-experiment: RGB-experiment package, run GNN baseline experiment() function.为例,可以直接找到clone的链接:

image.png

点击复制,然后在命令行中cd到想要放置项目的文件,输入 git clone 复制的网址。如果无法下载可以将https改成git。


Gitee的类似,继续以我的项目cs224w-2021-winter-colab: cs224w(图机器学习)2021冬季课程的colab为例,复制的位置在这里:

image.png

相关文章
|
6月前
|
开发工具 git
vscode 查看git提交日志
vscode 查看git提交日志
283 0
|
7月前
|
开发工具 git
vscode编辑器里怎么显示.git隐藏文件夹到目录里
vscode编辑器里怎么显示.git隐藏文件夹到目录里
99 0
|
4天前
|
JavaScript 开发工具 git
【Vue全家桶实现电商系统】— VSCode配置Git(二)
【Vue全家桶实现电商系统】— VSCode配置Git(二)
|
7月前
|
Shell Linux 网络安全
git实战—Gerrit配置SSH key & 下载代码到本地 & 使用VScode编辑器编辑提交代码——2023.07
git实战—Gerrit配置SSH key & 下载代码到本地 & 使用VScode编辑器编辑提交代码——2023.07
360 0
|
8月前
|
数据可视化 JavaScript 开发工具
【全网最全面】VS Code使用Git可视化管理源代码详细教程
【全网最全面】VS Code使用Git可视化管理源代码详细教程
516 0
|
8月前
|
开发工具 git
如何保持 Git Fork 持续更新
如何保持 Git Fork 持续更新
|
10月前
|
Shell 开发工具 git
2021年了, 如何将 Git Bash 设置为 VSCode 的终端?
2021年了, 如何将 Git Bash 设置为 VSCode 的终端?
184 0
|
前端开发
前端知识学习案例6vs code-git面板
前端知识学习案例6vs code-git面板
34 0
前端知识学习案例6vs code-git面板
|
3天前
|
缓存 数据可视化 网络安全
Git命令大全
Git命令大全
62 1
|
3天前
|
开发工具 git
Git教程:深入了解删除分支的命令
【4月更文挑战第3天】
67 0
Git教程:深入了解删除分支的命令