新手(3)—VSCode上的GitHub实现代码管理

转载标明出处!

新手(3)—VSCode运用GitHub实现代码管理

转载标明出处!

文章目录

  • 新手(3)---VSCode运用GitHub实现代码管理
    • 1. 介绍
    • 2. 预备工具
      • 2.2 工具
    • 3. 教程
      • 3.1 New repository
      • 3.2 Git 安装
      • 3.3 VSCode绑定 GitHub
      • 3.4 基础了解
      • 3.5 代码上传
        • Clone
        • Commit
        • Push
      • 3.6 回滚版本
      • 3.7 比较代码

1. 介绍

​ 大家好,最近还是在做项目开发,发现如果没有一个代码管理器帮助管理所开发的工程,那是非常糟糕的。在大学写毕业论文期间,把每次更新了新的东西时候,压缩成 .zip 格式,然后添加上注释。。。想想大家就知道有多愚蠢了。工作后慢慢接触了 Tortiose SVN 代码托管软件,也就是“小乌龟”,对于简单的要进行版本迭代更新来说,Tortiose SVN 足够用,且操作比较简单,它可以在本地以及服务器端建立仓库,然后进行代码的管理,但是它缺点也比较明显,个人认为在团队协同开发这方面 Tortiose SVN 做得就比较差了。

​ 这个问题,GitHub 就能够完美解决,并且是大 BOSSGitHub 优点就特别多了,

  • GitHub 是开源社区及私有软件项目的托管平台,程序员的 “情人”。
  • 企业代码多人协同开发软件首选之二。

GitHub 虽功能强大,但在早期操作上,代码版本更新对于新手来说,还是比较繁琐,难懂。现在 VSCode上支持 GitHub 的操作,基本上我认为是成熟了,大部分操作都是有图形化界面,易于理解且操作简单。GitHub 上有的 clone(克隆)、 push(推送)、commit(提交) 、pull(拉取)等功能,VSCode上都已经集成了。并且,并且,并且,VSCode通过远程连接云服务器,也能够管理服务器里的代码,所有 Git 功能都能够使用,这点也是很牛逼。

​ 花费了一下午,终于搞清楚它的使用,当然有些地方可能说的不是特别好,希望能够指出,谢谢大家!那接下来一些操作,我希望大家先浏览几遍之后,在去尝试操作,这样的话,能够加深理解每一步它的意义,真正学懂它。那这里操作,我们就不使用其他云服务器,直接在 Windows上操作,操作方式都是一样的。

提醒:很多人VScode喜欢切换成中文的,建议换成英文,作为一名程序员避免不了英语的。(逃不掉^ ^)

2. 预备工具

2.2 工具

  • VSCodeWIN版本下载

  • git WIN版本下载

  • git WIN10版本镜像下载

  • GitHub 账号注册

    这是必须要准备好的工具,至于安装教程,大家可以百度搜一下,我们这里就不多讲。主要说一下,Git WIN 这里我们需要下载,因为对于一些特殊功能,可能还是需要用到 Git 命令,但也就一两个。

3. 教程

  • GitHub 新建仓库(repository),这个仓库是你的项目代码。
  • 新建好仓库后,在每次放东西的时候,我们都要在本地做记录(commit操作),然后在往里放代码(push操作)。
  • 如果本身就有仓库了,那我们只需要克隆(clone)仓库到本地,然后再这基础上进行代码更新迭代。

3.1 New repository

  1. 首先,进入 GitHub 官网,登录。然后在右上角添加一个 repository

新手(3)—VSCode上的GitHub实现代码管理_第1张图片

  1. 接下来是创建一个 repository 最基本的信息,我们需要清楚了解每一个都是什么意思。配置完每个参数之后,我们就可以创建仓库。

    1. 输入仓库名:这个名字根据实际项目进行取名。

    2. 描述项目:说明这个项目。

    3. 设置权限:公开或者私有,这个大家都能理解。

    4. 添加 README 文档:一般我们都会添加文档说明,主要是说明代码的功能。

    5. 添加本地库配置文件:选择你开发的语言。

    6. 许可证书:

      1. MIT:这个一个宽松的、简明扼要的许可证书,这里面包含了版本声明及许可声明。简单来说,别人可以拿你代码去做任何事情。那它的作用主要还用在产品的进出口,需要提供相关的证书证明。
      2. Apache:这类似于 MIT 许可证,但它同时还包含了贡献者向用户提供专利授权相关的条款。
      3. GPL(v2和v3):这是一种 copyleft 许可证,要求修改项目代码的用户再次分发源码或二进制代码时,必须公布他的相关修改

      具体的许可证,可根据实际开发情况进行选择,默认为 MIT License。

    7. 分支结构:这个分支结构名字是有严格命名要求的,简单来说,分为这几类:masterdevelopreleasefeaturefixhotfix等分支。这些分支结构是和一个团队协作有关的,具体大家可以自行搜索,这不是我们的重点。

