一文学会VSCode代码同步至GitHub

一、上手GitHub

1. 了解GitHub

上手GItHub之前首先要了解一下GItHub的关键词，如下：

(1) 仓库 (Repository) 仓库是用来存放项目代码，每一项目对应一个仓库。

(2) 收藏 (Star) 收藏别人的仓库，方便自己查找。

(3) 复制/克隆项目 (Fork)。
别人仓库的代码可以克隆到自己的账号下的中，可以对仓库进行更改。自己在仓库中对bug进行更改不会影响原作者的仓库，但可以通过向原作者发起请求 (Pull Request)。Fork也可以理解为分叉。

(4) 关注(Watch)
使用Watch功能关注了其他作者的仓库，如果作者的仓库发生更新，会发送通知到自己的账户上(类似于关注了别人就可以关注别人的动态)。

(5) 事物卡片(Issue)
发现别人的仓库代码出现Bug或有疑问时，可以通过Issue来和代码的作者进行咨询和讨论。然后作者可以收到别人的提问，然后可以回复。回复完成可以关闭当前的Issue。

2. 注册GitHub账号

此处忽略

3. 新建仓库

按以下步骤创建

点击新建仓库按钮跳转新建仓库页面，如下图

点击Create repository按钮创建仓库会调整至以下页面

这里我们点击在仓库中新建一个文件以演示github的使用。

这里我们在详细备注中输入版本1后点击绿色按钮创建文件，创建成功后将自动跳转至文件页，如下图

点击刚创建的文件可以对文件进行编辑等操作，以上就是新建仓库的基本操作。

二、Git实操

1. 了解Git

什么是Git？
Git（读音为/gɪt/）是一个开源的[分布式]版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。
Git分区有哪些？
(1) 工作区(Working Directory) 添加、编辑、修改文件等操作。

(2) 暂存区(Stage) 暂存已修改的文件，最后会统一提交到Git仓库中。

(3) Git仓库(Git Repository) 最终确定的文件保存到Git仓库成为一个新版本。

2. clone仓库

在从GitHub上克隆资源前，建议新建一个合适的文件夹以存放，这里我在桌面新建一个test文件夹。

有两种克隆GitHub资源的方式，如下图

我们这里选择使用git克隆文件。在test文件夹里右键打开git Bash面板

输入指令git clone "资源链接"后回车
得到上图类似响应结果表示克隆成功。文件夹内会新增克隆下来的仓库，如下图
打开文件夹可以看到有隐藏文件夹.git（记得启动隐藏的项目开关）以及先前在仓库内新建的文件lao.md。
打开文件可以看到与仓库中文件完全一致的内容，如下图

3. 使用Git上传本地更新至远程仓库

在使用git上传更新前需要安装并配置git，如何配置git可以参考以下文章
git使用指南
下图描述了GIt的核心原理

接着我们回归主题，如何使用GIt将本地的更新上传至远程仓库？
修改文件lao.md

进入文件test（进入有.git隐藏文件的目录才能上传）输入指令git add '文件名'上传修改过的文件至暂存区，再输入git commit -m "备注信息"将暂存区的文件保存到本地仓库，我们可以使用指令git log查看commit记录，如下

再使用指令git push将本地仓库的文件上传至远程仓库GitHub。

打开GItHub的demo仓库中的lao.md可以看到内容和本地文件lao.md成功同步。

4. 使用Git同步远程仓库值本地文件(工作区)

学会了如何上传本地更新至远程仓库,当然也得学会如何拉取远程的更新至本地仓库
两种方式：

1. git fetch配合git diff '远程仓库名/分支名'
2. git pull

fetch和pull的主要区别是：fetch不会直接更新至本地文件，它只是拉到了本地版本库，使用diff可以查看本地版本库和本地文件的区别，而pull是直接更新至本地文件。
为了减少冲突，往往是先使用fetch拉取至本地版本库，再diff查看是否有冲突，如果没有冲突则再使用pull把远程仓库的内容直接整合到工作区（本地文件）。
下面我们通过实例来测试一下
修改远程仓库的文件lao.md并提交，如下图

下面我们在Git上使用指令fetch和diff更新本地仓库

确认无误再使用pull更新至工作区。

查看本地文件lao.md确认成功同步

5. GIt其他常用命令

三、VSCode与Git和GitHub

最后我们再讲讲如何使用VSCode同步更新代码至远程仓库

1. VSCode上传本地更新至远程仓库

使用VSCode打开仓库demo的文件夹，如下图

修改文件lao.md并保存后，点击左侧源代码管理页，如下图

暂存更改后，输入备注信息后点击提交如下图

点击同步更改按钮后会出现提示框选择确定

查看远程仓库demo的lao.md文件，可以看到成功同步更新

2. VSCode新建分支并同步远程仓库

下面再介绍一下使用VSCode如何在远程仓库创建分支以及分支合并

按上图步骤点击创建分支后输入分支名回车确认

新建分支成功后可以看到左下角会自动切换到新建的分支

在新分支上，我们再次修改文件lao.md，如下图，左侧会出现新的更改

补充：点击更改下的文件，默认情况下会出现两个窗口用于对比，更改前后更改后的区别，确认无误后可暂存更改。
暂存更改并添加备注信息后提交，更新的内容会提交至本地仓库的新分支中，如下图，点击发布分支会将本地仓库中的新分支同步到远程仓库。
回到GitHub上可以看到新分支已经同步了，如下图

3. 合并分支并同步至远程仓库

以上是新建分支并提交分支的步骤，下面再讲讲如何合并分支至主分支。
点击VSCode左下角切换分支至主分支，按步骤点击合并分支，如下图
选择所要合并的temp分支。
可以看到在temp分支中更改的内容已经同步到主分支的本地仓库中，再点击同步更改按钮后则会同步更改至远程仓库，并自动拉取至本地工作台。

回到GItHub上，可以看到成功合并分支内容至主分支上了

以上就是VSCode代码同步至GitHub的基础内容。
本文参考文章：

1. 【git及GitHub使用总结】（一）
   
2. git使用指南|John知识分享
   本文参考视频：
3. Git工作流和核心原理 | GitHub基本操作 | VS Code里使用Git和关联GitHub