嘿!您似乎在 United States,您想使用我们的 English 网站吗?
Switch to English site
Skip to main content

Github应用教学-结合Microsoft Visual Studio Code编辑器

作者

张嘉钧

难度

普通

材料表

 

今天介绍分成「下载并修改已存在的repository」、「上传全新的repository」两个部分,并且也会针对常见的问题进行解说!

下载并修改已存在的repository

如果你像我一样经常使用Visual Studio Code( VS Code) 又需要使用 Github来做版本控制或纪录,现在两家已经整合得很好了,VS Code甚至已经附带着Git的插件。

image0014_630b2807a733fe3703ad0c517dc04ea69f9acff9.png

接着我们可以直接复制存放库 (repository),首先要先去Github取得网址

image0032_083ebeb2a7473c30415d972e61917fa345307739.png

接着点选「复制存放库」可以于上方输入网址进行复制:

image0053_b51b3de95b5c384b10bb74c52379d35327021d63.png

接着如果是第一次使用会有授权问题:

image0077_6218b37aee6443e0c59f6cb019297dd085849c86.png

授权过了之后就会开始进行复制,接着只需要等待下载完就可以了:

image0092_30bb8e7187affaf81bd015a384ee6fb6b4a54fd3.png

image0111_bad641256a96352c181ce6dcf29ee9eb7e4be9ac.png

一旦你在这个项目中对任何程序进行修改,VS Code就会自动侦测到并且将其标示为M ( Modified ):

image0134_0f027e19eb113b710ebb4ea13c4b96164fd8becb.png

如果是新增档案的话则会以U来标记,是Untracked 的意思:

image0153_5c07b99fe5880eda25a4783c602285ce11423dae.png

只要看到有被标记的符号,就代表有修正过的意思。我们在上传至Github之前,需要先进行追踪的动作,让Git知道那些档案有被异动过、是否要保留这些异动,「加入追踪」就代表会暂时保留修改的内容,取消追踪就会恢复上一个动作,那重点来了,要怎么加入追踪呢?

点选下图较明亮的图标会进到Git专属的字段,这边可以看到有被动过的档案都会显示在这里:

image0173_032e038f48e545404f8162c6e327678942fd03bd.png

将鼠标移到对象上点选「+」就可以进行追踪,也可以直接移动到「变更」的位置进行一次性全部加入追踪:

image0192_e711e2bb00bbaad5b92d9e3d89665095078071e9.png

也可以点击右键,选择其他动作,与「+」相符的是「暂存变更」,这边比较特殊的应该是「新增到.gitnore」如果档案执行了这个动作则不会被上传至Github上,后续会再实作到。

image0212_e660144fb38ba0394080f0e850435073502b50e5.png

全部都丢到暂存之后可以注意到刚刚 test.md 的标记是U,现在已经变成A ( Added ) 了:

image0231_0f6f16fbdd44660bc4c98b7ce37a59e2504e0982.png

*** 题外话 ***

刚刚有提到放弃追踪的部分,再这里需要点选「舍弃变更」,我在档案中新增了一些信息,选择「舍弃变更」之后刚刚更动的内容变会被删除(回到上一次追踪的状态):

image0251_696b592f49a350ab7b6562e9895fd411e2fb2e96.png image0271_a1d784c5d4f2a8fa3602f0752e604534f409b3a0.png

在刚刚的操作中可以注意到是「暂存」的变更,代表还没完全认可,如果要认可的话需要点选提交 ( Commit ) 而提交的时候都需要附上版本信息 ,因为Git本身就是在做版本控制的工具,强制每一次提交都需要附上批注,这样才能落实版本控制。

我们可以透过 上方的 √ 符号进行提交,点击之后会出现对话框可以输入内容,我会建议使用英文来撰写版本信息:

image0291_80d68d663449b37a5f3edcadc899845dd17cf6aa.png

认可后刚刚暂存的变更以及标记符号都被清除了,因为已经被加入追踪:

image0312_4b310e3b6fc972d11dcdd89a0a1b1a2986124683.png image0331_dc2565cfb420e61f768a1a725c2f12517173d182.png