新手(3)—VSCode上的GitHub实现代码管理_第2张图片
3. 生成的仓库,基本结构需要了解。
新手(3)—VSCode上的GitHub实现代码管理_第3张图片
4. 接下来,我们在本地创建一个文件夹(名叫 info),这个文件夹用来接收 test 这个仓库内部的文件,也就是 clone 操作。
新手(3)—VSCode上的GitHub实现代码管理_第4张图片

3.2 Git 安装

  1. VSCode打开 info 工程,然后点击最左边一栏的 Source Control,这就是 VSCode内置的 Git,但是默认它是不可用的,我们需要安装一些插件才可以进行使用。
    新手(3)—VSCode上的GitHub实现代码管理_第5张图片
  2. 点击git下载,然后选择 Windows版本。如果比较下载较慢,推荐使用其他镜像。
    新手(3)—VSCode上的GitHub实现代码管理_第6张图片
  3. 下载完成后,我们就可以安装了。

新手(3)—VSCode上的GitHub实现代码管理_第7张图片
新手(3)—VSCode上的GitHub实现代码管理_第8张图片
新手(3)—VSCode上的GitHub实现代码管理_第9张图片
新手(3)—VSCode上的GitHub实现代码管理_第10张图片
新手(3)—VSCode上的GitHub实现代码管理_第11张图片

  1. 只有这一步,我们需要选择 Use Visual Studio Code as Git’s default editor,剩下的点击下一步就 OK,直到安装完成。

  2. 任意位置右击,然后点击 Git Bash Here ,生成一个 Git 终端,这个终端作用是我们可以使用 Git 命令,完成 clonecommit等操作。但是我们现在方便许多,不需要使用 Git 命令也能够实现。

新手(3)—VSCode上的GitHub实现代码管理_第12张图片

  1. Git 终端输入以下,如果输出以下信息证明 Git 安装成功。

    git --version
    
    // 跳出
    git version 2.26.0.windows.1
    

新手(3)—VSCode上的GitHub实现代码管理_第13张图片

  1. 重启 VSCode,我们会发现原先的 Source Control 变化了。

新手(3)—VSCode上的GitHub实现代码管理_第14张图片

  1. 配置账号和密码,全局,请输入以下格式,正常输入无双引号(“”)。

    git config --global user.email "[email protected]"
    git config --global user.name "Your Name"
    

新手(3)—VSCode上的GitHub实现代码管理_第15张图片

以上的都是一次配置永久生效!

3.3 VSCode绑定 GitHub

  1. VSCodeGitHub 账号绑定,点击登录会跳到一个网站当中。
    新手(3)—VSCode上的GitHub实现代码管理_第16张图片
  2. 点击 Continue ,这样我们的 VSCode就会和 GitHub 关联起来了,然后点击打开。

在这里插入图片描述
3. 这时候会跳回 VSCode,询问是否关联起来,点击 Open。

新手(3)—VSCode上的GitHub实现代码管理_第17张图片

  1. 这时候,会发现原先图标上的 1 消失了,证明已经关联成功。那我们接下来就可以进行 clone 操作。

新手(3)—VSCode上的GitHub实现代码管理_第18张图片
>
>
>以上的都是一次配置永久生效!

3.4 基础了解

clone 意思就是把 GitHub 上的仓库文件,克隆到本地,方便我们进行代码的修改或迭代。

  1. 点击 Initial repository,这时候就会切换了界面,到达我们的监视区。

新手(3)—VSCode上的GitHub实现代码管理_第19张图片

  1. 接下来着重介绍几个按钮,清楚知道它们功能,才不会混乱。
  • C o m m i t \color{yellow}{Commit} Commit:用来提交版本信息到达本地仓库的。
  • R e f r e s h \color{blue}{Refresh} Refresh:刷新当前修改的文件内容
  • C h a n g e s \color{red}{Changes} Changes:当前修改过的文件

新手(3)—VSCode上的GitHub实现代码管理_第20张图片


  • P u l l \color{blue}{Pull} Pull:从仓库获取文件
  • P u s h \color{yellow}{Push} Push:文件上传至仓库
  • C l o n e \color{red}{Clone} Clone:整体仓库克隆到本地中

