【新手教學】告別「最終版.zip」！用 VS Code + GitHub 打造最強開發流程

你是否曾經把檔案命名為 project_final.zip、project_final_v2.zip，最後連自己都不知道哪個才是真的「最終版」？

對於剛踏入程式開發的朋友來說，Git (版本控制) 聽起來可能很艱深，充滿了黑底白字的指令。但其實，只要善用我們最熟悉的編輯器 VS Code，你完全不需要背指令，就能輕鬆將程式碼同步到 GitHub 雲端。

今天這篇文章將手把手帶你完成你的第一次「雲端同步」，讓你的程式碼擁有時光機與雲端備份！

🛠️ 準備工作：工欲善其事

在開始之前，請確保你的電腦已經安裝了以下兩位「神隊友」：

  1. Git：這是底層引擎 (安裝後不用打開它)。
  2. Visual Studio Code (VS Code)：我們寫程式與操作同步的指揮中心。

🚀 實戰演練：五分鐘完成第一次同步

為了讓流程最順暢，我們採用**「先建雲端倉庫，再拉回電腦」**的策略，這是最不容易出錯的黃金路徑。

第一步：在 GitHub 建立基地

首先，我們要先在雲端準備好一個家。

  1. 登入 GitHub，點擊右上角的 + 號，選擇 New repository。
  2. Repository name：輸入 hello-vscode。
  3. 關鍵動作：務必勾選 Add a README file (這會幫你初始化倉庫，避免後續很多麻煩)。
  4. 點擊 Create repository。

第二步：將倉庫複製 (Clone) 到 VS Code

現在，我們要建立電腦與雲端的連結。

  1. 打開 VS Code。
  2. 在歡迎頁面點擊 Clone Repository (或按 F1 輸入 Git: Clone)。
  3. 選擇 Clone from GitHub 並授權登入。
  4. 搜尋剛剛建立的 hello-vscode，點擊它，並選擇電腦上的一個資料夾作為存放位置。

當右下角跳出提示時，點擊 Open。恭喜你！你現在已經處於一個受 Git 監控的專案環境中了。

第三步：開始寫程式 (Coding)

讓我們來寫一點簡單的網頁。

  1. 在左側檔案總管按右鍵 → New File，命名為 index.html。
  2. 貼上以下程式碼並存檔 (Ctrl + S)：
html
複製
<!DOCTYPE html>
<html>
<body>
    <h1>Hello, GitHub!</h1>
    <p>這是我用 VS Code 同步的第一個專案。</p>
</body>
</html>

👀 注意到了嗎？ 存檔後，檔名變成了綠色，或者旁邊出現了一個 U。這代表 VS Code 正在告訴你：「嘿！這裡有個新檔案還沒被記錄喔！」

第四步：打包與寄送 (Stage, Commit & Push)

這是最核心的一步，我們要在 VS Code 左側的 「原始碼控制 (Source Control)」 面板（圖示看起來像樹狀分支）完成。

請想像這是一個寄包裹的過程：

  1. 放入箱子 (Stage)： 將滑鼠移到 index.html 上方，點擊右邊的 + 號。這代表把檔案放入「待寄出的包裹」中。
  2. 封箱貼單 (Commit)： 在上方輸入框寫下備註，例如：「新增首頁檔案」。然後點擊下方的 Commit (或打勾圖示)。這時候，檔案已經在你的電腦裡永久存檔了。
  3. 快遞寄出 (Sync/Push)： 點擊藍色的 Sync Changes (同步變更) 按鈕。

看著藍色進度條跑完，你的程式碼就飛向雲端了！

🎉 驗收時刻

現在，回到你的 GitHub 網頁重新整理。你會發現 index.html 已經安靜地躺在那裡了。

這就是全球軟體工程師每天在做的事情：


Clone (下載) ➡️ Code (寫碼) ➡️ Commit (存檔) ➡️ Push (同步)

 

透過 VS Code，我們不需要記憶複雜的指令，只要幾個按鈕就能享受版本控制帶來的安全感。下次寫程式時，別忘了善用這個流程，讓 GitHub 成為你最可靠的備份後盾！







留言

張貼留言

這個網誌中的熱門文章

使用VS code開發Python程式 - Matplotlib繪圖

圖片
這一篇為如何在VS code的IDE 中用python開發matplotlib， 程式碼如下: #%% from matplotlib import pyplot as plt import numpy as np x = np.linspace( 1 , 10 , 20 ) print (x) y = 3 * x + 2 fig = plt.figure() axes = fig.add_axes([ 0.1 , 0.1 , 0.9 , 0.9 ]) axes.plot(x, y, 'r' ) plt.show() #%% 使用#%%會出現Run Cell字樣，按下Run Cell，可以執行Python Interactive視窗，
閱讀完整內容

使用Pycharm開發Python程式與用Matplotlib繪圖

圖片
本篇介紹使用Pycharm開發Python程式與用Matplotlib套件繪圖。 1.  建立新專案並新增python檔案matplot.py 2. 在Pycharm中安裝matplotlib套件， 打開File-->Setting，找到Project Interpreter，點“+”添加   搜尋matplotlib後，安裝該套件。 3. 加入程式碼: from matplotlib import pyplot as plt import numpy as np x = np.linspace( 1 , 10 , 20 ) print (x) y = 3 * x + 2 fig = plt.figure() axes = fig.add_axes([ 0.1 , 0.1 , 0.9 , 0.9 ]) axes.plot(x , y , 'r' ) plt.show() 其中 (1) linspace的用法為:         numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None)               np.linspace(1,10,20)        #表示在1與10之間分20個點。  (2)  add_axes: 新增子區域      fig.add_axes(0.1,0.1,0.9,0.9)      #figure的百分比,從figure 10%的位置開始繪製, 寬高是figure的90% 5. 讓matplotlib繪圖變成浮在開發環境上，意思是讓figure浮窗 選擇File--->Settings--->Tools--->Python Scientific" 取消勾選Show plots in tool window
閱讀完整內容

LabVIEW教學: 如何在VI中使用.dll檔

圖片
由於許多的軟體都提供SDK給開發者使用，因此可以在VI中呼叫dll檔使用，一般有兩種方法: 1.  Import  Shared Library 2.    Call Library Function Node 以下是相關的教學連結: 1.  我要如何使用 LabVIEW 來呼叫動態連接函式庫 (Dynamic Link Library DLL)? 2.  Using Shared Libraries in LabVIEW
閱讀完整內容