最后就能把数据给上传到Github上了,首先我们有进行了更动并且加入了注释 ( 认可 ),所以现在VS Code自动侦测到有一个版本可以推送 ( Push ) 到 origin/master ( Branch ) 上面:

image0351_370fce1ad5c1ae828276979b9b88568b52fa99bb.png

image0371_e7354405bf287577e7cf93f81249befee0ee025b.png

这边有两种方式可以上传:

1.点击状态即可直接进行上传。

image0391_46082b0dc8bbe5deb8fa048e6f1b21673266bbfa.png

2.在版控字段点选「●●●」选择推送或推送至。

image0411_daaf20ae5fc3308abb51ced56282f17ba123215c.png

如果是第一次进行推送会需要登入

image0431_755669bea27f9825e4b68f54c73deb367c84af41.png

接着回到Github上面,就可以看到刚刚新增的档案了:

image0451_e32658b0df93f1d51717a75950ecb5eaa009420f.png

上传全新的repository ( 正常流程 )

我先开启了一个从未上传至Github的项目,也没有做过git版本控制

image0471_e18e93a4f97c5d0fc5432b777f8d0e5ee0ee5ed7.png

因为没做过git版本控制,所以点选到git的字段它会自动侦测到没有.git档案,按照它的叙述我们必须先进行初始化才能使用git相关的指令;如果我们使用命令来运作的话这个按钮就代表git init的部分

image0491_fa9c4d9f17de7645a28ac3786524396bdbca42ce.png

点击初始化按钮之后就会产生一个.git档案,这个档案会存放版本控制的所有数据

image0511_ad3fe95278dec76ac32f0ea447c72a9ec8b20549.png

VS Code也可以看到熟悉的变更字段出现了

image0541_8d364be7865b4da97f08ffd1742a1037e5835fba.png

接着在开始其他动作以前,我们需要先到Github上去新增一个Repository:

image0552_1a5a76d159fb069e5e148a02ef689fd4a926155a.png

接着可以回到VS Code当中去做远程了,这边教大家另一个方法,按下F1之后可以直接输入指令动作:

image0571_274e929387bf2aa3a7eb2c9ca1dd0d0b0be972a7.png

我们要使用Git的指令,所以最前面是要呼叫「Git」,并且我们要进行远程联机到该Repository,需要用的指令是「Add Remote」,中间会有「:」相隔:

image0592_fdb2d570c6394eab4c6470ccc67ac66dbb4490fb.png

我们可以像刚刚一样直接输入网址也可以从Github当中去选择:

image0611_5cd740bff3c718452a8b3d5211a97770dbc25d7c.png

这次我选择使用Github去挑选 ( 懒到一个极致 ) :

image0631_9235b5571ed82b88adfb05625ab53b6daab4438a.png

接着需要输入你远程的名称,通常会写做 origin,输入完直接Enter就可以了:

image0651_b9536eeb9daf1ce1f714d5906e4b2d1f0f8f4b64.png

接着要先确认一下Github上面是否已经有档案存在了,像刚刚新增的时候我们有勾选README以及License:

image0671_4975b86efc296e1ac89fafa437f1b1f64d274031.png

如果已经有档案的话我们需要先将数据给拉下来 ( pull ) 在进行推送 ( push ),如果直接进行上传是会失败的因为内容不相符,在这里我自己经验是需要选择「从…提取」

image0691_33912ae0be468a60d9635d82c07de74c0893dd96.png

并且选择刚刚远程的名称:

image0712_4d937c7855fda3e277b6647b9237c8836bb1ec9b.png

选择分支,第一次使用的话理论上只有一个,刚刚建立的远程分支:

image0732_d1f48ecd35df1eca5dd8b4af1accd755dbb7b6f4.png

回到档案总管的部分已经可以看到README、License了

image0752_a7bc9bae80f051aca5ff0865fb821be3ea2f31ab.png

接着我们回到git版本控制字段进行追踪以及提交的动作,这里因为我的影片档太大无法上传,所以我将其放进 .gitignore当中:

   image0771_37c084d2314a00c5ead6348b771d8a62035f84c9.pngimage0791_a8f7283ccdb85619f3bf247072448d8e5396e5e3.png

