Try   HackMD

01.開發環境建置

Python安裝與架構介紹

官網下載對應的OS版本,初學者建議使用版本 3 的版本,但最新的版本在使用套件時,可能會遇到套件尚無法支援的情形,因此若有一定會使用到的套件,建議看一下套件目前支援的Python版本是什麼?

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

安裝過程

  1. 選擇 Windows installer (64-bit) 版本

    • 勾選安裝 py.exe 時使用管理者權限 (Use admin privileges when installing py.exe)
    • 勾選將 Python 加入環境變數 PATH (Add Python to PATH)
    • 選擇自訂安裝(Customize installation)
      Image Not Showing Possible Reasons
      • The image was uploaded to a note which you don't have access to
      • The note which the image was originally uploaded to has been deleted
      Learn More →
  2. 進階選項畫面

    • 勾選安裝 Python 給所有使用者(Install Python 3.xx for all users)
    • 選擇自訂安裝,將 Python 裝在根目錄(C:\Python3xx 或 D:\Python3xx)
      Image Not Showing Possible Reasons
      • The image was uploaded to a note which you don't have access to
      • The note which the image was originally uploaded to has been deleted
      Learn More →
  3. 安裝成功

    • 若在最後的 Setup was successful 頁面看見上圖的【Disable path length limit】,代表作業系統在安裝了多種軟體之後路徑長度不夠使用了(Windows 作業系統路徑的長度預設為260個字元),因此請點選以解除路徑長度的限制。
      Image Not Showing Possible Reasons
      • The image was uploaded to a note which you don't have access to
      • The note which the image was originally uploaded to has been deleted
      Learn More →
  4. 測試 python 執行 安裝完畢後,可在命令提示字元中輸入以下命令確認安裝成功

C:\>python --version
C:\>py --version
C:\>py -V
Python 3.12.5

# 執行含有 Python 原始碼的檔案
C:\>py app.py

# 進入 Python REPL互動模式(可按 Ctrl+Z 離開)
C:\>py

執行後若看見 ‘python’ 不是內部或外部命令、可執行的程式或批次檔,則代表沒有將 C:\python312 加入環境變數 path,或是電腦路徑的長度已超過260個字元,導致增加路徑失敗,可參考以下文章進行調整:How to Make Windows 10 Accept File Paths Over 260 Characters

執行後若看見遺失檔案的訊息,最有可能的是缺少了 Visual C++ 的可轉散發套件,因為 Python Windows 版本 是利用 Microsoft Visual C++ 所設計,因此若遇此問題請嘗試到 Microsoft Visual C++ Redistributable latest supported downloads 下載 Visual Studio 2015, 2017, 2019, and 2022

  1. 測試 pip 套件管理程式 Python 預設使用 pip 指令進行套件的管理,請測試指令如下
C:\>pip -V                   
pip 24.2 from C:\Python312\Lib\site-packages\pip (python 3.12)

C:\>pip list

若在已安裝套件下出現如下圖的 notice 提示,代表可進行 pip 指令的版本升級

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

若要升級 pip 套件版本,請輸入下列指令

python -m pip install --upgrade pip 

上述指令中的 python 可用 py 取代,參數 upgrade 可用 -U 取代

py -m pip install -U pip

Windows 7 作業系統無法使用 Python 3.9 以上版本

Python 執行方式

開始 》所有應用程式 Python 3.12 目錄
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Python 自帶的函式庫

第三方套件

Internet

pip

軟體儲存庫 PyPI

內建模組 Built-in Modules

標準函式庫 Standard Library

Lib -> Python程式碼

Dlls非Python程式碼

package 套件

module 模組

function 函式

  • 函式(function):模組內定義的函數
  • 模組(module):就是檔案,每個 py 檔就是一個模組
  • 套件(package):就是目錄,內部有多個檔案

套件管理

pip 是 Python 的套件管理器,可下載位於 PyPI(Python Package Index) 軟體版本庫中的第三方套件。

pip 基本使用

完整的使用方法可下達 pip help 得知,常用的指令如下:

  • 查詢目前安裝的套件有哪些 pip list
  • 查詢哪些套件需要升級 pip list -o
  • 安裝 A 套件 pip install A
  • 更新 A 套件 upgrade 可用 -U 取代 pip install --upgrade A
  • 查看已安裝的 A 套件資訊 pip show A
  • 移除 A 套件 pip uninstall A
  • 檢查套件的相依性 pip check
  • 將目前使用的套件匯出清單 pip freeze > requirements.txt
  • 根據套件匯出清單安裝套件 pip install -r requirements.txt

若覺得 pip 移除套件時無法有效處理相依問題,可嘗試改用 Poetry

套件功能分類

更詳細的功能分類說明,請參考:終於把所有的Python庫,都整理出來啦!

VScode基礎介紹

推薦作為 Python 的程式碼的主要編輯器。

VScode是微軟打造的一款純文字編輯器,有著 Visual Studio 這款地表上最強的 IDE 編輯器的經驗加持,VScode 不但輕巧、跨平台又開源,相較於 Sublime Text 與 Atom 這些現代化程式碼編輯器而言,更有著占用記憶體小、開啟速度快、內建Emmet、Git、Debug整合的優勢,值得各位花時間學習。

