{"id":20619664,"url":"https://github.com/twtrubiks/vscode_python_note","last_synced_at":"2025-10-26T07:32:39.238Z","repository":{"id":60877655,"uuid":"183836469","full_name":"twtrubiks/vscode_python_note","owner":"twtrubiks","description":"教大家如何建立自己的 Visual Studio Code Python 開發環境 pylint 📝","archived":false,"fork":false,"pushed_at":"2024-08-12T12:12:16.000Z","size":17,"stargazers_count":113,"open_issues_count":0,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-04T03:38:17.325Z","etag":null,"topics":["python","tutorial","vscode"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-28T01:00:27.000Z","updated_at":"2025-01-27T16:05:36.000Z","dependencies_parsed_at":"2024-05-11T09:29:38.716Z","dependency_job_id":"7d52215d-fff1-4926-a55b-1a52c1d0207a","html_url":"https://github.com/twtrubiks/vscode_python_note","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fvscode_python_note","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fvscode_python_note/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fvscode_python_note/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fvscode_python_note/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/vscode_python_note/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238289991,"owners_count":19447509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python","tutorial","vscode"],"created_at":"2024-11-16T12:12:13.627Z","updated_at":"2025-10-26T07:32:39.232Z","avatar_url":"https://github.com/twtrubiks.png","language":"Python","readme":"# Python in Visual Studio Code\n\n這篇文章將會教大家如何建立自己的 Visual Studio Code Python 開發環境 📝\n\n* [Youtube - Visual Studio Code Python 基本設定篇](https://youtu.be/tS4beaq9ies)\n\n* [推薦的擴充套件](https://github.com/twtrubiks/vscode_python_note#%E6%8E%A8%E8%96%A6%E7%9A%84%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6)\n\n* [VScode Dev Containers 教學](https://github.com/twtrubiks/vscode_python_note#vscode-dev-containers-教學) - [Youtube Tutorial - VScode Dev Containers 教學 - Python](https://youtu.be/6jjYViLthi8)\n\n## 說明\n\n最近剛好接觸到使用 VSCode 開發 Python，所以就有了這篇文章 :smile:\n\n其實我之前都是使用 Pycharm Professional 來開發的 ( 雖然他要付費，但是功能真的強 :+1: )\n\n如果想當免費仔，可以使用 VSCode，但我覺得需要稍微設定一下 ( 這篇文章會教大家 )。\n\n請先準備以下的功課\n\n* 安裝 python 以及 Visual Studio Code\n\n## 步驟一 - 建立 virtual environments\n\n首先，別急著打開 VSCode，先來建立環境，如果你不知道如何建立環境，\n\n可參考這篇文章\n\n- [python venv 建立 virtual environments](https://github.com/twtrubiks/python-creation-of-virtual-environments)\n\n- [使用 Anaconda 建立 Python 環境](https://github.com/twtrubiks/FaceDetect/tree/master/How%20Easy%20Install%20OpenCV%20%20for%20Python%20use%20Anaconda#%E4%BD%BF%E7%94%A8-anaconda-%E5%BB%BA%E7%AB%8B-python-%E7%92%B0%E5%A2%83)\n\n- [pyenv 教學](https://github.com/twtrubiks/python-notes/tree/master/pyenv_tutorial)\n\n這邊就先建立一個 venv_demo 的環境，\n\n![alt tag](https://i.imgur.com/cmxKh9A.png)\n\n## 步驟二 - 設定 VSCode\n\n這邊為了方便後續的說明，先建立一個資料夾，資料夾名稱 demo，裡面新增一個 demo.py 的檔案，\n\n開啟的方式很多種，這邊直接右鍵開啟，\n\n![alt tag](https://i.imgur.com/WzkoCTN.png)\n\n打開後，快捷鍵 `Ctrl` + `Shift` + `P`，然後輸入 settings\n\n![alt tag](https://i.imgur.com/HT7YSDt.png)\n\n主要先看這兩個即可，分別是\n\nPreferences: Open User Settings : 你可以簡單把他想成是全域的。\n\nPreferences: Open Workspace Settings : 只在你的工作目錄內才會生效 ( 工作目錄內會多出一個資料夾 )。\n\n這邊我們先選擇 Preferences: Open User Settings，\n\n這邊是 ui 的呈現 ( 可直接在這邊修改 )，但我喜歡用 json 的方式，點選右邊\n\n![alt tag](https://i.imgur.com/ajFzQM2.png)\n\n這裡面有可能有你自己的設定，這邊是我自己的設定，大家可以參考一下，\n\n![alt tag](https://i.imgur.com/2xVqcFS.png)\n\n可參考 [settings.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/settings.json)\n\n( `python.defaultInterpreterPath` 這個其實不用另外設定，已註解掉 )\n\n( 其實 json 是不適合註解的，所以才會變成這樣，但不註解我怕大家不了解 )\n\n儲存後就會生效。\n\n也不用擔心亂輸入或輸入錯了會造成什麼問題，如果你打錯字或沒這個東西，VSCode 會提醒你。\n\n接著選擇 Preferences: Open Workspace Settings，\n\n你會發現目錄資料夾底下多了一個 `\\.vscode\\settings.json` ( 因為這是 Workspace Settings )\n\n![alt tag](https://i.imgur.com/pKDNYP9.png)\n\n這邊是我自己的設定，大家可以參考一下，\n\n![alt tag](https://i.imgur.com/Bm1Foe7.png)\n\n如果你的 python.venvPath 有設定對，你看你的左下角\n\n![alt tag](https://i.imgur.com/PBo2ab0.png)\n\n選他你會看到資料夾裡面全部的 venv，點了就可以啟動。\n\n![alt tag](https://i.imgur.com/qn1xVM2.png)\n\n( 如果看不到，請重新打開 VSCode，另外要 **注意 Workspace Settings 會覆蓋 User Settings** )\n\nlinting 有很多種，這邊選擇 pylint，更多資訊可參考 [Linting Python in Visual Studio Code](https://code.visualstudio.com/docs/python/linting)，\n\n儲存完畢後，快捷鍵 `Ctrl` + `Shift` + `` ` `` 開啟 terminal，\n\n你會發現環境自動啟動了 ( 看前面的小括號 venv_demo )。\n\n( 另外一點要注意的是，VSCode 是偵測你有沒有 .py 的檔案，所以記得要在 .py 的檔案下 `Ctrl` + `Shift` + `` ` `` 開啟 terminal，\n\n否則你會覺得很怪，一直無法自動啟動環境 )\n\n( 如果沒有啟動，可以關掉目前的 terminal 再開一個 terminal 試試看，如果還是不行，關掉 VSCode 重開，\n\n再不行，檢查是不是設定錯了  )\n\n![alt tag](https://i.imgur.com/av5XtVK.png)\n\n大家應該有發現右下角告訴我們沒安裝 pylint ，這時候請安裝 `pip install pylint`\n\n![alt tag](https://i.imgur.com/HCPyLlJ.png)\n\n也可以 快捷鍵 `Ctrl` + `Shift` + `P`，然後輸入 linting 檢查一下\n\n![alt tag](https://i.imgur.com/5V1BoUj.png)\n\n會是 on 的狀態，因為設定了 `\"python.linting.enabled\": true`\n\n![alt tag](https://i.imgur.com/sX4vqc9.png)\n\n如果成功設定,\n\n在 problems 底下會有很多提醒 ( code 會有一些毛毛蟲 )\n\n![alt tag](https://i.imgur.com/ETFCjBX.png)\n\n( 如果一直沒正確啟用 pylint, 可以重新開啟 vscode 或檢查安裝環境 )\n\n也可以新增 `.pylintrc` 設定一些過濾\n\n```text\n[MASTER]\n# Exclude specific files or directories (comma-separated)\n# ignore=.vscode/*,/test/src/tests/*\n# ignore-patterns=**/test/src/tests/*.py\n\n[pylint.messages_control]\ndisable = C0115,C0116,C0115,W0718\n```\n\n## 快捷鍵\n\n環境以 linux 為主,\n\n快速到對應找到對應的 function 或 class : `Ctrl` + 左鍵 或是 `F12`\n\n返回上一個位置 : `Ctrl` + `Alt` + `-`\n\n## 推薦的擴充套件\n\n如何自動安裝, 已經幫大家放在 [extensions.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/extensions.json),\n\n```json\n{\n    \"recommendations\": [\n        \"streetsidesoftware.code-spell-checker\",\n        \"donjayamanne.githistory\",\n        \"ms-python.vscode-pylance\",\n        \"ms-python.debugpy\",\n        \"ms-python.python\",\n        \"mechatroner.rainbow-csv\",\n        \"charliermarsh.ruff\",\n        \"gruntfuggly.todo-tree\",\n        \"redhat.vscode-yaml\",\n        \"zhuangtongfa.material-theme\",\n        \"editorconfig.editorconfig\",\n        \"ms-vscode-remote.remote-containers\"\n    ]\n}\n```\n\n打開 vscode 之後, 找到安裝 extensions 的地方, 輸入 `@recommended`,\n\n就可以看到自己定義的 extensions,\n\n![alt tag](https://i.imgur.com/y9s8M5v.png)\n\n如果你想要建立自己的 extensions 清單,\n\n可以直接在 extension 上點選右鍵\n\n![alt tag](https://i.imgur.com/bVIWLG5.png)\n\n就會自動幫你加入 [extensions.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/extensions.json) 底下了.\n\n官網說明可參考 [Workspace recommended extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions)\n\n### Todo Tree\n\n顯示 TODO, FIXME, etc. comment tags in a tree view\n\n[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)\n\n### YAML\n\nYAML 格式工具\n\n[YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)\n\n### Rainbow CSV\n\nCSV 格式工具\n\n[Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)\n\n### One Dark Pro\n\nAtom's iconic One Dark theme\n\n[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)\n\n### Git History\n\n查看 git 的工具\n\n[Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)\n\n### Git Graph\n\n查看 git log graph 工具\n\n[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)\n\n### GitLens — Git supercharged\n\n查看 git 的工具 - 在 code 上直接看到這行最後的修改是誰改的\n\n[GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)\n\n### Code Spell Checker\n\n檢查錯字.\n\n[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n\n### EditorConfig for VS Code\n\n設定檔案範例 [.editorconfig](.editorconfig), 參考 [python-template](https://github.com/NLeSC/python-template/blob/main/.editorconfig)\n\n`root = true` editorconfig 很特殊的參數.\n\n`end_of_line = lf` 設定斷行字元.\n\n`insert_final_newline = true` 是否要保留最後空一行.\n\n`trim_trailing_whitespace = true` 是否要清除空白.\n\n`charset = utf-8` 編碼設定.\n\n`indent_style = space` 設定縮排要用 tab 還是 空白.\n\n`indent_size = 4` 設定空格數.\n\n[EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n\n### Ruff\n\n更強大更快的 Python linter (使用 Rust 寫的)\n\n[Ruff](https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff)\n\n```cmd\npip install ruff\n```\n\n設定 Ruff 為預設的 formatter,\n\n```json\n{\n  \"[python]\": {\n    \"editor.formatOnSave\": true,\n    \"editor.defaultFormatter\": \"charliermarsh.ruff\"\n  }\n}\n```\n\n設定自動 import 排版以及 fixAll\n\n```json\n{\n  \"[python]\": {\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.ruff\": \"explicit\",\n      \"source.organizeImports.ruff\": \"explicit\"\n    }\n  }\n}\n\n```\n\n### Python Debugger\n\n[Python Debugger](https://marketplace.visualstudio.com/items?itemName=ms-python.debugpy)\n\n建議搭配 [Python debugging in VS Code](https://code.visualstudio.com/docs/python/debugging) 一起觀看\n\n必要時需要安裝 `pip install debugpy`\n\n`request` 主要有 `launch` 和 `attach`,\n\n`launch`\n\n這個就是最一般從 vscode 中 debug 重頭開始這樣.\n\n`attach`\n\n差別在於, 是調用已經啟動的進程, 意思就是必須再開一個視窗去執行這個 debug,\n\n通常會用在已經運行的程式, 或是外部工具啟用的程序(像是 docker)\n\n這兩個的差別使用 [vscode-django-note](https://github.com/twtrubiks/vscode_django_note) 來參考.\n\n```json\n{\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Django launch\",\n            \"type\": \"debugpy\",\n            \"request\": \"launch\",\n            \"program\": \"${workspaceFolder}\\\\manage.py\",\n            \"args\": [\n                \"runserver\",\n                \"--noreload\",\n            ],\n            \"django\": true\n        },\n        {\n            \"name\": \"Django attach\",\n            \"type\": \"debugpy\",\n            \"request\": \"attach\",\n            \"connect\": {\n                \"host\": \"localhost\",\n                \"port\": 18000\n            },\n            \"django\": true\n        }\n    ]\n}\n```\n\n`launch` Django launch\n\n這很簡單, 中斷點開下去就可以了.\n\n`attach` Django attach\n\n首先, 先打開一個 terminal 執行 django, 並且要監聽一個 port, 這邊設定 18000\n\n```cmd\npython -m debugpy --listen 0.0.0.0:18000 manage.py runserver 0.0.0.0:8000\n```\n\n接著再開啟一個 terminal 去執行中斷點 Django attach (也是設定 18000 port),\n\n透過這個就可以成功的進入中斷點.\n\n### VScode Dev Containers 教學\n\n* [Youtube Tutorial - VScode Dev Containers 教學 - Python](https://youtu.be/6jjYViLthi8)\n\n如果你是 VScode 用戶而且也懂 docker, 非常推薦這個 [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) 套件.\n\n可以完全的在容器內開發, 不會再遇到煩人的環境不一致的問題,\n\n要在裡面 debug 也都是沒問題的.\n\n官方教學 [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial)\n\n首先, 先安裝 docker, 如果沒安裝可參考 [Docker 基本教學 - 從無到有 Docker-Beginners-Guide](https://github.com/twtrubiks/docker-tutorial)\n\n接著安裝 Dev Containers 這個套件,\n\nvscode 輸入 `Ctrl` + `Shift` + `P`\n\n`\u003eDev Containers: Add Dev Container Configuration Files`\n\n![img](https://i.imgur.com/xgqAYhg.png)\n\n接著選 `\u003eAdd configuration to workspace`\n\n(如果你想要建立在系統共用, 可選另一個)\n\n![img](https://i.imgur.com/nc7XbXe.png)\n\n接著這邊有很多 image, 選一個你喜歡的, 這邊我們選 python3\n\n![img](https://i.imgur.com/BXWB3If.png)\n\n接著會問你需不需要安裝其他的, 如果都不需要, 直接選 ok 就好\n\n![img](https://i.imgur.com/f4Hzmvf.png)\n\n之後你會看到幫你建立了一個資料夾 [.devcontainer/devcontainer.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.devcontainer/devcontainer.json), 並且做相關設定\n\n如果遇到權限問題, 可以考慮加入 `\"remoteUser\": \"root\"` 這段,\n\nimage 這邊可以放自己喜歡的 image, 這邊我們就先用這個範例,\n\ncustomizations 這邊其實就是設定容器裡面的 vscode 要怎麼設定,\n\n包含 vscode 個人化, 以及安裝哪些 vscode 套件之類的.\n\nmounts 這部份是像 docker 中的 Volumes (可以掛路徑進去)\n\n詳細的設定可參考 [Dev Container - json_reference](https://containers.dev/implementors/json_reference/)\n\n啟動容器,\n\nvscode 輸入 `Ctrl` + `Shift` + `P`\n\n`\u003eDev Containers: Rebuild and Reopen in Container`\n\n![img](https://i.imgur.com/5hcWy8h.png)\n\n接著就要等一下了, 因為它就是在做 `docker pull` 的事情, 所以如果是第一次都會比較慢.\n\n基本上它會再開啟一個 vscode, 這個 vscode 是已經在容器裡面了.\n\n分別下 `docker ps` 以及 `docker images` 查看,\n\n![img](https://i.imgur.com/Hc1w2FC.png)\n\n正在執行的容器就是我們建立了, images 則是剛剛設定的,\n\n你可以在這容器內做任何事情, 基本上它就是一個環境,\n\n也可以 debug\n\n![img](https://i.imgur.com/p4sveTd.png)\n\n預先定義的套件也都會裝起來\n\n![img](https://i.imgur.com/eMXMR7e.png)\n\n退出的方式, 點選左下角, 選擇 Close Remote Connection,\n\n或是用一般的 `docker compose down` 也可以\n\n![img](https://i.imgur.com/JtQJDJ3.png)\n\n## 結論\n\n基本上 VSCode 可以設定的東西真的非常的多，大家可以自行摸索 :relaxed:\n\n這篇是教大家一些很基本的設定，未來如果有機會，再介紹更多的功能給各位認識。\n\n## Donation\n\n文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡 :laughing:\n\n![alt tag](https://i.imgur.com/LRct9xa.png)\n\n[贊助者付款](https://payment.opay.tw/Broadcaster/Donate/9E47FDEF85ABE383A0F5FC6A218606F8)\n\n## License\n\nMIT license\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fvscode_python_note","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fvscode_python_note","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fvscode_python_note/lists"}