嘿!您似乎在 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的插件。

image0013_630b2807a733fe3703ad0c517dc04ea69f9acff9.png

接著我們可以直接複製存放庫 (repository),首先要先去Github取得網址

image0031_083ebeb2a7473c30415d972e61917fa345307739.png

接著點選「複製存放庫」可以於上方輸入網址進行複製:

image0052_b51b3de95b5c384b10bb74c52379d35327021d63.png

接著如果是第一次使用會有授權問題:

image0076_6218b37aee6443e0c59f6cb019297dd085849c86.png

授權過了之後就會開始進行複製,接著只需要等待下載完就可以了:

image0091_30bb8e7187affaf81bd015a384ee6fb6b4a54fd3.png

image011_bad641256a96352c181ce6dcf29ee9eb7e4be9ac.png

一旦你在這個專案中對任何程式進行修改,VS Code就會自動偵測到並且將其標示為M ( Modified ):

image0132_0f027e19eb113b710ebb4ea13c4b96164fd8becb.png

如果是新增檔案的話則會以U來標記,是Untracked 的意思:

image0152_5c07b99fe5880eda25a4783c602285ce11423dae.png

只要看到有被標記的符號,就代表有修正過的意思。我們在上傳至Github之前,需要先進行追蹤的動作,讓Git知道那些檔案有被異動過、是否要保留這些異動,「加入追蹤」就代表會暫時保留修改的內容,取消追蹤就會恢復上一個動作,那重點來了,要怎麼加入追蹤呢?

點選下圖較明亮的圖標會進到Git專屬的欄位,這邊可以看到有被動過的檔案都會顯示在這裡:

image0172_032e038f48e545404f8162c6e327678942fd03bd.png

將滑鼠移到物件上點選「+」就可以進行追蹤,也可以直接移動到「變更」的位置進行一次性全部加入追蹤:

image019_e711e2bb00bbaad5b92d9e3d89665095078071e9.png

也可以點擊右鍵,選擇其他動作,與「+」相符的是「暫存變更」,這邊比較特殊的應該是「新增到.gitnore」如果檔案執行了這個動作則不會被上傳至Github上,後續會再實作到。

image0211_e660144fb38ba0394080f0e850435073502b50e5.png

全部都丟到暫存之後可以注意到剛剛 test.md 的標記是U,現在已經變成A ( Added ) 了:

image0191_e711e2bb00bbaad5b92d9e3d89665095078071e9.png

*** 題外話 ***

剛剛有提到放棄追蹤的部分,再這裡需要點選「捨棄變更」,我在檔案中新增了一些資訊,選擇「捨棄變更」之後剛剛更動的內容變會被刪除(回到上一次追蹤的狀態):

image025_696b592f49a350ab7b6562e9895fd411e2fb2e96.png image027_a1d784c5d4f2a8fa3602f0752e604534f409b3a0.png

在剛剛的操作中可以注意到是「暫存」的變更,代表還沒完全認可,如果要認可的話需要點選提交 ( Commit ) 而提交的時候都需要附上版本資訊 ,因為Git本身就是在做版本控制的工具,強制每一次提交都需要附上註解,這樣才能落實版本控制。

我們可以透過 上方的 √ 符號進行提交,點擊之後會出現對話框可以輸入內容,我會建議使用英文來撰寫版本資訊:

image029_80d68d663449b37a5f3edcadc899845dd17cf6aa.png

認可後剛剛暫存的變更以及標記符號都被清除了,因為已經被加入追蹤:

image031_4b310e3b6fc972d11dcdd89a0a1b1a2986124683.png image033_dc2565cfb420e61f768a1a725c2f12517173d182.png

最後就能把資料給上傳到Github上了,首先我們有進行了更動並且加入了註釋 ( 認可 ),所以現在VS Code自動偵測到有一個版本可以推送 ( Push ) 到 origin/master ( Branch ) 上面:

image035_370fce1ad5c1ae828276979b9b88568b52fa99bb.png

image037_e7354405bf287577e7cf93f81249befee0ee025b.png

這邊有兩種方式可以上傳:

1.點擊狀態即可直接進行上傳。

image039_46082b0dc8bbe5deb8fa048e6f1b21673266bbfa.png

2.在版控欄位點選「●●●」選擇推送或推送至。

image041_daaf20ae5fc3308abb51ced56282f17ba123215c.png

如果是第一次進行推送會需要登入

image043_755669bea27f9825e4b68f54c73deb367c84af41.png

接著回到Github上面,就可以看到剛剛新增的檔案了:

image045_e32658b0df93f1d51717a75950ecb5eaa009420f.png

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

我先開啟了一個從未上傳至Github的專案,也沒有做過git版本控制

image047_e18e93a4f97c5d0fc5432b777f8d0e5ee0ee5ed7.png

因為沒做過git版本控制,所以點選到git的欄位它會自動偵測到沒有.git檔案,按照它的敘述我們必須先進行初始化才能使用git相關的指令;如果我們使用命令來運作的話這個按鈕就代表git init的部分

image049_fa9c4d9f17de7645a28ac3786524396bdbca42ce.png

點擊初始化按鈕之後就會產生一個.git檔案,這個檔案會存放版本控制的所有資料

image051_ad3fe95278dec76ac32f0ea447c72a9ec8b20549.png

VS Code也可以看到熟悉的變更欄位出現了