加入到 .gitignore后就可以把所有档案加入追踪,可以注意到标记符号已经从U转成A了:

   image0811_7d7850499e277cc7d69b0513b97f0ad353863b4a.pngimage0831_3c5af087bb78ce260f892a1820f0b64dca9b06d0.png

最后记得要进行提交的动作,除了上面介绍的从中间的对话框输入讯息,也可以直接在Git字段上方撰写版本信息再进行提交,若提交成功该字段则会清空

image0851_7639b0169f5b4dd244eb932b95d6927a06d56eb9.pngimage0871_97333787d0f0eb95d99c17b67c3a1d8164c0e4cb.png

最后可以推送到github上面,这边一样选择「推送至」

image0891_4ca316ef5cb989114fa7d45ee49888f04447f879.png

选择刚刚远程的分支:

image0912_910a8b4f52114cf47f1a50846964a1f03161c356.png

重新整理Github网页就可以发现档案都已经上传啰:

image0931_3111554784f15366eda62c2fbd5761c19a80ebde.png

上传全新的repository ( 快速 )

这边选择「发布至GitHub」

image0951_4089457df02fbe5a9fde910cee0e66cf8ea57bd8.png

会依照你的文件夹名称来当作Repository的名称:

image0971_2736e6321034555b251228fca155eafd2c56f28e.png

最后

image099_5c79eb72cbdd32f06b66e8089bd6ebdb30c27e47.png

image1012_695ca6231369f2032ce5bc5c3494c72670bb39cb.png

image1032_06e2779ecbed45215f544bc240c022227a4a3a93.png

发现忘记放README.md了,我直接在VS Code里新增并上传,由于尚未被追踪所以显示为U,加入追踪、提交等等就不赘述了:

image1051_9c3aa608bf6b5123491a52f6dec6b2b3b18bc90c.png

由于已经有远程了,也有上传过一次,理论上已经有绑定分支就不用在使用「推送至」,这边直接用「推送」即可:

image1071_57b3b3688c6acd61ce35d61429faf6d31042c57d.png

重新整理就会出现刚刚修改的README.md:

image1091_9b5a97214b44d85c23c452a34499b1e2183c9cf1.png

结语

这边教大家怎么样透过Github去上传自己的项目,分两种情境 ( 已存在Github项目、未存在Github项目 )教大家如何修改上传、其中第二个情境又有分两种上传方法,基本流程版的使用方法会与使用git bash来上传相似,只是变成图形化接口;快速简单版则是更直觉。希望大家都能够好好经营自己的Github,对自己绝对有很大的帮助的!

对了,如果有需要多人协作则需要安装插件,详细可参阅https://code.visualstudio.com/docs/editor/github

常见问题

github push failed (remote: Permission to userA/repo.git denied to userB.)

image1112_256e30e8c8b84f54796f79542ecb58c13dba0816.png

我们可以点选「显示Git输出」来观察错误讯息:

image1132_ae77e0018e3f2ce87d3e9ba801fe755c2e670fc4.png

而我遇到的错误讯息大致上如下「github push failed (remote: Permission to userA/repo.git denied to userB.)」,查了一阵子数据才发现,我之前用公司的账号登入使用过SSH导致Github以SSH优先导向了User B,也因为SSH是凭证形式所以就算我使用 git config 去修改也没用。

image115_b364e6ee24e4a29b674b378ec2914cbf1338a664.png

这时候我们去控制台→Windows→用户帐户→管理Windows认证→Windows认证中删除凭证 ( git : … ):

image1171_695bf5a21edebe2977f1c5ad38720d088203627a.png

参考数据

解決Github Push Failed

CAVEDU Education is devoted into robotics education and maker movement since 2008, and is intensively active in teaching fundamental knowledge and skills. We had published many books for readers in all ages, topics including Deep Learning, edge computing, App Inventor, IoT and robotics. Please check CAVEDU's website for more information: http://www.cavedu.com, http://www.appinventor.tw
DesignSpark Electrical Logolinkedin