這篇文章將會教大家如何建立自己的 Visual Studio Code Python 開發環境 📝
最近剛好接觸到使用 VSCode 開發 Python，所以就有了這篇文章:smile:
其實我之前都是使用 Pycharm Professional 來開發的 ( 雖然他要付費，但是功能真的強:+1:)
如果想當免費仔，可以使用 VSCode，但我覺得需要稍微設定一下 ( 這篇文章會教大家 )。
請先準備以下的功課
- 安裝 python 以及 Visual Studio Code
首先，別急著打開 VSCode，先來建立環境，如果你不知道如何建立環境，
可參考這篇文章
這邊就先建立一個 venv_demo 的環境，
這邊為了方便後續的說明，先建立一個資料夾，資料夾名稱 demo，裡面新增一個 demo.py 的檔案，
開啟的方式很多種，這邊直接右鍵開啟，
打開後，快捷鍵 Ctrl+Shift+P，然後輸入 settings
主要先看這兩個即可，分別是
Preferences: Open User Settings : 你可以簡單把他想成是全域的。
Preferences: Open Workspace Settings : 只在你的工作目錄內才會生效 ( 工作目錄內會多出一個資料夾 )。
這邊我們先選擇 Preferences: Open User Settings，
這邊是 ui 的呈現 ( 可直接在這邊修改 )，但我喜歡用 json 的方式，點選右邊
這裡面有可能有你自己的設定，這邊是我自己的設定，大家可以參考一下，
可參考 settings.json
( python.defaultInterpreterPath 這個其實不用另外設定，已註解掉 )
( 其實 json 是不適合註解的，所以才會變成這樣，但不註解我怕大家不了解 )
儲存後就會生效。
也不用擔心亂輸入或輸入錯了會造成什麼問題，如果你打錯字或沒這個東西，VSCode 會提醒你。
接著選擇 Preferences: Open Workspace Settings，
你會發現目錄資料夾底下多了一個 \.vscode\settings.json ( 因為這是 Workspace Settings )
這邊是我自己的設定，大家可以參考一下，
如果你的 python.venvPath 有設定對，你看你的左下角
選他你會看到資料夾裡面全部的 venv，點了就可以啟動。
( 如果看不到，請重新打開 VSCode，另外要 注意 Workspace Settings 會覆蓋 User Settings )
linting 有很多種，這邊選擇 pylint，更多資訊可參考 Linting Python in Visual Studio Code，
儲存完畢後，快捷鍵 Ctrl+Shift+` 開啟 terminal，
你會發現環境自動啟動了 ( 看前面的小括號 venv_demo )。
( 另外一點要注意的是，VSCode 是偵測你有沒有 .py 的檔案，所以記得要在 .py 的檔案下 Ctrl+Shift+` 開啟 terminal，
否則你會覺得很怪，一直無法自動啟動環境 )
( 如果沒有啟動，可以關掉目前的 terminal 再開一個 terminal 試試看，如果還是不行，關掉 VSCode 重開，
再不行，檢查是不是設定錯了 )
大家應該有發現右下角告訴我們沒安裝 pylint ，這時候請安裝 pip install pylint
也可以 快捷鍵 Ctrl+Shift+P，然後輸入 linting 檢查一下
會是 on 的狀態，因為設定了 "python.linting.enabled": true
如果成功設定,
在 problems 底下會有很多提醒 ( code 會有一些毛毛蟲 )
( 如果一直沒正確啟用 pylint, 可以重新開啟 vscode 或檢查安裝環境 )
也可以新增 .pylintrc 設定一些過濾
[MASTER]
# Exclude specific files or directories (comma-separated)
# ignore=.vscode/*,/test/src/tests/*
# ignore-patterns=**/test/src/tests/*.py
[pylint.messages_control]
disable = C0115,C0116,C0115,W0718
環境以 linux 為主,
快速到對應找到對應的 function 或 class : Ctrl + 左鍵 或是 F12
返回上一個位置 : Ctrl + Alt + -
如何自動安裝, 已經幫大家放在 extensions.json,
{
"recommendations": [
"streetsidesoftware.code-spell-checker",
"donjayamanne.githistory",
"ms-python.vscode-pylance",
"ms-python.debugpy",
"ms-python.python",
"mechatroner.rainbow-csv",
"charliermarsh.ruff",
"gruntfuggly.todo-tree",
"redhat.vscode-yaml",
"zhuangtongfa.material-theme",
"editorconfig.editorconfig",
"ms-vscode-remote.remote-containers"
]
}打開 vscode 之後, 找到安裝 extensions 的地方, 輸入 @recommended,
就可以看到自己定義的 extensions,
如果你想要建立自己的 extensions 清單,
可以直接在 extension 上點選右鍵
就會自動幫你加入 extensions.json 底下了.
官網說明可參考 Workspace recommended extensions
顯示 TODO, FIXME, etc. comment tags in a tree view
YAML 格式工具
CSV 格式工具
Atom's iconic One Dark theme
查看 git 的工具
查看 git log graph 工具
查看 git 的工具 - 在 code 上直接看到這行最後的修改是誰改的
檢查錯字.
設定檔案範例 .editorconfig, 參考 python-template
root = true editorconfig 很特殊的參數.
end_of_line = lf 設定斷行字元.
insert_final_newline = true 是否要保留最後空一行.
trim_trailing_whitespace = true 是否要清除空白.
charset = utf-8 編碼設定.
indent_style = space 設定縮排要用 tab 還是 空白.
indent_size = 4 設定空格數.
更強大更快的 Python linter (使用 Rust 寫的)
pip install ruff設定 Ruff 為預設的 formatter,
{
"[python]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "charliermarsh.ruff"
}
}設定自動 import 排版以及 fixAll
{
"[python]": {
"editor.codeActionsOnSave": {
"source.fixAll.ruff": "explicit",
"source.organizeImports.ruff": "explicit"
}
}
}
建議搭配 Python debugging in VS Code 一起觀看
必要時需要安裝 pip install debugpy
request 主要有 launch 和 attach,
launch
這個就是最一般從 vscode 中 debug 重頭開始這樣.
attach
差別在於, 是調用已經啟動的進程, 意思就是必須再開一個視窗去執行這個 debug,
通常會用在已經運行的程式, 或是外部工具啟用的程序(像是 docker)
這兩個的差別使用 vscode-django-note 來參考.
{
"version": "0.2.0",
"configurations": [
{
"name": "Django launch",
"type": "debugpy",
"request": "launch",
"program": "${workspaceFolder}\\manage.py",
"args": [
"runserver",
"--noreload",
],
"django": true
},
{
"name": "Django attach",
"type": "debugpy",
"request": "attach",
"connect": {
"host": "localhost",
"port": 18000
},
"django": true
}
]
}launch Django launch
這很簡單, 中斷點開下去就可以了.
attach Django attach
首先, 先打開一個 terminal 執行 django, 並且要監聽一個 port, 這邊設定 18000
python -m debugpy --listen 0.0.0.0:18000 manage.py runserver 0.0.0.0:8000接著再開啟一個 terminal 去執行中斷點 Django attach (也是設定 18000 port),
透過這個就可以成功的進入中斷點.
如果你是 Vscode 用戶而且也懂 docker, 非常推薦這個 Dev Containers 套件.
可以完全的在容器內開發, 不會再遇到煩人的環境不一致的問題,
要在裡面 debug 也都是沒問題的.
首先, 先安裝 docker, 如果沒安裝可參考 Docker 基本教學 - 從無到有 Docker-Beginners-Guide
接著安裝 Dev Containers 這個套件,
vscode 輸入 ctrl + shift + p
>Dev Containers: Add Dev Container Configuration Files
接著選 >Add configuration to workspace
(如果你想要建立在系統共用, 可選另一個)
接著這邊有很多 image, 選一個你喜歡的, 這邊我們選 python3
接著會問你需不需要安裝其他的, 如果都不需要, 直接選 ok 就好
之後你會看到幫你建立了一個資料夾 .devcontainer/devcontainer.json, 並且做相關設定
如果遇到權限問題, 可以考慮加入 "remoteUser": "root" 這段,
image 這邊可以放自己喜歡的 image, 這邊我們就先用這個範例,
customizations 這邊其實就是設定容器裡面的 vscode 要怎麼設定,
包含 vscode 個人化, 以及安裝哪些 vscode 套件之類的.
mounts 這部份是像 docker 中的 Volumes (可以掛路徑進去)
詳細的設定可參考 Dev Container - json_reference
啟動容器,
vscode 輸入 ctrl + shift + p
>Dev Containers: Rebuild and Reopen in Container
接著就要等一下了, 因為它就是在做 docker pull 的事情, 所以如果是第一次都會比較慢.
基本上它會再開啟一個 vscode, 這個 vscode 是已經在容器裡面了.
分別下 docker ps 以及 docker images 查看,
正在執行的容器就是我們建立了, images 則是剛剛設定的,
你可以在這容器內做任何事情, 基本上它就是一個環境,
也可以 debug
預先定義的套件也都會裝起來
退出的方式, 點選左下角, 選擇 Close Remote Connection,
或是用一般的 docker compose down 也可以
基本上 VSCode 可以設定的東西真的非常的多，大家可以自行摸索。:relaxed:
這篇是教大家一些很基本的設定，未來如果有機會，再介紹更多的功能給各位認識。
文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡:laughing:
MIT license