├── .devcontainer └── devcontainer.json ├── .editorconfig ├── .pylintrc ├── .vscode ├── extensions.json └── settings.json ├── README.md └── src ├── classes.py └── main.py /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/python 3 | { 4 | "name": "Python 3", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye", 7 | 8 | // "mounts": ["source=xxxx,target=xxxx,type=bind"] 9 | 10 | // Features to add to the dev container. More info: https://containers.dev/features. 11 | // "features": {}, 12 | 13 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 14 | // "forwardPorts": [], 15 | 16 | // Use 'postCreateCommand' to run commands after the container is created. 17 | // "postCreateCommand": "pip3 install --user -r requirements.txt", 18 | 19 | // Configure tool-specific properties. 20 | "customizations": { 21 | // Configure properties specific to VS Code. 22 | "vscode": { 23 | // Set *default* container specific settings.json values on container create. 24 | "settings": { 25 | // "python.defaultInterpreterPath": "/venv/bin/python3", 26 | // "window.zoomLevel": 1, // 視窗縮放 27 | "editor.fontSize": 22, 28 | "editor.lineHeight": 26, 29 | // "terminal.integrated.fontFamily": "MesloLGS NF", 30 | // "editor.fontFamily": "MesloLGS NF", 31 | "extensions.ignoreRecommendations": true, // 是否忽略顯示建議的套件 32 | "files.trimTrailingWhitespace": true, // 儲存的時候，會幫你自動過濾多餘的空格 33 | "files.encoding": "utf8", // 設定預設編碼 34 | "files.autoGuessEncoding": false, 35 | "files.autoSave": "onFocusChange", // 是否自動儲存檔案 36 | // "files.autoSave": "afterDelay", 37 | // "files.autoSaveDelay": 500, 38 | // "workbench.colorTheme": "One Dark Pro", // 需安裝 One Dark Pro 39 | "editor.selectionClipboard": false, // 關閉滑鼠滾輪中鍵複製功能 40 | "editor.stickyScroll.enabled": true, // Sticky Scroll 預設是打開的 41 | "[python]": { 42 | "editor.formatOnSave": true, 43 | "editor.codeActionsOnSave": { 44 | // "source.fixAll": "explicit", 45 | "source.organizeImports": "explicit" 46 | } 47 | }, 48 | "editor.defaultFormatter": "charliermarsh.ruff" // 需要安裝 Ruff 49 | // "ruff.organizeImports": true 50 | }, 51 | "extensions": [ 52 | "streetsidesoftware.code-spell-checker", 53 | "donjayamanne.githistory", 54 | "ms-python.vscode-pylance", 55 | "ms-python.debugpy", 56 | "ms-python.python", 57 | "mechatroner.rainbow-csv", 58 | "charliermarsh.ruff", 59 | "gruntfuggly.todo-tree", 60 | "redhat.vscode-yaml", 61 | "zhuangtongfa.material-theme", 62 | "editorconfig.editorconfig" 63 | ] 64 | } 65 | } 66 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 67 | // "remoteUser": "root" 68 | } 69 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | charset = utf-8 12 | 13 | # 4 space indentation 14 | [*.{py,java,r,R}] 15 | indent_style = space 16 | indent_size = 4 17 | 18 | # 2 space indentation 19 | [*.{js,json,y{a,}ml,html,cwl}] 20 | indent_style = space 21 | indent_size = 2 22 | 23 | [*.{md,Rmd,rst}] 24 | trim_trailing_whitespace = false 25 | indent_style = space 26 | indent_size = 2 -------------------------------------------------------------------------------- /.pylintrc: -------------------------------------------------------------------------------- 1 | [MASTER] 2 | # Exclude specific files or directories (comma-separated) 3 | # 這邊設定很奇怪 暫時未解決 4 | # ignore=.vscode/*,/test/src/tests/* 5 | # ignore-patterns=**/test/src/tests/*.py 6 | 7 | [pylint.messages_control] 8 | disable = C0115,C0116,C0115,W0718 -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "streetsidesoftware.code-spell-checker", 4 | "donjayamanne.githistory", 5 | "mhutchie.git-graph", 6 | "eamodio.gitlens", 7 | "ms-python.vscode-pylance", 8 | "ms-python.debugpy", 9 | "ms-python.python", 10 | "mechatroner.rainbow-csv", 11 | "charliermarsh.ruff", 12 | "gruntfuggly.todo-tree", 13 | "redhat.vscode-yaml", 14 | "zhuangtongfa.material-theme", 15 | "editorconfig.editorconfig", 16 | "ms-vscode-remote.remote-containers" 17 | ] 18 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // "python.defaultInterpreterPath": "/venv/bin/python3", 3 | // "window.zoomLevel": 1, // 視窗縮放 4 | "editor.fontSize": 22, 5 | "editor.lineHeight": 26, 6 | "terminal.integrated.fontFamily": "MesloLGS NF", 7 | "editor.fontFamily": "MesloLGS NF", 8 | "extensions.ignoreRecommendations": true, // 是否忽略顯示建議的套件 9 | "files.trimTrailingWhitespace": true, // 儲存的時候，會幫你自動過濾多餘的空格 10 | "files.encoding": "utf8", // 設定預設編碼 11 | "files.autoGuessEncoding": false, 12 | 13 | "files.autoSave": "onFocusChange", // 是否自動儲存檔案 14 | // "files.autoSave": "afterDelay", 15 | // "files.autoSaveDelay": 500, 16 | 17 | // "workbench.colorTheme": "One Dark Pro", // 需安裝 One Dark Pro 18 | "editor.selectionClipboard": false, // 關閉滑鼠滾輪中鍵複製功能 19 | "editor.stickyScroll.enabled": true, // Sticky Scroll 預設是打開的 20 | 21 | "[python]": { 22 | "editor.formatOnSave": true, 23 | "editor.codeActionsOnSave": { 24 | // "source.fixAll": "explicit", 25 | "source.organizeImports": "explicit", 26 | } 27 | }, 28 | "editor.defaultFormatter": "charliermarsh.ruff", // 需要安裝 Ruff 29 | // "ruff.organizeImports": true 30 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Python in Visual Studio Code 2 | 3 | 這篇文章將會教大家如何建立自己的 Visual Studio Code Python 開發環境 📝 4 | 5 | * [Youtube - Visual Studio Code Python 基本設定篇](https://youtu.be/tS4beaq9ies) 6 | 7 | * [推薦的擴充套件](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) 8 | 9 | * [VScode Dev Containers 教學](https://github.com/twtrubiks/vscode_python_note#vscode-dev-containers-教學) 10 | 11 | ## 說明 12 | 13 | 最近剛好接觸到使用 VSCode 開發 Python，所以就有了這篇文章 :smile: 14 | 15 | 其實我之前都是使用 Pycharm Professional 來開發的 ( 雖然他要付費，但是功能真的強 :+1: ) 16 | 17 | 如果想當免費仔，可以使用 VSCode，但我覺得需要稍微設定一下 ( 這篇文章會教大家 )。 18 | 19 | 請先準備以下的功課 20 | 21 | * 安裝 python 以及 Visual Studio Code 22 | 23 | ## 步驟一 - 建立 virtual environments 24 | 25 | 首先，別急著打開 VSCode，先來建立環境，如果你不知道如何建立環境， 26 | 27 | 可參考這篇文章 28 | 29 | - [python venv 建立 virtual environments](https://github.com/twtrubiks/python-creation-of-virtual-environments) 30 | 31 | - [使用 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) 32 | 33 | - [pyenv 教學](https://github.com/twtrubiks/python-notes/tree/master/pyenv_tutorial) 34 | 35 | 這邊就先建立一個 venv_demo 的環境， 36 | 37 | ![alt tag](https://i.imgur.com/cmxKh9A.png) 38 | 39 | ## 步驟二 - 設定 VSCode 40 | 41 | 這邊為了方便後續的說明，先建立一個資料夾，資料夾名稱 demo，裡面新增一個 demo.py 的檔案， 42 | 43 | 開啟的方式很多種，這邊直接右鍵開啟， 44 | 45 | ![alt tag](https://i.imgur.com/WzkoCTN.png) 46 | 47 | 打開後，快捷鍵 `Ctrl` + `Shift` + `P`，然後輸入 settings 48 | 49 | ![alt tag](https://i.imgur.com/HT7YSDt.png) 50 | 51 | 主要先看這兩個即可，分別是 52 | 53 | Preferences: Open User Settings : 你可以簡單把他想成是全域的。 54 | 55 | Preferences: Open Workspace Settings : 只在你的工作目錄內才會生效 ( 工作目錄內會多出一個資料夾 )。 56 | 57 | 這邊我們先選擇 Preferences: Open User Settings， 58 | 59 | 這邊是 ui 的呈現 ( 可直接在這邊修改 )，但我喜歡用 json 的方式，點選右邊 60 | 61 | ![alt tag](https://i.imgur.com/ajFzQM2.png) 62 | 63 | 這裡面有可能有你自己的設定，這邊是我自己的設定，大家可以參考一下， 64 | 65 | ![alt tag](https://i.imgur.com/2xVqcFS.png) 66 | 67 | 可參考 [settings.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/settings.json) 68 | 69 | ( `python.defaultInterpreterPath` 這個其實不用另外設定，已註解掉 ) 70 | 71 | ( 其實 json 是不適合註解的，所以才會變成這樣，但不註解我怕大家不了解 ) 72 | 73 | 儲存後就會生效。 74 | 75 | 也不用擔心亂輸入或輸入錯了會造成什麼問題，如果你打錯字或沒這個東西，VSCode 會提醒你。 76 | 77 | 接著選擇 Preferences: Open Workspace Settings， 78 | 79 | 你會發現目錄資料夾底下多了一個 `\.vscode\settings.json` ( 因為這是 Workspace Settings ) 80 | 81 | ![alt tag](https://i.imgur.com/pKDNYP9.png) 82 | 83 | 這邊是我自己的設定，大家可以參考一下， 84 | 85 | ![alt tag](https://i.imgur.com/Bm1Foe7.png) 86 | 87 | 如果你的 python.venvPath 有設定對，你看你的左下角 88 | 89 | ![alt tag](https://i.imgur.com/PBo2ab0.png) 90 | 91 | 選他你會看到資料夾裡面全部的 venv，點了就可以啟動。 92 | 93 | ![alt tag](https://i.imgur.com/qn1xVM2.png) 94 | 95 | ( 如果看不到，請重新打開 VSCode，另外要 **注意 Workspace Settings 會覆蓋 User Settings** ) 96 | 97 | linting 有很多種，這邊選擇 pylint，更多資訊可參考 [Linting Python in Visual Studio Code](https://code.visualstudio.com/docs/python/linting)， 98 | 99 | 儲存完畢後，快捷鍵 `Ctrl` + `Shift` + `` ` `` 開啟 terminal， 100 | 101 | 你會發現環境自動啟動了 ( 看前面的小括號 venv_demo )。 102 | 103 | ( 另外一點要注意的是，VSCode 是偵測你有沒有 .py 的檔案，所以記得要在 .py 的檔案下 `Ctrl` + `Shift` + `` ` `` 開啟 terminal， 104 | 105 | 否則你會覺得很怪，一直無法自動啟動環境 ) 106 | 107 | ( 如果沒有啟動，可以關掉目前的 terminal 再開一個 terminal 試試看，如果還是不行，關掉 VSCode 重開， 108 | 109 | 再不行，檢查是不是設定錯了 ) 110 | 111 | ![alt tag](https://i.imgur.com/av5XtVK.png) 112 | 113 | 大家應該有發現右下角告訴我們沒安裝 pylint ，這時候請安裝 `pip install pylint` 114 | 115 | ![alt tag](https://i.imgur.com/HCPyLlJ.png) 116 | 117 | 也可以 快捷鍵 `Ctrl` + `Shift` + `P`，然後輸入 linting 檢查一下 118 | 119 | ![alt tag](https://i.imgur.com/5V1BoUj.png) 120 | 121 | 會是 on 的狀態，因為設定了 `"python.linting.enabled": true` 122 | 123 | ![alt tag](https://i.imgur.com/sX4vqc9.png) 124 | 125 | 如果成功設定, 126 | 127 | 在 problems 底下會有很多提醒 ( code 會有一些毛毛蟲 ) 128 | 129 | ![alt tag](https://i.imgur.com/ETFCjBX.png) 130 | 131 | ( 如果一直沒正確啟用 pylint, 可以重新開啟 vscode 或檢查安裝環境 ) 132 | 133 | 也可以新增 `.pylintrc` 設定一些過濾 134 | 135 | ```text 136 | [MASTER] 137 | # Exclude specific files or directories (comma-separated) 138 | # ignore=.vscode/*,/test/src/tests/* 139 | # ignore-patterns=**/test/src/tests/*.py 140 | 141 | [pylint.messages_control] 142 | disable = C0115,C0116,C0115,W0718 143 | ``` 144 | 145 | ## 快捷鍵 146 | 147 | 環境以 linux 為主, 148 | 149 | 快速到對應找到對應的 function 或 class : `Ctrl` + 左鍵 或是 `F12` 150 | 151 | 返回上一個位置 : `Ctrl` + `Alt` + `-` 152 | 153 | ## 推薦的擴充套件 154 | 155 | 如何自動安裝, 已經幫大家放在 [extensions.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/extensions.json), 156 | 157 | ```json 158 | { 159 | "recommendations": [ 160 | "streetsidesoftware.code-spell-checker", 161 | "donjayamanne.githistory", 162 | "ms-python.vscode-pylance", 163 | "ms-python.debugpy", 164 | "ms-python.python", 165 | "mechatroner.rainbow-csv", 166 | "charliermarsh.ruff", 167 | "gruntfuggly.todo-tree", 168 | "redhat.vscode-yaml", 169 | "zhuangtongfa.material-theme", 170 | "editorconfig.editorconfig", 171 | "ms-vscode-remote.remote-containers" 172 | ] 173 | } 174 | ``` 175 | 176 | 打開 vscode 之後, 找到安裝 extensions 的地方, 輸入 `@recommended`, 177 | 178 | 就可以看到自己定義的 extensions, 179 | 180 | ![alt tag](https://i.imgur.com/y9s8M5v.png) 181 | 182 | 如果你想要建立自己的 extensions 清單, 183 | 184 | 可以直接在 extension 上點選右鍵 185 | 186 | ![alt tag](https://i.imgur.com/bVIWLG5.png) 187 | 188 | 就會自動幫你加入 [extensions.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.vscode/extensions.json) 底下了. 189 | 190 | 官網說明可參考 [Workspace recommended extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions) 191 | 192 | ### Todo Tree 193 | 194 | 顯示 TODO, FIXME, etc. comment tags in a tree view 195 | 196 | [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) 197 | 198 | ### YAML 199 | 200 | YAML 格式工具 201 | 202 | [YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) 203 | 204 | ### Rainbow CSV 205 | 206 | CSV 格式工具 207 | 208 | [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv) 209 | 210 | ### One Dark Pro 211 | 212 | Atom's iconic One Dark theme 213 | 214 | [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 215 | 216 | ### Git History 217 | 218 | 查看 git 的工具 219 | 220 | [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 221 | 222 | ### Git Graph 223 | 224 | 查看 git log graph 工具 225 | 226 | [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) 227 | 228 | ### GitLens — Git supercharged 229 | 230 | 查看 git 的工具 - 在 code 上直接看到這行最後的修改是誰改的 231 | 232 | [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 233 | 234 | ### Code Spell Checker 235 | 236 | 檢查錯字. 237 | 238 | [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 239 | 240 | ### EditorConfig for VS Code 241 | 242 | 設定檔案範例 [.editorconfig](.editorconfig), 參考 [python-template](https://github.com/NLeSC/python-template/blob/main/.editorconfig) 243 | 244 | `root = true` editorconfig 很特殊的參數. 245 | 246 | `end_of_line = lf` 設定斷行字元. 247 | 248 | `insert_final_newline = true` 是否要保留最後空一行. 249 | 250 | `trim_trailing_whitespace = true` 是否要清除空白. 251 | 252 | `charset = utf-8` 編碼設定. 253 | 254 | `indent_style = space` 設定縮排要用 tab 還是 空白. 255 | 256 | `indent_size = 4` 設定空格數. 257 | 258 | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) 259 | 260 | ### Ruff 261 | 262 | 更強大更快的 Python linter (使用 Rust 寫的) 263 | 264 | [Ruff](https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff) 265 | 266 | ```cmd 267 | pip install ruff 268 | ``` 269 | 270 | 設定 Ruff 為預設的 formatter, 271 | 272 | ```json 273 | { 274 | "[python]": { 275 | "editor.formatOnSave": true, 276 | "editor.defaultFormatter": "charliermarsh.ruff" 277 | } 278 | } 279 | ``` 280 | 281 | 設定自動 import 排版以及 fixAll 282 | 283 | ```json 284 | { 285 | "[python]": { 286 | "editor.codeActionsOnSave": { 287 | "source.fixAll.ruff": "explicit", 288 | "source.organizeImports.ruff": "explicit" 289 | } 290 | } 291 | } 292 | 293 | ``` 294 | 295 | ### Python Debugger 296 | 297 | [Python Debugger](https://marketplace.visualstudio.com/items?itemName=ms-python.debugpy) 298 | 299 | 建議搭配 [Python debugging in VS Code](https://code.visualstudio.com/docs/python/debugging) 一起觀看 300 | 301 | 必要時需要安裝 `pip install debugpy` 302 | 303 | `request` 主要有 `launch` 和 `attach`, 304 | 305 | `launch` 306 | 307 | 這個就是最一般從 vscode 中 debug 重頭開始這樣. 308 | 309 | `attach` 310 | 311 | 差別在於, 是調用已經啟動的進程, 意思就是必須再開一個視窗去執行這個 debug, 312 | 313 | 通常會用在已經運行的程式, 或是外部工具啟用的程序(像是 docker) 314 | 315 | 這兩個的差別使用 [vscode-django-note](https://github.com/twtrubiks/vscode_django_note) 來參考. 316 | 317 | ```json 318 | { 319 | "version": "0.2.0", 320 | "configurations": [ 321 | { 322 | "name": "Django launch", 323 | "type": "debugpy", 324 | "request": "launch", 325 | "program": "${workspaceFolder}\\manage.py", 326 | "args": [ 327 | "runserver", 328 | "--noreload", 329 | ], 330 | "django": true 331 | }, 332 | { 333 | "name": "Django attach", 334 | "type": "debugpy", 335 | "request": "attach", 336 | "connect": { 337 | "host": "localhost", 338 | "port": 18000 339 | }, 340 | "django": true 341 | } 342 | ] 343 | } 344 | ``` 345 | 346 | `launch` Django launch 347 | 348 | 這很簡單, 中斷點開下去就可以了. 349 | 350 | `attach` Django attach 351 | 352 | 首先, 先打開一個 terminal 執行 django, 並且要監聽一個 port, 這邊設定 18000 353 | 354 | ```cmd 355 | python -m debugpy --listen 0.0.0.0:18000 manage.py runserver 0.0.0.0:8000 356 | ``` 357 | 358 | 接著再開啟一個 terminal 去執行中斷點 Django attach (也是設定 18000 port), 359 | 360 | 透過這個就可以成功的進入中斷點. 361 | 362 | ### VScode Dev Containers 教學 363 | 364 | * [Youtube Tutorial - VScode Dev Containers 教學 - Python(等待新增)](XXX) 365 | 366 | 如果你是 VScode 用戶而且也懂 docker, 非常推薦這個 [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) 套件. 367 | 368 | 可以完全的在容器內開發, 不會再遇到煩人的環境不一致的問題, 369 | 370 | 要在裡面 debug 也都是沒問題的. 371 | 372 | 官方教學 [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) 373 | 374 | 首先, 先安裝 docker, 如果沒安裝可參考 [Docker 基本教學 - 從無到有 Docker-Beginners-Guide](https://github.com/twtrubiks/docker-tutorial) 375 | 376 | 接著安裝 Dev Containers 這個套件, 377 | 378 | vscode 輸入 `Ctrl` + `Shift` + `P` 379 | 380 | `>Dev Containers: Add Dev Container Configuration Files` 381 | 382 | ![img](https://i.imgur.com/xgqAYhg.png) 383 | 384 | 接著選 `>Add configuration to workspace` 385 | 386 | (如果你想要建立在系統共用, 可選另一個) 387 | 388 | ![img](https://i.imgur.com/nc7XbXe.png) 389 | 390 | 接著這邊有很多 image, 選一個你喜歡的, 這邊我們選 python3 391 | 392 | ![img](https://i.imgur.com/BXWB3If.png) 393 | 394 | 接著會問你需不需要安裝其他的, 如果都不需要, 直接選 ok 就好 395 | 396 | ![img](https://i.imgur.com/f4Hzmvf.png) 397 | 398 | 之後你會看到幫你建立了一個資料夾 [.devcontainer/devcontainer.json](https://github.com/twtrubiks/vscode_python_note/blob/master/.devcontainer/devcontainer.json), 並且做相關設定 399 | 400 | 如果遇到權限問題, 可以考慮加入 `"remoteUser": "root"` 這段, 401 | 402 | image 這邊可以放自己喜歡的 image, 這邊我們就先用這個範例, 403 | 404 | customizations 這邊其實就是設定容器裡面的 vscode 要怎麼設定, 405 | 406 | 包含 vscode 個人化, 以及安裝哪些 vscode 套件之類的. 407 | 408 | mounts 這部份是像 docker 中的 Volumes (可以掛路徑進去) 409 | 410 | 詳細的設定可參考 [Dev Container - json_reference](https://containers.dev/implementors/json_reference/) 411 | 412 | 啟動容器, 413 | 414 | vscode 輸入 `Ctrl` + `Shift` + `P` 415 | 416 | `>Dev Containers: Rebuild and Reopen in Container` 417 | 418 | ![img](https://i.imgur.com/5hcWy8h.png) 419 | 420 | 接著就要等一下了, 因為它就是在做 `docker pull` 的事情, 所以如果是第一次都會比較慢. 421 | 422 | 基本上它會再開啟一個 vscode, 這個 vscode 是已經在容器裡面了. 423 | 424 | 分別下 `docker ps` 以及 `docker images` 查看, 425 | 426 | ![img](https://i.imgur.com/Hc1w2FC.png) 427 | 428 | 正在執行的容器就是我們建立了, images 則是剛剛設定的, 429 | 430 | 你可以在這容器內做任何事情, 基本上它就是一個環境, 431 | 432 | 也可以 debug 433 | 434 | ![img](https://i.imgur.com/p4sveTd.png) 435 | 436 | 預先定義的套件也都會裝起來 437 | 438 | ![img](https://i.imgur.com/eMXMR7e.png) 439 | 440 | 退出的方式, 點選左下角, 選擇 Close Remote Connection, 441 | 442 | 或是用一般的 `docker compose down` 也可以 443 | 444 | ![img](https://i.imgur.com/JtQJDJ3.png) 445 | 446 | ## 結論 447 | 448 | 基本上 VSCode 可以設定的東西真的非常的多，大家可以自行摸索。:relaxed: 449 | 450 | 這篇是教大家一些很基本的設定，未來如果有機會，再介紹更多的功能給各位認識。 451 | 452 | ## Donation 453 | 454 | 文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡 :laughing: 455 | 456 | ![alt tag](https://i.imgur.com/LRct9xa.png) 457 | 458 | [贊助者付款](https://payment.opay.tw/Broadcaster/Donate/9E47FDEF85ABE383A0F5FC6A218606F8) 459 | 460 | ## License 461 | 462 | MIT license 463 | -------------------------------------------------------------------------------- /src/classes.py: -------------------------------------------------------------------------------- 1 | class SomeClass: 2 | def __init__(self, path, isinstance): 3 | pass 4 | 5 | class AnotherClass: 6 | pass -------------------------------------------------------------------------------- /src/main.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | from classes import SomeClass 4 | 5 | some_calss = SomeClass() 6 | 7 | date = datetime.date() 8 | --------------------------------------------------------------------------------