2025年2月17日 星期一

如何安裝 VS Code 並設置 Python 開發環境

 

影片翻譯:如何安裝 VS Code 並設置 Python 開發環境


介紹 (Introduction)

0:00
嗨,大家好!這部影片將教大家如何安裝 Visual Studio Code (VS Code) 並設置 Python 開發環境

0:06
我們還會介紹這個編輯器的各種功能,並說明為什麼它特別適合 Python 開發。內容包括:

  • 如何在不同編輯器間快速切換
  • 如何偵錯 (Debug) 應用程式
  • Git 版本控制的整合
  • 單元測試 (Unit Testing)
  • 其他相關功能

0:18
最近,我收到很多關於 VS Code 的問題和請求,發現許多人都在改用這款編輯器。不知道大家有沒有聽過 Talk Python 播客,由 Michael Kennedy 主持?

0:29
在每集節目結束時,他總是問來賓最喜歡哪個編輯器或 IDE。過去答案還蠻多元的,但現在「VS Code」幾乎成了標準答案,讓我決定試試看這款編輯器。

0:42
結果我真的對 VS Code 感到印象深刻,未來的影片中,可能會一直使用它!

0:54
不過,我發現 WindowsMac 的使用方式稍有不同,所以這次我會製作 Windows 專屬 的影片,Mac 版則會在描述欄附上連結。


安裝 VS Code (Installing VS Code)

1:18
首先,我打開 Visual Studio Code 的官方網站 (code.visualstudio.com)。