請至官網 https://code.visualstudio.com/#alt-downloads 下載 System Installer 的 x64 版本。

  • stable
    • User Installer (為自己安裝)
    • System Installer (為所有人安裝)
  • Insiders
  • Web

VScode 預設將工作目錄視為一個專案,因此勾選以下的二個選項未來會比較方便。

環境設定

在 Visual Studio Code(簡稱 VS Code)中,開發以專案為單位進行,這個概念在 VS Code 中被稱為【工作區】(Workspace)。檔案總管中顯示的【資料夾】,對開發者來說通常就是指【專案】。

VS Code 提供兩種設定層級:使用者設定 和 工作區設定,以下介紹其用途及操作方式。

1. 使用者設定 (全域設定)

1.1 適用範圍:全域,影響所有工作區與專案。

1.2 操作方式:

a. 以滑鼠點選 檔案 / 喜好設定 / 設定 ,點選使用者頁籤
b. 以滑鼠點選最上方右側往左數來第3個圖示:開啟設定(JSON)

c. 在開啟的 settings.json 檔案貼上下列 json code

{ // ======== Editor Appearance & Behavior 編輯器外觀與行為設定 ======== "editor.fontSize": 14, // 編輯器文字大小 "editor.fontFamily": "Fira Code, 'JetBrains Mono', 'Consolas', monospace", // 編輯器字體 "editor.fontLigatures": true, // 啟用字體連字 (如果字體支援,例如 Fira Code) "editor.mouseWheelZoom": true, // 啟用滑鼠滾輪縮放編輯器文字 "editor.formatOnType": true, // 在輸入時自動格式化 "editor.formatOnSave": true, // 在儲存時自動格式化 "editor.tabSize": 4, // Tab 鍵代表的空格數 (常見值為 2 或 4,根據語言或團隊規範) "editor.insertSpaces": true, // 使用空格代替 Tab 進行縮排 (通常建議設為 true) "editor.minimap.enabled": false, // 禁用 Minimap (程式碼小地圖) "editor.guides.indentation": true, // 顯示縮排參考線 "editor.guides.bracketPairs": true, // 顯示括號對參考線 (與 editor.bracketPairColorization.enabled 搭配使用效果好) "editor.bracketPairColorization.enabled": true, // 啟用括號對顏色高亮 (推薦,通常與主題顏色協調) // ======== Files Handling 檔案處理相關設定 ======== "files.encoding": "utf8", // 預設檔案編碼為 UTF-8 (推薦) "files.autoSave": "afterDelay", // 自動儲存設定: 失焦後延遲儲存 (其他選項: "onWindowChange", "onFocusChange", "off") "files.autoSaveDelay": 1000, // 自動儲存延遲時間 (毫秒,當 files.autoSave 為 "afterDelay" 時生效) "files.autoGuessEncoding": true, // 嘗試自動猜測檔案編碼 (處理非 UTF-8 檔案時有用,但可能會偶爾猜錯) // ======== Terminal Integrated Terminal Settings 整合終端設定 ======== "terminal.integrated.defaultProfile.windows": "Command Prompt", // ======== Other 其他設定 ======== // 如果有其他不屬於上述分類,且不希望被歸類的設定,可以放在這裡 "update.showReleaseNotes": false, // 禁用顯示更新發布資訊頁面 }

使用者設定檔位於 C:\Users\【使用者名稱】\AppData\Roaming\Code\User\settings.json

2. 工作區設定(專案設定)

2.1 適用範圍:針對目前的工作區進行設定。

VS Code 支援兩種工作區的資料夾模式:

  1. 單一資料夾模式:預設情況下,開啟一個資料夾就被視為一個簡單的工作區。如果沒有建立專門的工作區設定檔,你可能不會特別注意到工作區的存在,但只要檢視設定介面,就可以看到可針對使用者或工作區進行的設定選項。
  2. 多資料夾模式:當需要同時處理多個資料夾時,可以建立一個工作區(Workspace),將多個資料夾納入其中。

2.2 操作方式:

a. 以滑鼠點選 檔案 / 喜好設定 / 設定 ,點選工作區頁籤

如果上圖沒看到工作區,是因為您沒有開啟資料夾。

b. 以滑鼠點選最上方右側往左數來第3個圖示:開啟設定(JSON)

c. 在開啟的 settings.json 檔案中的大括弧內貼上下列 json code

"editor.rulers": [80,120], "editor.fontSize": 16,

專案設定會以檔案形式存放在工作目錄下的 .vscode/settings.json


透過以上設定可以配置全域與專案的不同的環境需求,提升開發效率與使用體驗。

多資料夾工作區設定範例

假設有 2 個專案,而專案共用一個函式庫:

  • projectA 資料夾:第一個專案。
  • projectB 資料夾:第二個專案。
  • shared-lib 資料夾:共用函式庫。

設定方式:

  1. 新增工作區並加入 projectA、projectB 和 shared-lib 資料夾。
  2. 在工作區設定中新增以下配置:
{ "folders": [ { "path": "projectA" }, { "path": "projectB" }, { "path": "shared-lib" } ], "settings": { "files.autoSave": "onFocusChange", "editor.tabSize": 4 } }

透過延伸模組擴充功能

VScode可透過延伸模組(擴充套件、套件、插件),增加各種幫助撰寫程式碼所用的功能,請點選左側功能表的第五個選項

依序輸入以下的插件名稱,進行延伸模組的安裝

必裝模組

  • Chinese (Traditional) Language Pack for Visual Studio Code
  • 【Python相關】
    • Python (Microsoft 提供的 Python 套件)
    • Black (Microsoft 提供的 formatter 套件)
    • Flake8 (Microsoft 提供的 Linter 套件)
    • isort (Microsoft 提供的 排序 import 的套件)
  • autoDocstring
  • Rainbow CSV
  • One Dark Pro
  • Material Icon Theme
  • Live Server

選裝模組

  • Office Viewer(Markdown Editor)

上述套件的安裝指令如下:

code --install-extension MS-CEINTL.vscode-language-pack-zh-hant code --install-extension ms-python.python code --install-extension ms-python.black-formatter code --install-extension ms-python.flake8 code --install-extension ms-python.isort code --install-extension njpwerner.autodocstring code --install-extension mechatroner.rainbow-csv code --install-extension zhuangtongfa.material-theme code --install-extension PKief.material-icon-theme code --install-extension ritwickdey.LiveServer code --install-extension cweijan.vscode-office

安裝完成後,請點選重新啟動

常用快速鍵(Shortcuts)

全域

  • Ctrl+Shift+PF1 (顯示所有指令)

    Configure Display Language (設定顯示語言) Developer: Startup Performance (開發人員:啟動效能)

  • Ctrl+P (快速檔案開啟)

    可找到最近開啟的,也能用輸入檔名之關鍵字

  • Ctrl+` (開啟VScode內的終端機視窗)
  • Ctrl++ (畫面放大)
  • Ctrl-- (畫面縮小)

編輯

  • Alt+Up (與上一行交換位置)
  • Alt+Down (與下一行交換位置)
  • Shift+Alt+Up (複製本行,游標維持不動)
  • Shift+Alt+Down (複製本行,游標往下)
  • Shift+Alt+Right (在左括號上按下後,可選取到右括號的內容)
  • Shift+Delete 或 Ctrl+X (刪掉游標所在行)
  • Shift+Alt (配合滑鼠滑鼠拖曳,可進行區塊選取)
  • Ctrl+Alt+BackSpace (在左括號上按下後,可將區塊的左右括號刪除)
  • Ctrl+Enter (下方增加一空行)
  • Ctrl+Shift+Enter (上方增加一空行)
  • Ctrl+/ (游標所在行加註解符號,再按一次則取消)
  • Ctrl+\ (分割編輯畫面)
  • Ctrl+],Ctrl+[ (縮排)
  • Ctrl+K 然後按 Ctrl+X (刪除本文件所有的尾部空白)
  • F2 (全域重新命名變數)
  • F12 (跳轉到定義的函數或變數)

更多的快速鍵,請參考:

keyboard-shortcuts-windows

快速鍵上機操作

建立專案目錄

# 在命令提示字元 cmd 下輸入
cd \
mkdir Mypy
cd Mypy
code .

在 VScode 進行操作

  1. 在專案資料夾中新增檔案,並命名為 first.py
  2. 輸入以下程式碼
height = int(input("Please input your height:")) weight = int(input("Please input your weight:")) bmi = weight / (height / 100) ** 2 print("your height:"+str(height))
  1. 在最後一行,按下 2 次的 Shift+Alt+Down (複製本行,游標往下)
  2. 將最後2行複製的程式碼修改為
print("your weight:"+str(weight)) print("your bmi:"+str(round(bmi,2)))
  1. 在檔案總管中的 first.py 按下滑鼠右鍵,選擇:在終端機中執行 Python 檔案
  2. 若上述方式執行失敗,可改為在 cmd 下執行
cd \Mypy
py first.py

Emmet 縮寫語法

VScode 可使用 emmet 快速產生網頁標籤,例如:

  • 產生 html5 元素
html:5[Tab]
a:link[Tab]
input:t[Tab]
input:c[Tab]
input:r[Tab]
input:b[Tab]
  • 只輸入標籤名稱
div[Tab]
span[Tab]
h1[Tab]
  • Child 子代 >
div>ul>li[Tab]
nav>ul>li[Tab]
  • Sibling 兄弟 +
h1+p+h2+p[Tab]
div+p+bq[Tab]
  • Climb-up 父層 ^
div+div>p>span+em^bq[Tab]
div+div>p>span+em^^bq[Tab]
  • Grouping 群組 ()
div>(header>ul>li*2>a)+footer>p[Tab]
(div>dl>(dt+dd)*3)+footer>p[Tab]
  • Multiplication 乘法 *
ol>li*3[Tab]
ul>li*5[Tab]
  • Item numbering 項目編號 $
ul>li.item$*5[Tab]
ul>li.item$$$*5[Tab]
  • ID #
#msg[Tab]
form#search[Tab]
  • CLASS .
.info[Tab]
p.title[Tab]
p.class1.class2.class3[Tab]
  • Text 元素內容 {}
h1{第一章}[Tab]
a{Click me}[Tab]
ul>li{item$}*5[Tab]
  • Implicit tag names 隱含標籤
.class[Tab]
em>.class[Tab]
ul>.class[Tab]
table>.row>.col[Tab]

更多的 Emmet 可參考官網提供的 CheatSheet:https://docs.emmet.io/cheat-sheet/

改用 Cmder 為終端機

1. 下載 cmder 版

2. 設定環境變數

開啟終端機,下達 setx 設定系統變數

setx cmder_root D:\cmder_mini /m

3. 修改 settings.json

找到 settings.json 的下列設定,然後將之註解掉

"terminal.integrated.defaultProfile.windows": "Command Prompt",

下方貼上

"terminal.integrated.defaultProfile.windows": "Cmder", "terminal.integrated.profiles.windows": { "Cmder": { "name": "Cmder", "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [ "/k", "${env:cmder_root}\\vendor\\bin\\vscode_init.cmd" ], "icon": "terminal-cmd", "color": "terminal.ansiGreen" }, },

參考:https://github.com/cmderdev/cmder/wiki/Seamless-VS-Code-Integration

更多的 VSCode 使用技巧,可參考:VSCode 的技巧大補帖

源代碼管理(Source code management;SCM)

源代碼管理 SCM 是一種管理軟體程式碼的系統。它可讓您儲存、組織和追蹤程式碼,並與其他開發人員協作。SCM 可幫助您避免程式碼衝突、追蹤程式碼變更並還原先前的版本。 SCM 也是版本控制(Version Control)的同義詞。

演進脈絡

SCM:Source Code Management

RCS:Revision Control System

VCS:Version Control System

CVCS:Centralized VCS

DVCS:Distributed VCS

CVS:Concurrent Versions System

SVN:Subversion

Git

mercurial

  • Revision Control System (RCS): RCS 是運作在單機上的版本控制系統。它是早期的版本控制系統,用於跟踪和管理單個檔案的歷史版本。每個檔案都有自己的 RCS 版本控制,並且運作在單一的本地機器上。
  • Centralized VCS (集中式版本控制系統): Centralized VCS 運作在中央伺服器和區域網路上。在這種系統中,程式碼儲存在中央伺服器上,每位開發者在工作時需連線到中央伺服器進行操作。典型的例子是 Concurrent Versions System (CVS) 或 Subversion (SVN)。儘管中央伺服器在區域網路內運作,但它並不限於區域網路,可以在 WAN 網路上進行操作,但仍需要與中央伺服器保持連線。
  • Distributed VCS (分散式版本控制系統): Distributed VCS 可以運作在區域網路或網際網路上。這是相對於集中式版本控制系統的進階版本。在 DVCS 中,每位開發者都擁有完整的程式碼儲存庫副本,可以在本地工作而不需持續連線到中央伺服器。開發者可以離線進行工作並在完成後推送變更到遠端伺服器上。著名的 DVCS 實作是 Git 和 Mercurial。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

目前最流行的分散式版本控制系統是 Git ,是 Linus Torvalds 在 2005 年為了管理 Linux 核心所創造。

Git 整體概念

~ 人生不能重來,但 Git 可以 ~ 沒有清楚理解 Git 的運作等於只是做到檔案備份而已,並不能說在版本管控。

Git 版本控制系統,可以記錄每一次版本的存檔內容

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Git 在 Windows 的發展

linus torvalds

Linux

Git

msysgit

Windows

Git for Windows

Git for windows 的定位

安裝 Git for windows

Git 環境參數設定

安裝 Git GUI

整合開發工具

TortoiseGit

SourceTree

GitHub Desktop

VScode

PyCharm

安裝與設定

  • 先安裝 Git for Windows
  • 設定 Git 基本參數
  • 安裝想要使用的 Git GUI 程式,例如 Github Desktop
  • 若要將檔案推到 remote 版本庫,則要到 Github 去 create new repository
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

後續基本使用

  • 在專案目錄使用 git init 進行初始化,建立 .git 目錄
  • 初始化後代表建立了 Local Repository(本地端版本庫),亦即建立了主分支 master
    • Repository 版本庫(儲存庫、倉庫)有 Local 與 Remote 二種。
  • 有異動的檔案若要送進本地端版本庫之前,必須先使用 git add 送進暫存區(Staging Area),將想要進行版控的檔案打包的意思。
  • 暫存區的檔案使用 git commit 指令可送進本地端版本庫,且必須寫上此版本的描述。
  • 若專案目錄下的檔案想從本地端的版本庫還原,可下達 git checkout 檔案名稱進行。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Git 開始運作時,預設的主分支叫【master】,commit 提交之後,就會在分支上形成節點。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

HEAD 是一個分支指標,會指向「目前所在分支」。在 .git 目錄裡有一個檔名為 HEAD 的檔案,記錄著目前 HEAD 在哪一個分支。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

checkout 指令有切換分支與還原檔案的功能,後來在 Git 2.23 之後增加了 switch 指令,專門用來切換分支,建議日後 checkout 就拿來還原檔案即可。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

某些無需加入版本庫的檔案,可將其名稱放在 .gitignore 檔案中,未來就不會被 Git 納入管理了,但 .gitignore 檔案本身必須被納入版本庫管理。各種語言會用到的 .gitignore,可參考 https://github.com/github/gitignore

  • git init 初始化會建立一個隱藏目錄 .git 用來作為本地端儲存庫,其中名為 index 的索引檔案,作為記錄專案所有檔案的狀態之用。
  • GitHub 建議每一個版本庫都應該要有 README.md, LICENSE, 和 .gitignore 這3個檔案。

cd xxx

init

add

checkout

commit

checkout HEAD

Git 本地端運作

工作區 Working Directory

本地版本庫 Local Repository

暫存區 Stagine Area

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • git config list 可檢視目前 Git 的全域設定

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
參考資料

Git for Windows 介紹

Git for Windows (舊名:msysgit) 是 Git 官方在 Windows 上的實作,它提供了 Git 的命令列工具和 Git Bash,讓使用者可以在 Windows 系統上進行 Git 相關操作。

雖然許多在 Windows 上運作的 GUI 軟體,如 TortoiseGit、SourceTree 和 GitHub Desktop,都內建了 Git 命令執行的環境,但為了避免版本衝突和統一 Git 環境,建議使用者在 Windows 系統上先安裝 Git for Windows,以獲得統一的 Git 命令執行環境。

安裝 Git for Windows 可以確保在 Windows 系統上使用的所有 Git 工具都使用相同版本的 Git,從而避免可能出現的版本衝突和相容性問題。此外,當您需要在多個 GUI 軟體中切換時,統一的 Git 環境也能帶來更加一致和順暢的使用體驗。

請下載 Git for Windows 並進行以下安裝:

Git for Windows 的主要元件如下,可大致了解其功能:

  • MSYS2(Minimal SYStem 2): 它提供了一個在 Windows 上執行輕量 POSIX 環境的工具集(ls/grep/awk),Msys2通常不是用户直接使用的,而是在後台為 Git Bash 和其他 Unix 相容工具提供支持。
    • MinGW-w64(Minimalist GNU for Windows 64-bit): 是用于在 Windows 上開發原生(native) Windows 應用程式的工具集。它提供了一组編譯器、鏈接器和函式庫,使開發人員能够編寫和編譯適用於 Windows 平台的應用程式,而不需要依賴於類 Unix 的環境(cygwin)。
    • Git Bash: 在 MSYS2 中提供了一個模擬 BASH 的 Unix shell 環境,讓使用者可以在 Windows 上執行Git命令與 Linux 的命令和工具。
    • MinTTY: 它是一個終端模擬器,用於提供更好的終端機使用體驗。它是 Git for Windows 預設提供的終端模擬器,通常用於執行 Git Bash 之上。Mintty 提供了更好的文字顯示、複製貼上功能、多視窗支持以及可定制性。
  • Git 命令列工具: 它提供了 Git 的命令列工具,讓使用者可以進行各種 Git 操作,如新增檔案、提交變更、建立分支等。
  • Git 圖形界面工具:
    • Git GUI:Git for Windows 的圖形用戶界面工具,提供了一個直觀的圖形界面,讓使用者可以進行常見的版本控制操作,例如新增、提交、合併等。
    • Gitk:Git for Windows 的歷史查看器,它能夠以圖形化的方式展示 Git 版本庫的提交歷史和分支情況,方便使用者了解專案的演進和分支的變化。
  • Git Credential Manager:用於管理 Git 的身份驗證信息,例如用於 HTTPS 或 SSH 認證的使用者名稱和密碼,避免每次操作都需要輸入這些訊息。
  • Git LFS(Large File Storage):Git LFS 是一個用於處理大型二進制檔案(例如圖片、音檔和影片)的工具,它使得 Git 可以更有效地管理大檔案,避免將這些檔案直接存儲在版本庫中。
  • Scalar 是一個用於改進 Git 操作性能的功能。Scalar 是由 Microsoft 用 C# 開發的 .Net core 工具,目的在減少 Git 操作的時間,特別是對於大型版本庫和大量檔案的操作,以提高 Git 在 Windows 操作系統上的性能。

POSIX(Portable Operating System Interface of UNIX) 是一種作業系統介面標準,其目的是確保不同廠商的 UNIX 作業系統可以互相相容,並且可以讓應用程式在不同作業系統上執行。因為是開放標準,不僅 UNIX 操作系統遵循該標準,其他類 UNIX 操作系統(如 Linux 和 macOS)也支持,方便開發人員進行跨平台開發和應用程序的共享與交流。

安裝畫面說明

選擇搭配 Git 的預設編輯器,在此建議使用 Notepad++,因其速度快,方便迅速調整之用。

讓 Git 決定新的版本庫主要分支的名稱,預設為【master】,但未來應該會改為【main】,因為 master 帶有歧視的涵義,在此使用【預設選項】即可。

調整路徑的環境變數,以 Windows 內建的為主,Git 提供的 Unix 指令為輔,在此使用【預設選項】即可。

以下二個畫面,預設使用 Git 提供的 OpenSSH 版本,除非你的電腦環境已經有其它 OpenSSH 環境,否則使用【預設選項】即可。

為了跨平台相容的緣故,預設從版本庫取出時,換行符號會改成 CRLF,但放進版本庫時,換行符號會改為 LF,在此使用【預設選項】即可。

使用 MinTTY 作為 Git Bash 的終端機界面,以便支援在 windows 上的 Unicode 與複製貼上等功能,並非取代 Git Bash 而是協同元件的關係,在此使用【預設選項】即可。

決定從遠端版本庫 git pull 之後,如何與本地端版本庫同步的行為,在此使用【預設選項】即可。

是否使用內建的身份驗證信息管理器 Credential Manager,在此使用【預設選項】即可。

是否啟用額外的選項功能(系統暫存、符號連結),在此使用【預設選項】即可。

是否啟用實驗性的選項功能,在此請勾選第2項:file system monitor,可加速大型版本庫中使用 git status / git add / git commit 等指令的掃描時間。

GitHub Desktop 介紹

GitHub 這個線上服務可視為社交網站,就像是在 FB 上貼文,只不過我們貼上的是 code 而已,並且我們須使用 Git 指令 (git push) 才能上傳 code。也因為這個服務搜集了非常多人的不同 code ,也可視為像網路封包的集中處 Hub,所以稱為 GitHub

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

GitHub Desktop 正是 GitHub 提供大家使用視窗工具(尚未有中文化版本),能夠簡易地操作 git 指令上傳或下載 code,但與 SourceTree 比較起來,會覺得許多 Git 功能都沒有支援,但想想也就知道,因為它的定位是拿來進行 Github 管理之用,所以列出其使用時機如下:

  • 下載別人的專案,例如 Hugo(Go語言撰寫的靜態網站生成器)。
  • 已有 Local Repo 想快速的建立 Remote Repo 與 push/pull 檔案。

自行開發的專案,建議還是用 VScode 內建的版本管控功能處理就好,若與他人協同開發,版本管控複雜則建議改用 SourceTree。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

安裝與身份驗證

進入官網後,會根據你的電腦OS跳出對應的下載版本

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

登入github 帳號

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

瀏覽器開啟 github 官網進行認證(希望未來能結合 Google 認證)

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Git 在每一次的 commit 時,需要記錄使用者的名稱與Email,因此需要先進行全域的變數設定

git config --global user.email "你的Email"
git config --global user.name "你的英文名"

當然使用了 Github Desktop 就無需下達指令了,預設它會使用您在 Github 上的資料,按下 Finish 就進行如上述的全域變數設定。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

安裝完成後,第一個畫面如下,最主要的功能是第 2、4 項

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


配置和自定義 Github Desktop

以滑鼠點選 File -> Options,可看到以下畫面進行各項設定,其中第 2、3、4 項比較重要

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Intergrations (選擇整合搭配的外部程式) 此處預設為 Visual Studio Code,無須更動

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Git (設定 Git 的環境變數)

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Appearance (外觀) 建議改為 Dark 黑色

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


如何建立版本庫

選單:File -> New repository...

此功能建議用在專案第一次要建立版本庫並上傳 GitHub 時,假設專案目錄的路徑是 D:\pyTest\bookmark

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  • Name:與專案目錄名稱相同
  • Description:版本庫的描述,之後會成為 GitHub 上專案的 About
  • 若勾選了
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    【Initialize this repository with a README】會在專案目錄下產生 README.md 檔案
  • Local path:專案的【上層資料夾】
  • Git ignore:會在專案目錄下產生 .gitignore 檔案,此檔案以萬用字元方式表達不加入版本庫控管的檔案或目錄,下拉可選擇專案使用的程式語言快速套用,後續再自行增刪內容
  • License:版本庫授權方式,可先參考【常見的五個開源專案授權條款,使用軟體更自由】再做選擇

按下【Create repository】之後,GitHub 就自動替專案做好了第一次的送進暫存區(git add)與 提交本地端版本庫(git commit),且註解固定是【Initial commit】

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

若要將本地端版本庫推送到 GitHub,可按下【Publish repository】就會出現以下視窗

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
預設版本庫是私人不公開的,若要公開請取消【Keep this code private】,再按下【Publish repository】

此時可開啟 GitHub 自己的帳號的【Your repositories】頁面看看是否正確上傳

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

點選這個新的專案版本庫後,預設會停留在第一頁 Code 畫面如下

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


如何將 Local Repo 拉進 GitHub Desktop 管理

選單:File -> Add local repository...

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

挑選任何本地端的版本庫加入到 GitHub Desktop 中,操作畫面請參考官網文件:Adding a repository from your local computer to GitHub Desktop


如何將 GitHub 自己的帳號下的專案複製到 Local Repo

選單:File -> Clone repository...

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

適用在遠端版本庫有某專案,但本地端還沒有的情形,Clone會將該專案抓回本地端版本庫,專案畫面請參考官網文件:Cloning and forking repositories from GitHub Desktop


如何下載他人的專案

若在 GitHub 網頁上想將別人的專案抓回本地端參考,可點選【Code】,然後點選【Open with GitHub Desktop】

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

瀏覽器上方詢問視窗,點選【開啟 GithubDesktop.exe】

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

GitHub Desktop 開啟後,會出現以下視窗

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

按下 Clone 等待下載完成即可

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


如何將改變 GitHub 專案的可見性

  1. 進入要刪除的專案
  2. 點選上方選單的【Settings】
  3. 滑動到最下方的 Danger Zone 區域
  4. 按下 Change visibility 按鈕
  5. 點選 【Change to public】 或 【Change to private】
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

如何刪除 GitHub 上的專案

  1. 進入要刪除的專案
  2. 點選上方選單的【Settings】
  3. 滑動到最下方的 Danger Zone 區域
  4. 按下最後一個【Delete this repository】按鈕
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  5. 點選 I want to delete this repository
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  6. 點選 I have read and understand these effects
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  7. 輸入自己的 Repo 名稱,再點選 Delete this repository
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

如何讓其它人【協作】 GitHub 專案

  1. 進入專案點上方的 tag 「settings」
  2. 點左側 Access 項下的「collaborators」
  3. 按下「Add people」

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


readme.MD 檔是一個 markdown 語法的檔案。

VScode 版控

一、前置準備

1.同步 VScode 環境設定

要將目前 VScode 的環境設定存放到自己的 Github 帳號上,讓不同電腦都能同步,請先確認已安裝了 Git for Windows,並且有了 GitHub 帳號,再進行下列步驟。

  • 1.1 左下角齒輪(設定) -》開啟設定同步
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 1.2 畫面上方的設定同步畫面,點選【登入並開啟】
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 1.3 下一步選擇 Github 帳號
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 1.4 在跳出的瀏覽器中登入自己的 GitHub 帳密

2.安裝套件 Git Extension Pack

點選左側垂直選單第5個:延伸模組,搜尋【Git Extension Pack】,找到作者是【Will 保哥】的版本,如下圖:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

上述套件的安裝指令如下:

code --install-extension doggy8088.git-extension-pack

3.Git初始化

因為 Git 每次提交時除了版本說明外,也都會紀錄提交者的 name 與 Email 資訊,因此利用指令做一次全域設定,請在終端機下鍵入以下指令

git config --global user.email "你的Email"
git config --global user.name "你的英文名"

或使用 GitHub Desktop 進行上述設定。

可使用命令 git config list 檢視目前使用者的全域設定,設定檔的位置在使用者家目錄下的 .gitconfig

二、版控流程

1.建立專案資料夾

開啟命令提示字元,輸入以下指令

mkdir guessNum cd guessNum code .

2.VScode撰寫程式碼

  • 2.1 檔案總管中建立檔案 app.py
  • 2.2 貼上以下程式碼
# 猜數字 import random answerNum = random.randint(1, 100) for i in range(1, 8): guess = input("請在7次內猜出數字:") if guess == "" or not guess.isdigit(): break elif int(guess) == answerNum: print("讚!答對了^_^ ") quit() elif int(guess) > answerNum: print("> 猜低些試試") elif int(guess) < answerNum: print("> 猜高些試試") print("\n正確答案是:" + str(answerNum)) input()
  • 2.3 按右鍵點擊【在終端機中執行Python程式碼】,試試程式功能是否正常。

3.原始檔控制

  • 3.1 初始化 Local Repo 在專案目錄下建立 .git 目錄作為 Local Repo
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
    從左下角可以觀察到主要分支名稱為【main】
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 3.2 將檔案送入暫存區(Stage All Changes)
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
    留意按下後,檔案會從【變更】區移動到【暫存的變更】區
  • 3.3 提交暫存區的檔案至 Local Repo 輸入此次提交的版本訊息:【Initial commit】,然後按下【提交】
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 3.4 發佈至 Remote Repo:GitHub
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
    按下後,畫面上方會請我們選擇要發佈的權限是 private 還是 public
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
    等待上傳完成後,畫面右下角會出現完成訊息,並可開啟 GitHub 開啟瀏覽
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 3.5 若此時增加檔案 .gitignore 按下 F1,輸入【Add gitignore】,再輸入【py】選擇 Python 確定後即產生 .gitignore 檔案,同時版控區會出現檔案未被追蹤的提示(Untracked)
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  • 3.6 若此時異動檔案 app.py 程式碼異動存檔後不久,版控區會自動出現檔案遭變更的提示(Modify)
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
    此時可進行【捨棄】或送至【暫存】區的選擇
  • 3.7 其它 Git 操作 按下【F1】之後,再輸入【git】可看到許多 Git 相關指令

若使用 VScode 的版控將檔案送至 Remote Repo ,會發現 GitHub 上的專案少了 About 描述、README.md 與 .gitignore 檔案,因此首次建立版本庫時,建議使用 GitHub Desktop 會整合的更好。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
參考影片

如虎添翼

Windows 重要 Hotkey

  • Alt + Space

    快速搜尋

  • Win + Space

    切換中文輸入法

  • Win + P

    投影模式選擇

  • Win + Print Screen

    截圖工具

  • Shift + Win + 【left | right】

    雙螢幕視窗切換

第三方工具

  • Cmder

    具有 Linux 溫度的終端機程式,可取代內建的cmd 與 powershell,安裝 mini 版即可。若要與 VScode 結合請參考:Seamless VS Code Integration

  • WinMerge

    一套開放原始碼的視覺化文字比對與合併工具。當你需要在不同版本的文件之間快速地找出不同點,或是需要將被各自修改過的二份文件合併時使用。

  • grepWin

    可使用正規表示式進行檔案內容搜尋與取代的工具。

  • Ditto

    補強 window 剪貼簿功能,使用者可以將複製的每個項目通通放在剪貼清單上,且隨時都可以作存取,而且不限於文字,圖片、HTML等其他格式。

  • Notepad++

    以C++所設計的純文字編輯軟體,開放原始碼、體積輕巧不佔系統記憶體,支援多分頁功能,完美取代微軟記事本!具有好用的中文搜尋取代、支援ANSI、UTF-8(支援檔首無BOM)、UCS-2等格式的編譯及轉換。

  • PowerToys

    Microsoft PowerToys是一組免費的系統工具軟體,由微軟為Windows作業系統上的系統管理員設計。這些程式為系統加入或變更了一些功能,並加入更多自訂選項以提高生產力。

  • WinSCP

    WinSCP是在Windows中使用SSH的開放原始碼的圖形化SFTP用戶端。同時也支援SCP通訊協定。它主要的功能是安全的在電腦間傳輸檔案。

線上工具

回家作業

請於 10/6 24:00 以前完成以下二項版控作業,並將對應的 GitHub 專案網址上傳表單:https://forms.gle/a8UmgJks4kV6AzLKA

1. 版控實作

請使用命令提示字元在本機建立一個專案:BMIcalc,並以指令呼叫 VScode 開啟資料夾,新增 app.py 並輸入程式碼如下

height = int(input("Please input your height:")) weight = int(input("Please input your weight:")) bmi = weight / (height / 100) ** 2 print("your height:"+str(height))

執行上述程式碼無誤後,請完成 GitHub 的版控專案推送(使用 GitHub Desktop 進行),內容必須完整(包含專案的描述與 .gitignore/README.md 等4個檔案),repo 的能見度須為 public。

完成上述版控後,再到 VScode 修改程式碼,增加以下 3 行(最後一行必須是空行)

print("your weight:"+str(weight)) print("your bmi:"+str(round(bmi,2)))

執行上述程式碼無誤後,再請增加工作區設定(.vscode\settings.json),可參考講義的 VScode 基礎介紹、環境設定一節的內容,然後進行第 2 次版控作業(使用 VScode 進行 git add/commit/push)

完成上述版控後,再修改 .gitignore 檔案,增加以下2行

# 忽略 .vscode 目錄
.vscode

但因為 .vscode 是在 .gitignore 排除之前就進入版控了,因此必須手動下達指令清除本機 Git 的快取,請在 VScode 中按下 【Ctrl + `】 (令終端機開啟於專案目錄),輸入以下指令

git rm --cached -r .vscode/.

完成上述動作後,請進行第 3 次版控作業(使用 VScode 進行 git add/commit/push) 最後將 GitHub 專案網址記錄下來。

2. 收歸己用

請使用 GitHub Desktop 將專案 https://github.com/peterju/guessNum Clone 到自己的電腦,並進行以下動作

  1. 刪除 .git 目錄(記得開啟隱藏檔的檢視權)
  2. 調整程式碼,最後一行必須是空行
  3. 執行程式碼,看看程式執行是否正常
  4. 再請增加工作區設定(.vscode\settings.json)
  5. 以 GitHub Desktop 增加專案的描述與 .gitignore/README.md 等4個檔案,進行第一次版控並 publish 至 Github
  6. 以 VScode 修改 .gitignore 排除 .vscode 目錄
  7. 在 VScode 以指令排除版控追蹤 git rm --cached -r .vscode/.
  8. 在 VScode 進行第2次的版控作業(進行 git add/commit/push)

上傳到自己的 GitHub,專案的能見度請設為 public,再將專案網址記錄下來。

老師會看你的專案是否有 About 描述、說明等4個檔案,commit 的次數與說明是否正確。

ps:

  • 來源專案未依照 github 建議設定該有的項目。
  • 程式碼最後一行必須是空行是 PEP 8 建議的規範。

.gitignore 只能忽略尚未被追蹤的檔案 (Untracked Files),也就是那些從來沒有被 Git 記錄過的檔案(從未經版控 add 及 commit 過的檔案)所以如果開發到一半才新增 .gitignore 或在 .gitignore 排除檔案與目錄以前,就已被加入 Git 版控的檔案會無法被排除。

要解決這個問題,除了版控開始前就設定好 .gitignore 的內容,像這種已經開始版控後才想到要排除的檔案與目錄,就必先清除 Git 對排除項目的快取(取消追蹤),再重新 git add 與 git commit 才能解決。

學習參考