image054_8d364be7865b4da97f08ffd1742a1037e5835fba.png

接著在開始其他動作以前,我們需要先到Github上去新增一個Repository:

image055_1a5a76d159fb069e5e148a02ef689fd4a926155a.png

接著可以回到VS Code當中去做遠端了,這邊教大家另一個方法,按下F1之後可以直接輸入指令動作:

image057_274e929387bf2aa3a7eb2c9ca1dd0d0b0be972a7.png

我們要使用Git的指令,所以最前面是要呼叫「Git」,並且我們要進行遠端連線到該Repository,需要用的指令是「Add Remote」,中間會有「:」相隔:

image059_fdb2d570c6394eab4c6470ccc67ac66dbb4490fb.png

我們可以像剛剛一樣直接輸入網址也可以從Github當中去選擇:

image061_5cd740bff3c718452a8b3d5211a97770dbc25d7c.png

這次我選擇使用Github去挑選 ( 懶到一個極致 ) :

image063_9235b5571ed82b88adfb05625ab53b6daab4438a.png

接著需要輸入你遠端的名稱,通常會寫做 origin,輸入完直接Enter就可以了:

image065_b9536eeb9daf1ce1f714d5906e4b2d1f0f8f4b64.png

接著要先確認一下Github上面是否已經有檔案存在了,像剛剛新增的時候我們有勾選README以及License:

image067_4975b86efc296e1ac89fafa437f1b1f64d274031.png

如果已經有檔案的話我們需要先將資料給拉下來 ( pull ) 在進行推送 ( push ),如果直接進行上傳是會失敗的因為內容不相符,在這裡我自己經驗是需要選擇「從…提取」

image069_33912ae0be468a60d9635d82c07de74c0893dd96.png

並且選擇剛剛遠端的名稱:

image0711_4d937c7855fda3e277b6647b9237c8836bb1ec9b.png

選擇分支,第一次使用的話理論上只有一個,剛剛建立的遠端分支:

image0731_d1f48ecd35df1eca5dd8b4af1accd755dbb7b6f4.png

回到檔案總管的部分已經可以看到README、License了

image075_a7bc9bae80f051aca5ff0865fb821be3ea2f31ab.png

接著我們回到git版本控制欄位進行追蹤以及提交的動作,這裡因為我的影片檔太大無法上傳,所以我將其放進 .gitignore當中:

   image077_37c084d2314a00c5ead6348b771d8a62035f84c9.pngimage079_a8f7283ccdb85619f3bf247072448d8e5396e5e3.png

加入到 .gitignore後就可以把所有檔案加入追蹤,可以注意到標記符號已經從U轉成A了:

   image081_7d7850499e277cc7d69b0513b97f0ad353863b4a.png image083_3c5af087bb78ce260f892a1820f0b64dca9b06d0.png

最後記得要進行提交的動作,除了上面介紹的從中間的對話框輸入訊息,也可以直接在Git欄位上方撰寫版本資訊再進行提交,若提交成功該欄位則會清空

image085_7639b0169f5b4dd244eb932b95d6927a06d56eb9.pngimage087_97333787d0f0eb95d99c17b67c3a1d8164c0e4cb.png

最後可以推送到github上面,這邊一樣選擇「推送至」

image089_4ca316ef5cb989114fa7d45ee49888f04447f879.png

選擇剛剛遠端的分支:

image091_910a8b4f52114cf47f1a50846964a1f03161c356.png

重新整理Github網頁就可以發現檔案都已經上傳囉:

image093_3111554784f15366eda62c2fbd5761c19a80ebde.png

上傳全新的repository ( 快速 )

這邊選擇「發佈至GitHub」

image095_4089457df02fbe5a9fde910cee0e66cf8ea57bd8.png

會依照你的資料夾名稱來當作Repository的名稱:

image097_2736e6321034555b251228fca155eafd2c56f28e.png

最後

image100_b344f2af543818af2d363828f4d88f0e29d12cb2.png

image1011_695ca6231369f2032ce5bc5c3494c72670bb39cb.png

image1031_06e2779ecbed45215f544bc240c022227a4a3a93.png

發現忘記放README.md了,我直接在VS Code裡新增並上傳,由於尚未被追蹤所以顯示為U,加入追蹤、提交等等就不贅述了:

image105_9c3aa608bf6b5123491a52f6dec6b2b3b18bc90c.png

由於已經有遠端了,也有上傳過一次,理論上已經有綁定分支就不用在使用「推送至」,這邊直接用「推送」即可:

image107_57b3b3688c6acd61ce35d61429faf6d31042c57d.png

重新整理就會出現剛剛修改的README.md:

image109_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.)

image1111_256e30e8c8b84f54796f79542ecb58c13dba0816.png

我們可以點選「顯示Git輸出」來觀察錯誤訊息:

image1131_ae77e0018e3f2ce87d3e9ba801fe755c2e670fc4.png

而我遇到的錯誤訊息大致上如下「github push failed (remote: Permission to userA/repo.git denied to userB.)」,查了一陣子資料才發現,我之前用公司的帳號登入使用過SSH導致Github以SSH優先導向了User B,也因為SSH是憑證形式所以就算我使用 git config 去修改也沒用。

image116_d03d441a931635a572dffc83d6cd8c1ea0a078be.png

這時候我們去控制台→Windows→使用者帳戶→管理Windows認證→Windows認證中刪除憑證 ( git : … ):

image117_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