1:23
⚠️ 請注意!「Visual Studio Code」和「Visual Studio」是 不同 的軟體!

  • Visual Studio 是完整的 IDE(適合 C#、.NET 開發)
  • VS Code 是較輕量的 編輯器,可以透過 擴展 (Extensions) 來強化功能

1:42
VS Code免費 的,我們只需下載並安裝即可。

  • 點擊 下載 (Download) 按鈕
  • 選擇適合的作業系統(這裡是 Windows
  • 檔案會自動下載

2:00
完成下載後,執行 安裝程式 (Installer),和一般軟體安裝方式相同:

  1. 接受使用條款
  2. 選擇安裝位置
  3. 勾選「建立桌面捷徑」(方便開啟)
  4. 完成安裝,然後開啟 VS Code

第一次啟動 VS Code (First Launch of VS Code)

2:38
當我們 第一次開啟 VS Code 時,會出現 「快速入門」(Getting Started) 頁面,以及 歡迎畫面

2:50
雖然這些頁面有很多有用的資訊,但我會在這部影片中介紹主要內容,所以先關閉它們。

3:08
現在,我把 VS Code 放大,並調整 縮放比例,讓我們能夠更清楚地看到選單和文字。


探索 VS Code 介面 (Exploring the Editor)

3:14
VS Code 介面簡潔直觀,不會有多餘的視覺干擾。
但如果是新手,可能需要一點時間適應,因為大多數功能都是用 圖示 而非文字顯示。

3:26
📌 活動欄 (Activity Bar) - 主要導航區域

  • 📁 檔案總管 (Explorer):開啟、管理專案資料夾和檔案
  • 🔍 搜尋 (Search):可以在 多個檔案 內搜尋和取代內容
  • 🔗 Git 版本控制 (Source Control):整合 Git,可直接推送程式碼到 GitHub
  • 🐞 偵錯 (Debugging):VS Code 內建強大的 偵錯工具
  • ⚙ 擴展管理 (Extensions):用來安裝各種 VS Code 擴展

安裝 Python 擴展 (Managing Extensions)

5:46
接下來,我們來 安裝 Python 擴展,這是 VS Code 最受歡迎的擴展,擁有超過 4200 萬次下載

6:24
Python 擴展提供許多強大功能:

  • Linting(語法檢查)
  • Debugging(程式偵錯)
  • 程式碼格式化 (Formatting)
  • 單元測試 (Unit Testing)
  • IntelliSense(智慧提示功能)

6:48
安裝方式:

  1. 點擊 擴展管理 (Extensions) 圖示
  2. 搜尋「Python」 並安裝
  3. 等待幾秒,擴展完成安裝後,即可使用 Python 開發功能!

開啟 Python 專案 (Opening a Python Project)

7:06
現在,我打開一個 現有的 Python 程式碼(如果沒有,可以建立 .py 檔案)。

  1. 點擊「檔案總管」(Explorer) 圖示
  2. 選擇「開啟資料夾」(Open Folder)
  3. 找到專案資料夾,開啟 Python 檔案

7:56
開啟檔案後,VS Code 可能會跳出兩個提示:

  • 更改 Python 直譯器 (Interpreter)
  • 安裝 Linter(程式碼檢查工具)

這些我們稍後會進一步設定。


執行 Python 程式 (Running Python Code)

8:57
現在,我們來 執行 Python 程式

9:20
方法 1️⃣:右鍵選單執行

  • 右鍵點擊程式碼區域
  • 選擇 「Run Python File in Terminal」(在終端機執行 Python 檔案)

9:38
方法 2️⃣:使用鍵盤快捷鍵執行(稍後設定)

執行後,我們可以在 終端機 (Terminal) 看到輸出結果,包括 Python 版本與執行的輸出內容。


切換 Python 直譯器 (Switching Python Interpreters)

10:08
如果系統安裝了多個 Python 版本,例如 Python 2 和 Python 3,可以手動切換直譯器。

步驟

  1. 在 VS Code 左下角,點擊 Python 版本號
  2. 選擇適合的 Python 版本

💡 建議使用 Python 3,如果尚未安裝,可以在 Python 官網下載安裝。


這是 影片前 10 分鐘 的完整繁體中文翻譯,後續內容包括:

  • 如何設定虛擬環境 (Virtual Environment)
  • 如何使用 Debug 功能
  • Git 版本控制與 GitHub 連接
  • 自動格式化與 Linting
  • 單元測試 (Unit Testing)

如果您希望完整翻譯整部影片,請讓我知道! 😊

這是該影片的 繁體中文翻譯 (Part 2),涵蓋 設定 VS Code 介面、Python 直譯器、虛擬環境 (Virtual Environment)、擴展 (Extensions),以及 如何在 VS Code 中運行 Python 程式


設定 VS Code 介面 (Customizing VS Code Interface)

14:38
身為程式設計師,我們幾乎每天都在使用編輯器,因此應該讓它符合自己的喜好,提升舒適度和工作效率。

🔹 更改檔案圖示 (Changing File Icons)

14:44
VS Code 預設的 檔案圖示(File Icons)已經很不錯,例如:

  • Python 檔案 會顯示 Python 圖示
  • JSON 檔案 會顯示 大括號圖示

14:57
如果想要 更改檔案圖示,可以按照以下步驟操作:

  1. 開啟命令面板 (Command Palette)Ctrl + Shift + P
  2. 輸入「File Icon Theme」 並選擇「更改檔案圖示主題」(Change File Icon Theme)
  3. 安裝額外的檔案圖示套件(可以根據下載數量排序)
  4. 我個人推薦「Ayu」圖示主題,安裝後可以讓介面更美觀

16:01
套用 Ayu 圖示主題後,檔案管理器中的資料夾會有更清楚的 開啟/關閉圖示,方便辨識。


修改 VS Code 使用者設定 (Changing User Settings)

🔹 進入 VS Code 設定頁面

16:16
目前我們已經隱性地更改了 全域使用者設定 (Global User Settings),例如:

  • 更改 顏色主題 (Color Theme)
  • 更改 檔案圖示主題 (File Icon Theme)

如果想要查看 所有可更改的設定,可以:

  1. 點擊左下角齒輪圖示 ⚙
  2. 選擇「設定」(Settings)

16:51
🔸 VS Code 目前預設的設定方式

  • UI 介面 顯示
  • 以前是 JSON 格式並排顯示,但現在改為 UI 方式

17:23
🔸 如果想使用 JSON 格式來編輯設定

  1. 點擊右上角 {} 圖示(「以 JSON 格式開啟設定」)
  2. 現在可以手動編輯設定 JSON

🔹 主要設定項目

18:03
查看目前已變更的設定:

  • 縮放等級 (editor.zoomLevel):目前為 3
  • 啟動畫面 (workbench.startupEditor):已設為「不顯示歡迎畫面」
  • 顏色主題 (workbench.colorTheme)
  • 檔案圖示 (workbench.iconTheme)

變更 Python 直譯器 (Changing Python Interpreter)

21:26
當我們執行 Python 程式時,VS Code 預設會使用 系統內的第一個 Python 版本
如果系統安裝了 Python 2Python 3,我們可能需要手動切換直譯器。

🔹 變更直譯器的方法

  1. 點擊左下角 Python 版本號
  2. 在選單中選擇 Python 3.7(或你要使用的版本)

22:50
如果我們希望 每次開啟新專案時,自動使用指定的 Python 版本,可以:

  • 手動設定 settings.json,指定 Python 直譯器的完整路徑
  • 透過 內建終端機 (Integrated Terminal) 查詢 Python 路徑:
    import sys
    print(sys.executable)
    
  • 複製這條路徑,貼到 settings.json"python.defaultInterpreterPath" 設定中

建立 Python 虛擬環境 (Creating a Virtual Environment)

25:22
在 Python 開發中,通常建議為每個專案 建立獨立的虛擬環境,避免不同專案的依賴套件產生衝突。

🔹 創建虛擬環境 (Using venv)

  1. 開啟 VS Code 內建終端機 (Ctrl + `)
  2. 輸入以下指令 建立虛擬環境:
    python -m venv venv
    
  3. 等待幾秒鐘,系統會在專案資料夾內建立一個 venv/ 目錄

在 VS Code 中啟用虛擬環境 (Activating Virtual Environment in VS Code)

27:10
虛擬環境建立後,需要手動啟用它:

🔹 Windows (cmd / PowerShell)

venv\Scripts\activate

🔹 macOS / Linux (bash / zsh)

source venv/bin/activate

啟動後,終端機提示符會顯示 (venv),代表目前正在使用這個虛擬環境。


在 VS Code 設定虛擬環境為專案直譯器

27:33
現在,我們需要讓 VS Code 自動使用這個虛擬環境

  1. 點擊左下角 Python 版本號
  2. 選擇 剛剛建立的虛擬環境 (venv)
  3. VS Code 會自動偵測並啟用該環境

如果 VS Code 沒有偵測到虛擬環境,可以手動修改 settings.json,將 python.pythonPath 設為 venv 內的 Python 直譯器路徑:

"python.pythonPath": "C:\\Users\\YourUser\\YourProject\\venv\\Scripts\\python.exe"

測試虛擬環境 (Testing Virtual Environment)

28:56
現在,我們可以在虛擬環境中 安裝 Python 套件,例如 requests

pip install requests

如果安裝成功,就能在 Python 腳本中正常匯入該套件:

import requests

總結 (Summary)

我們已經學會如何:
安裝與設定 VS Code
自訂 VS Code 介面(主題 & 圖示)
變更 Python 直譯器
建立 Python 虛擬環境 (venv)
在 VS Code 內使用虛擬環境

接下來,我們可以進一步學習如何:

  • 使用 VS Code 偵錯 Python 程式 (Debugging)
  • 設定 Git 版本控制與 GitHub 整合
  • 執行單元測試 (Unit Testing)

如果你希望我 繼續翻譯剩餘的影片內容,請告訴我! 😊

這是該影片的 繁體中文翻譯 (Part 3),涵蓋 IntelliSense、自動格式化 (Auto Formatting)、程式碼 Linting、擴展 Code Runner 的使用,以及 如何確保 Python 程式使用正確的虛擬環境


使用 IntelliSense (VS Code 智慧提示功能)

🔹 IntelliSense 提供的功能

29:45
現在,我要移除目前的 print() 陳述式,改用 requests 來進行 HTTP 請求。
在輸入程式碼時,請注意 IntelliSense 的運作方式。這是 VS Code 內建 的功能,會顯示 物件可用的屬性與方法

29:59
例如:

r = requests.

當我輸入 requests. 並按下 .(點),就會跳出 可用的方法列表,包括:

  • get()
  • post()
  • session()

這樣我們可以快速選擇適合的方法,而不需要記住所有 API。

🔹 使用「前往定義」(Go to Definition)

30:23
如果想深入了解某個方法,例如 get(),可以:

  1. 右鍵點擊 get() 方法
  2. 選擇「前往定義」(Go to Definition)

這將打開 requests 函式庫內部的原始碼,讓我們查看 get() 方法的實作方式。

30:54
如果不想開啟整個檔案,也可以使用 「快速查看定義」(Peek Definition),這會在當前視窗內顯示一個小彈窗來檢視程式碼。


發送 HTTP 請求 (Sending an HTTP Request)

🔹 取得 HTTP 狀態碼

31:10
現在,我將發送一個請求到我的個人網站,並印出 HTTP 狀態碼

r = requests.get("http://coreyms.com")
print(r.status_code)

執行 Python 程式 (Running the Python File)

31:51
現在,我要執行這段程式碼:

  1. 右鍵點擊程式碼
  2. 選擇「Run Python File in Terminal」

32:02
執行後,終端機會顯示:

  • Python 直譯器的位置(這次是虛擬環境內的 Python)
  • 回應的 HTTP 狀態碼(應該會是 200,表示請求成功)

自動格式化 Python 程式碼 (Auto Formatting)

🔹 安裝 Python 格式化工具

32:19
目前,我們還 沒有安裝格式化工具 (formatter),所以現在要來設定這部分。

32:46
📌 如何手動格式化程式碼

  1. 開啟命令面板 (Ctrl + Shift + P)
  2. 輸入「Format Document」
  3. VS Code 會提示安裝 autopep8black 格式化工具

33:06
📌 選擇格式化工具

  • autopep8:較傳統的 Python 格式化工具
  • black:較新的格式化工具,由 Kenneth Reitz 推薦(作者也選擇 black

我們選擇安裝 black

pip install black

🔹 自動格式化程式碼

33:30
現在,只要按 Shift + Alt + F,就會自動整理程式碼,使其符合標準風格。

📌 示範前後差異

  • 未整理的程式碼
    r=requests.get("http://coreyms.com")
    print ( r . status_code )
    
  • 格式化後的程式碼
    r = requests.get("http://coreyms.com")
    print(r.status_code)
    

全域 VS 工作區設定 (Global vs. Workspace Settings)

34:05
⚠️ 注意! 在 VS Code 中,某些設定只會應用於 目前專案 (workspace settings),而非 全域設定 (global settings)

34:19
為了讓 black 成為 預設格式化工具,我們可以將它加入 全域設定 (settings.json)

  1. 開啟 settings.json
  2. 新增以下設定
    "python.formatting.provider": "black",
    "editor.formatOnSave": true
    

這樣,每次儲存檔案時 (Ctrl + S),VS Code 會自動格式化程式碼! 🎉


排序 import 陳述式 (Sort Imports)

35:58
在 VS Code 中,我們也可以 自動排序 import 陳述式
例如,這段未排序的 import 陳述式:

import requests
import os
import math

透過命令面板搜尋 「Sort Imports」,執行後結果變為:

import math
import os
import requests

這樣,標準函式庫 (math, os) 會排在第三方函式庫 (requests) 之前。


程式碼 Linting(語法檢查)

🔹 安裝 Linter

37:10
Linting 會幫助我們檢查程式碼中的錯誤與潛在問題。
VS Code 內建支援 Pylint,但可以改用其他工具,例如 flake8mypy 等。

現在,我們安裝 pylint

pip install pylint

🔹 錯誤與警告

38:02
如果 Python 程式有錯誤,VS Code 會標示紅色底線,並顯示警告,例如:

print "Hello, World!"  # Python 2 的語法

VS Code 會顯示錯誤:「缺少括號,是否要改成 print("Hello, World!")

39:22
如果有未使用的變數,例如:

unused_var = "Test"

VS Code 會顯示 綠色警告:「未使用的變數 unused_var」,幫助我們清理不必要的程式碼。


使用 Code Runner 快速執行 Python

🔹 安裝 Code Runner 擴展

40:03
現在,我們要安裝 「Code Runner」 擴展,讓 Python 程式更容易執行:

  1. 開啟擴展管理 (Ctrl + Shift + X)
  2. 搜尋「Code Runner」並安裝
  3. 完成後,程式碼編輯區右上角會出現「▶ Run」按鈕

🔹 問題:Code Runner 預設使用全域 Python

41:42
目前,Code Runner 預設使用 系統全域 Python,但我們希望它使用 虛擬環境
這會導致某些情況下,程式碼找不到安裝的函式庫。

🔹 修改 Code Runner 設定

  1. 開啟 settings.json
  2. 新增以下設定
    "code-runner.executorMap": {
        "python": "$pythonPath -u $fullFileName"
    },
    "code-runner.clearPreviousOutput": true,
    "code-runner.showExecutionMessage": false
    

這樣: ✅ 會使用 VS Code 當前選定的 Python 直譯器(虛擬環境)
不會顯示過多的輸出資訊
每次執行程式時,終端機會自動清除先前輸出


這是影片的 完整翻譯 (Part 3)!🎉
如果您想繼續翻譯剩餘內容,請告訴我! 😊

這是該影片的 繁體中文翻譯 (Part 4),涵蓋 鍵盤快捷鍵、使用者輸入 (input)Git 版本控制與 GitHub 整合,以及 VS Code 偵錯 (Debugging) 功能


使用快捷鍵執行程式 (Running Code with Keyboard Shortcuts)

🔹 VS Code 預設的執行快捷鍵

45:43
如果我們 右鍵點擊 程式碼編輯區,會看到 「Run Code」(執行程式碼)選項。這相當於點擊 右上角「▶ Run」按鈕

45:54
VS Code 也提供了 快捷鍵 (Keyboard Shortcut)
Ctrl + Alt + N
這樣我們就不用每次都手動點擊執行按鈕!


使用者輸入 (Handling User Input)

46:14
Sublime Text 中,許多用戶詢問如何處理 input(),但 Sublime 無法直接在內建執行環境中使用 input(),我通常建議大家 改用終端機執行程式

46:33
VS Code 也是類似的方法,但它 內建終端機,所以操作更方便。

🔹 如何處理 input()

46:44
現在,我們來寫一個簡單的 輸入與輸出 程式:

name = input("Your name? ")
print("Hello, " + name)

47:04
⚠️ 注意! Code Runner 無法處理 input(),因為 輸出視窗是唯讀的,所以我們需要用 終端機執行

  1. 右鍵點擊程式碼
  2. 選擇「Run Python File in Terminal」
  3. 輸入姓名,程式會回應對應的問候語

Git 版本控制與 GitHub 整合 (Git & GitHub Integration)

🔹 在 VS Code 中初始化 Git 專案

47:47
現在,我們要 將此專案追蹤到 Git,並將其上傳到 GitHub

48:02
📌 步驟

  1. 點擊 Git (Source Control) 圖示
  2. 點擊 「Initialize Repository」(初始化儲存庫)
  3. 選擇目前的專案資料夾
  4. VS Code 會列出所有未追蹤的檔案

48:39
📌 問題:虛擬環境 (venv) 也被 Git 追蹤了!
這會導致 Git 追蹤數千個不必要的檔案,因此我們需要忽略它。


🔹 設定 .gitignore

48:58
在 VS Code 中,我們可以直接建立 .gitignore 檔案:

  1. 在專案資料夾內,點擊「新增檔案」
  2. 命名為 .gitignore
  3. 加入以下內容 來忽略不必要的檔案:
    venv/
    .vscode/
    
  4. 儲存檔案

這樣,Git 就不會再追蹤 venv/.vscode/ 目錄了。


🔹 Git 操作:Stage & Commit

50:22
現在,我們可以將變更 加入 Git 暫存區 (Stage Changes),然後提交 (Commit)。

📌 步驟

  1. 點擊「+」按鈕Stage gitignorescript.py
  2. 點擊「✔ Commit」按鈕
  3. 輸入 Commit 訊息(例如 Initial commit

51:08
⚠️ 錯誤!Git 要求設定使用者名稱與 Email!
如果這是第一次使用 Git,需要在終端機執行以下指令:

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

然後再次嘗試 Commit


Git Bash 設定 (Changing the Integrated Terminal to Git Bash)

52:26
如果我們希望使用 Git Bash(而非 Windows Cmd),可以修改 VS Code 設定:

  1. 開啟 settings.json
  2. 加入以下設定
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
    

這樣,VS Code 終端機會自動使用 Git Bash,讓 Git 操作更方便。


將專案上傳到 GitHub (Pushing to GitHub)

55:40
📌 步驟

  1. 打開 GitHub 並建立新儲存庫 (sample-repo)
  2. 複製 GitHub 提供的「Add Remote」指令
    git remote add origin https://github.com/yourusername/sample-repo.git
    
  3. 在 VS Code 終端機執行該指令
  4. 推送 (Push) 專案到 GitHub
    git push -u origin master
    
  5. 輸入 GitHub 帳號 & 密碼(第一次可能會要求登入)

📌 確認 GitHub 上是否出現專案

  • 回到 GitHub 頁面,重新整理後,應該能看到剛剛上傳的檔案 🎉

VS Code 偵錯 (Debugging in VS Code)

🔹 設定中斷點 (Breakpoints)

58:49
在 VS Code 中,可以透過「中斷點」(Breakpoints) 來偵錯 Python 程式

  1. 點擊行號左側的灰色區域,新增中斷點(紅點會出現)
  2. 開啟「偵錯 (Debug)」面板
  3. 點擊「⚙ 設定」,選擇「Python File」

59:16
📌 開始偵錯

  1. 點擊「▶ Start Debugging」(F5)
  2. 程式會在中斷點暫停
  3. 在「變數監視視窗」(Variables) 可查看變數值
  4. 可以逐步執行 (Step Over, Step Into, Step Out)

總結 (Summary)

我們已經學會如何: ✅ 使用快捷鍵執行 Python 程式 (Ctrl + Alt + N)
處理 input() 使用者輸入
使用 Git 追蹤專案 (git init, git commit)
設定 .gitignore 忽略 venv 目錄
在 VS Code 內直接推送 (git push) 到 GitHub
使用 VS Code 內建偵錯工具來設定中斷點 (Breakpoints) 並逐步執行 (Step Over, Step Into)

這是 完整的影片翻譯 (Part 4)!🎉
如果還有需要補充的部分,請讓我知道! 😊

這是該影片的 完整繁體中文翻譯 (Part 5),涵蓋 偵錯 (Debugging)單元測試 (Unit Testing)Zen Mode 以及 VS Code 的快捷鍵與額外設定


🔹 VS Code 偵錯功能 (Debugging in VS Code)

🛠 監視變數 (Watch Variables)

1:00:57
在偵錯時,我們可以 監視 (Watch) 變數的值,看看它是否符合預期:

  1. 點擊「+」按鈕 在「監視」(Watch) 區域新增變數
  2. 輸入 r.status_code
  3. 這裡顯示 r.status_code = 200,代表請求成功

1:01:21
如果這個變數是在 迴圈 (Loop) 內,我們可以看到它的值隨著每次迴圈運行而變化。


🛠 使用偵錯主控台 (Debug Console)

1:01:28
如果想更 互動式 地檢視變數,也可以使用 「偵錯主控台」(Debug Console)

  1. 開啟「偵錯主控台」(Debug Console)
  2. 輸入 r.ok
    • 結果:True(代表請求成功)
  3. 輸入 r.url
    • 結果顯示我們實際請求的網址

這樣,我們可以在偵錯時 即時檢視變數值,而不需要在程式中到處加 print()!🎉


🛠 偵錯按鈕 (Debug Controls)

1:02:42
當程式在中斷點 (Breakpoint) 停下來時,我們有幾個選擇:
繼續執行 (Continue, F5) – 讓程式繼續跑到下一個中斷點
逐步執行 (Step Over, F10) – 執行目前這行程式,但不進入函式內部
進入函式 (Step Into, F11) – 進入函式內部,逐行執行
跳出函式 (Step Out, Shift + F11) – 執行完函式並返回上一層

當所有程式碼執行完畢,偵錯會自動結束。


🧪 VS Code 單元測試 (Unit Testing in VS Code)

📌 開啟另一個專案

1:03:27
現在,我們要測試 VS Code 內建的「單元測試」(Unit Testing) 支援

  1. 關閉當前專案 (File > Close Folder)
  2. 開啟 新專案 (Unit Testing Demo)
  3. 在終端機執行:
    code UnitTestingDemo
    
    這會 用 VS Code 開啟該資料夾

📌 啟用單元測試

1:06:02

  1. 開啟命令面板 (Ctrl + Shift + P)

  2. 輸入「Discover Tests」(搜尋測試)

  3. 選擇「Enable and Configure Test Framework」(啟用並設定測試框架)

  4. 選擇測試框架

    • pytest(最常用)
    • unittest(Python 內建,這次示範使用它)
  5. 選擇測試檔案格式 (test_*.py)

  6. VS Code 會自動偵測測試並顯示「Run Test」按鈕


📌 執行單元測試

1:07:03
我們可以:
執行單一測試 – 直接點擊 「Run Test」
執行整個測試類別 – 點擊 「Run Test Class」
查看測試結果 – 如果測試通過,會顯示「✔」;如果失敗,會顯示「❌」

1:07:38
🔴 模擬測試失敗 我們故意寫一個錯誤的測試:

assert 10 + 5 == 10  # 這是不對的,應該是 15

執行後,VS Code 顯示「3 測試通過,1 測試失敗」,並指出錯誤發生的位置。


📌 VS Code「測試」面板

1:08:46
VS Code 有 專門的「測試」(Testing) 面板,可以:
查看所有測試的狀態(哪些通過,哪些失敗)
直接執行單一測試
只執行失敗的測試(不必重跑所有測試)

這讓測試流程變得更直觀且有效率!🎉


🖥 Zen Mode – 無干擾模式 (Distraction-Free Coding in VS Code)

📌 啟用 Zen Mode

1:11:04
Zen Mode 是 VS Code 的「無干擾模式」,讓我們可以 專注寫程式

  1. 開啟命令面板 (Ctrl + Shift + P)
  2. 輸入「Zen Mode」
  3. 啟用 Zen Mode

📌 Zen Mode 會隱藏

  • 活動欄 (Activity Bar)
  • 狀態列 (Status Bar)
  • 終端機 (Terminal) 等其他 UI

這樣 VS Code 看起來就像 Sublime Text 的極簡模式,專注於程式碼與輸出!


⌨ VS Code 快捷鍵 (Keyboard Shortcuts)

📌 查看快捷鍵

1:13:30
如果想學習 VS Code 的所有快捷鍵

  1. 開啟命令面板 (Ctrl + Shift + P)
  2. 搜尋「Keyboard Shortcuts」(鍵盤快捷鍵)
  3. 打開快捷鍵參考頁面

這裡列出了所有 VS Code 支援的快捷鍵,例如: ✅ Ctrl + P – 快速開啟檔案
Ctrl + Shift + F – 全域搜尋
Ctrl + D – 選取多個相同字串

如果你想提高 VS Code 的使用效率,這是很好的資源!🚀


✅ 總結 (Summary)

我們學到了: ✅ 如何使用 VS Code 進行偵錯 (Debugging)
如何監視變數 (Watch Variables) & 使用 Debug Console
如何執行 Python 單元測試 (Unit Testing)
如何使用「測試面板」來管理測試結果
如何開啟 Zen Mode 進行無干擾編程
如何查看 VS Code 的快捷鍵參考文件

這是 完整的 VS Code Python 影片繁體中文翻譯 🎉
如果還有任何問題,請讓我知道!😊

好的!這是完整的 VS Code Python 開發環境設定與功能指南,包含 講者的原文翻譯 以及 對應的 VS Code 操作步驟與設定,方便你邊聽影片邊對照操作!


VS Code Python 開發環境設定與功能指南

🔹 1. 安裝與初始設定

📌 安裝 VS Code

影片時間戳記: 0:00

Hey there, how's it going everybody? In this video, we're gonna be learning how to install Visual Studio Code and set up a Python development environment.

Also, we're going to go over the different features of this editor and see why it's so nice for Python development. So we'll cover how to easily switch between editors, how to debug applications, how Git integration works, look at unit testing capabilities, and a few other things.

👉 VS Code 安裝步驟:

  1. 前往 VS Code 官網code.visualstudio.com)。
  2. 下載適用於作業系統的版本(Windows / Mac / Linux)。
  3. 執行安裝程式,選擇安裝目錄並勾選「建立桌面捷徑」。
  4. 安裝完成後,開啟 VS Code

📌 初次開啟 VS Code

影片時間戳記: 2:55

So when we first run VS Code, it's going to open their getting started page in the browser and also it's going to show us their welcome screen.

👉 初次開啟 VS Code

  • 執行 Visual Studio Code 應用程式
  • 關閉歡迎頁面(Welcome Page)
  • 調整視窗大小以適應編輯需求
  • 可透過 Ctrl +(放大)與 Ctrl -(縮小)調整字體大小,或在 設定 (Settings) 中搜尋 Zoom Level 來手動設定縮放比例。

🔹 2. 使用 IntelliSense(智慧提示)

影片時間戳記: 29:52

Watch how the IntelliSense works. This is built into VS Code and it's going to show us the attributes and methods that we can use for different objects.

👉 測試 IntelliSense

import requests
r = requests.get("http://coreyms.com")
print(r.status_code)
  • 輸入 requests. 並按 .(點號),VS Code 會顯示可用的方法與屬性,如:
    • get()
    • post()
    • session()
  • 右鍵點擊方法名稱,可選擇:
    • 「前往定義 (Go to Definition)」:查看原始碼
    • 「快速查看定義 (Peek Definition)」:小彈窗檢視定義

🔹 3. 偵錯 (Debugging) 功能

影片時間戳記: 59:04

To put in a breakpoint, we can simply come over here into the gutter, where it has this red line. If I click that, we have now added a breakpoint into our script.

👉 設定中斷點 (Breakpoints)

  1. 點擊行號左側,新增中斷點(紅點會出現)。
  2. 開啟「偵錯 (Debug)」面板。
  3. 點擊「⚙ 設定」 > 選擇「Python File」。
    {
        "configurations": [
            {
                "name": "Python: Current File",
                "type": "python",
                "request": "launch",
                "program": "${file}"
            }
        ]
    }
    
  4. 開始偵錯 (F5)

👉 使用 Debug Console 觀察變數

# 執行 Python 指令
print(r.ok)
print(r.url)

🔹 4. Git 版本控制與 GitHub 整合

影片時間戳記: 48:02

Let's say that I wanted to track this project with Git and upload it to GitHub.

👉 初始化 Git 儲存庫

git init
git add .
git commit -m "Initial commit"

👉 設定 .gitignore

echo "venv/" >> .gitignore
echo ".vscode/" >> .gitignore
git add .gitignore
git commit -m "Add .gitignore"

👉 推送 (Push) 至 GitHub

git remote add origin https://github.com/yourusername/sample-repo.git
git push -u origin master

🔹 5. Zen Mode – 無干擾模式

影片時間戳記: 1:12:40

Zen Mode allows you to focus more on your code and your output.

👉 啟用 Zen Mode

Ctrl + Shift + P
輸入 "Zen Mode" 然後啟用

🔹 6. VS Code 快捷鍵 (Keyboard Shortcuts)

影片時間戳記: 1:13:36

If you'd like to see some of these keyboard shortcuts for yourself, they make it easy to learn.

👉 常用快捷鍵

{
   "keybindings": [
       { "key": "ctrl+alt+n", "command": "workbench.action.terminal.runSelectedText" },
       { "key": "f5", "command": "workbench.action.debug.start" }
   ]
}

🎯 總結

我們學會如何: ✅ 安裝 VS Code 並設定 Python 開發環境
使用 IntelliSense 提供的智慧提示
設定與使用偵錯 (Debugging) 工具
使用 Git 進行版本控制並推送至 GitHub
執行 Python 單元測試 (Unit Testing)
開啟 Zen Mode 進行無干擾編程
學習 VS Code 的快捷鍵與進階技巧


這是一份完整的 VS Code Python 開發指南包含講者的完整內容翻譯,以及 對應的 VS Code 操作步驟與設定,讓你可以 邊聽影片邊對照操作!🚀

如果有需要修改或補充的地方,請告訴我!😊

沒有留言:

張貼留言

精選文章

手機使用VPN進入NAS、DaikinAPP時,仍能使用其他APP如銀行,連上WIFI 或行動網路

為了避免手機使用VPN進入NAS、DaikinAPP時,仍能使用其他APP如銀行,連上WIFI 或行動網路,要修改Router Policy設定?需要把家中屬於VPN的網段設備與其他區隔?要如何設定? 為了達成您的需求: ✅ 手機連上 VPN(例如連回家中 TP-Link ER...