新手(3)—VSCode上的GitHub实现代码管理_第21张图片


  • 分 支 结 构 \color{red}{分支结构} :名为master的分支结构
  • 云 端 信 息 \color{yellow}{云端信息} :上传与下载的次数
  • 问 题 \color{green}{问题} :警告与报错

新手(3)—VSCode上的GitHub实现代码管理_第22张图片


3.5 代码上传

Clone
  1. 接下来就是实现整体仓库克隆到本地当中。

新手(3)—VSCode上的GitHub实现代码管理_第23张图片
在这里插入图片描述

  1. 权限问题,点击允许,将会跳到一个 GitHub 授权画面,同理 VSCode默认也要授权。

新手(3)—VSCode上的GitHub实现代码管理_第24张图片
新手(3)—VSCode上的GitHub实现代码管理_第25张图片
新手(3)—VSCode上的GitHub实现代码管理_第26张图片新手(3)—VSCode上的GitHub实现代码管理_第27张图片

  1. 由于我建立的仓库是私有的,所以最好手动输全,由 GitHub 用户名 / 工程名。

新手(3)—VSCode上的GitHub实现代码管理_第28张图片
新手(3)—VSCode上的GitHub实现代码管理_第29张图片
新手(3)—VSCode上的GitHub实现代码管理_第30张图片

  1. 询问是否打开仓库,点击 Open,将会重启 VSCode进入克隆好的仓库内部。
    新手(3)—VSCode上的GitHub实现代码管理_第31张图片
    新手(3)—VSCode上的GitHub实现代码管理_第32张图片
Commit

clone 成功之后,我们就可以在上面进行代码的修改等操作了,操作完之后,想要再保存版本,我们就需要分为两步,第一步,把代码信息上传到本地库当中,有两个隐藏文件是会保存版本信息的。第二步,保存的是本地的信息,我们还需要把本地库上传到 GitHub上面。

  1. 新建两个文件,里面无内容,然后 commit

新手(3)—VSCode上的GitHub实现代码管理_第33张图片
新手(3)—VSCode上的GitHub实现代码管理_第34张图片

  1. 增加版本信息,写越全越好,方便后期主机回头查看。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0zo8XyL-1612805809211)(E:\硬盘\private\CSDN\git\微信截图_20210209004031.png)]

  1. 之前显示已修改的文件此时同步到本地仓库了。
    新手(3)—VSCode上的GitHub实现代码管理_第35张图片
Push

接下来准备把本地仓库内容,PushGitHub上面,最终我们可以在 GitHub 网站看到自己的库。

如果你只是做个人的开发,可以选择不 Push,直接在把库保存在本地。

新手(3)—VSCode上的GitHub实现代码管理_第36张图片
新手(3)—VSCode上的GitHub实现代码管理_第37张图片
新手(3)—VSCode上的GitHub实现代码管理_第38张图片

3.6 回滚版本

之前我们就有记录了版本信息,默认也会给我们添加一个版本号,那如何查找我们版本号呢?通过 Git 终端,输入指令查找提交记录。

git reflog

黄 色 的 字 , 就 是 当 时 提 交 的 版 本 号 。 \color{yellow}{黄色的字,就是当时提交的版本号。}

新手(3)—VSCode上的GitHub实现代码管理_第39张图片

然后我们在输入对应想恢复的 版 本 号 \color{yellow}{版本号} ,代码就能够回去啦。

git reset --hard 版本号

新手(3)—VSCode上的GitHub实现代码管理_第40张图片

注意的是:

  1. 我们打开右击打开 Git Bash 的时候,一定要在当前的工程目录下操作,这点大家一定要注意。
  2. 此操作只能回去看之前的版本,并不能在此基础上进行修改,然后再覆盖成新的版本。唯一解决办法就是复制下来代码,然后再回到最新版本进行覆盖,在进行更新,个人觉得还是挺鸡肋的。

3.7 比较代码

我们可以在 Source Control 上面去进行一些很实用的操作:

  • O p e n   F i l e \color{red}{Open \ File} Open File:打开源码
  • D i s c a r d   C h a n g e s \color{yellow}{Discard \ Changes} Discard Changes:恢复成初识的样子
  • S t a g e   C h a n g e s \color{blue}{Stage \ Changes} Stage Changes:暂存一个区域(缓冲区概念)
  • C o m p a r e \color{green}{Compare} Compare:比较改前后代码的差异

新手(3)—VSCode上的GitHub实现代码管理_第41张图片

版本 内容
V1.1.0 整体内容完成

你可能感兴趣的:(Linux基础,git,github,编程语言)