--- # System prepended metadata title: vscode-基礎操作 --- # vscode-基礎操作 本文件將以python開發者的角度進行介紹，主要以界面使用、基本開發流程以及插件使用做介紹。其他如[git操作使用](https://hackmd.io/@howhow/SJbpuRHjP)、[docker遠端連線功能](https://hackmd.io/@howhow/ry8sH7-98)請參閱連結。 ### vscode概念與特色 #### 1.概念 * 以檔案夾作為專案管理 * 設定值(setting.json)分為user(全域) & workingspace(專案) #### 2.特色 * 為何要用vscode?-->『因為它免費』 * 輕量化開發程式-->快速啟動，容量小 * 支援多種語言開發功能及套件-->實用面廣 * 簡單的版本管理界面-->整合git * 開源及快速bug修正-->每月更新 ### vscode界面介紹 #### 1.Activity Bar 左側黃色框為快速功能鍵，點擊可以展開跟關閉SideBar，分別會呈現explorer、search、source control(GIT)、debug、extension等視圖(可自由增加) #### 2.Side Bar 中間藍色框為快速功能鍵的顯示列表，會顯示快速功能鍵之相關資訊，呈現不同功能的view視圖，最常用的view是explorer，以樹狀選單呈現，瀏覽選取專案裡的不同資料夾跟檔案 #### 3.Editor+Panels 右側為上方為程式撰寫區域，可自由打開多個Editor並自由決定這些editor要並排還是垂直排列;下方面板主要用於呈現extenison的output、debug的資訊，程式碼的問題以及整合進vscode的termimal #### 4.Status Bar 下方綠色框所標示的藍色區域為狀態列，，用於呈現開啟且在activity狀態的editor的資訊，如當前光標所在的line、column位置，縮排一次右移幾個column(tab size)，編輯檔案的語言...等等 ![](https://i.imgur.com/zUg0LuU.png) ### vscode基本開發流程 #### 1. 下載python 以python為範例。進入vscode頁面後，點擊Extensions圖示來下載python套件 ![](https://i.imgur.com/wDXyCoc.png) #### 2. 開啟專案資料夾 進入專案資料夾(若無則直接創一個)，進入後此專案資料夾的內容將會顯示於左側 ![](https://i.imgur.com/Q55Elcp.png) #### 3. 編輯檔案 開啟或建立一個.py檔案，編輯後可以發現檔案上出現一個白點，代表還沒存檔 ![](https://i.imgur.com/362M1K1.png) #### 4. 執行檔案 使用快捷鍵`ctrl + 、`呼叫terminal，輸入python <<你的檔案名稱>>.py即可運行程式碼/另外若已經設定好python interpreter path會於右上角出現綠色三角形，點擊後可直接運行程式碼 ![](https://i.imgur.com/Ll18isb.png) #### 5. 設定interpreter 若出現問題可確認是否尚未選擇interpreter path，快捷鍵"shift+ctrl+p"並搜尋pytohn select interpreter，可設定自己的python版本 ![](https://i.imgur.com/Xa9jRzp.png) ![](https://i.imgur.com/BJ6iIwb.png) ### vscode 偵錯模式debug 如何開啟dubug模式：點擊功能列的小蟲仔![](https://i.imgur.com/H1w9y9j.png) 點選run旁邊的綠色三角形 or 點run-->start Debugging or 快捷鍵F5 ![](https://i.imgur.com/xEponM8.png) VSCode debug 模式示意圖： ![](https://i.imgur.com/BYsAKKz.png) #### 1. Variables:變數值 執行程式時顯示當下變數數值，透過點擊兩下可修改變數，可觀察修改變數後之執行結果 #### 2.Watch:自定義程式表達式(expression) 當變數過多時可字定義自己需要觀察的變數於此欄位，同時可對欄位輸入方程式來查看特定數值，如圖中輸入"a+1"，變數a為1時，該欄位會顯示a+1=2 #### 3.Call stack:函數的執行堆疊(stack) 主要監控函數的操作(def)，圖中程式執行到第二行，所以會看到最上面是fool() 2:5，表示現在正在fool()函數中，第二行第五個字。 #### 4.Breakpoints:中斷點的位置 勾勾可以開關中斷點，關閉時可保留下該中斷點位置。 對中斷點點擊右鍵，編輯中斷點(edit breakpoint): 1.Expression(運算式):運算式評估為true時中斷(ex:當某變數大於多少時中斷) ![](https://i.imgur.com/V9SWxjO.png) 2.Hit Count(叫用次數):符合叫用次數條件時中斷(ex:當某程式碼被叫用次數大於多少時中斷) ![](https://i.imgur.com/d18i3mp.png) 3.Log Message(紀錄訊息):當命中中斷點時向紀錄傳送訊息。(ex:經過中斷點時傳送特定數值資訊) ![](https://i.imgur.com/RY4Rxzg.png) #### 5.Debug console Debug相關資訊 #### 6.panel:程式流程控制儀表板 ![](https://i.imgur.com/isSlgnP.png) 依次是 Contiune, Step Over, Step In, Step Out, Restart, Stop **Contiune**：繼續執行 **Step Over**：不離開當前執行函數，單步執行到下一行 **Step In**：單步執行到下一行。若有函數就進入 **Step Out**：離開當前函數後，停留在下一行 **Restart**：整個 deubg 重新執行 **Stop**：終止整個 deubg 模式 #### 7.Evaluate expression:程式測試 可在此直接輸入程式碼進行"即時"測試 ![](https://i.imgur.com/twBXkVH.png) #### 8.簡易DEBUG流程 (1)設定中斷點 ![](https://i.imgur.com/K6iHBEi.png) (2)開啟偵錯模式 點選run旁邊的綠色三角形 or 點run-->start Debugging or 快捷鍵F5 ![](https://i.imgur.com/xEponM8.png) (3)選偵錯方式 只有第一次要設定，後序此設定可沿用 ![](https://i.imgur.com/q6yi84y.png) (4)可對變數修改觀察變化(variables) 執行程式一部分後可對其中變數進行修改 ![](https://i.imgur.com/sAaRGL8.png) 再繼續執行Debug後可觀察輸出的數值變化 ![](https://i.imgur.com/kKEqBbT.png) (5)可自訂計算變數觀察結果(watch) 於watch部份可輸入計算式觀察變數 ![](https://i.imgur.com/0K91y0Z.png) ### vscode插件使用 #### 1.[代碼運行:Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) 代碼一鍵運行並自動偵測你所使用的，同時使測試運行時間 (支持Node.js, Python, C++, Java, PHP, Perl, Ruby, Go等超過40種的語言) ![](https://i.imgur.com/ZylQCdA.gif) ![](https://i.imgur.com/YK0x7yo.gif) #### 2.[空行補色:indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 更方便清晰的觀察程式碼的縮排 ![](https://i.imgur.com/z9EvYYX.png) #### 3.[檔案圖標:vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) 以圖形標示資料夾中各類檔案 ![](https://i.imgur.com/cTpc4ZK.gif) #### 4.[檢查錯字:Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 檢查錯字的插件＠＠，會在錯字下面標示底線提醒，點擊黃色燈泡圖示提供建議選項，或佳日字典 ![](https://i.imgur.com/3AiIvN5.png) #### 5.[括號改色:Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) 方便你在除錯 (debug) 時快速找到對應的標籤，當然框的顏色是可以自定義的 ![](https://i.imgur.com/hKYeYij.png) #### 6.[自動路徑:AutoFileName](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename) 自動填入檔案路徑提示檔案夾路徑(打入/並加上檔案開頭開始搜尋) ![](https://i.imgur.com/ecCVbUy.gif) #### 7.[書籤:Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 可對程式碼標記、對該標記取名、往來於標籤之中以及於左側sidebar顯示所有標籤的細節 ![](https://i.imgur.com/c2YThvk.png) ![](https://i.imgur.com/CNhxD1a.png) * 快捷鍵： Command(Ctrl)+Option(Alt)+K# 在此行建立或取消一個 Bookmark Command(Ctrl)+Option(Alt)+L# 快速移動到下個 Bookmark Command(Ctrl)+Option(Alt)+J# 快速移動到上個 Bookmark #### 8.[設定備份:Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) 雲端備份vscode之環境及套件設定(但會覆蓋目前電腦中的所有設定，請謹慎使用) 步驟： ##### 1.建立token 登入github點選settings ![](https://i.imgur.com/cgUSmKr.png) 選擇左下developer settings ![](https://i.imgur.com/BNrl0eK.png) 選擇左方Personal access token ![](https://i.imgur.com/7HuMZap.png) 新增Generate new token ![](https://i.imgur.com/KhRl9sI.png) 輸入Note、點選gist(Creat gists)，再點選Generate token ![](https://i.imgur.com/tJFKWpl.png) ![](https://i.imgur.com/zY8eFDW.png) ##### 2.複製token 於Personal access tokens頁面中複製此token，(產生的 Access Token 之後不可查詢，僅能重新生成，所以務必在此處複製備份，以利後續設定之用) ![](https://i.imgur.com/GylVfcN.png) ##### 3.設定Settings Sync **(方式一)** 回vscode中下載"Settings Sync"後，快捷鍵"Shift + Alt + U"輸入token ![](https://i.imgur.com/TiGNUUJ.png) 成功的話會自動跑出 syncSummary.txt的文件 (此檔記錄以利後續用此序號於其他地方下載環境用) ![](https://i.imgur.com/wH0U1V7.png) **(方式二)** 也可使用vscode UI界面設定，按 F1 開啟指令面板 Command Palette，輸入 Sync: Update/Upload Settings，開啟擴充套件，並點擊右側 EDIT CONFIGURATION 按鈕，進入上傳下載功能設定頁面 上傳下載功能頁面中，於右上角 Access Token 欄位中輸入先前備份的 GitHub gist access token ![](https://i.imgur.com/DwiWtYi.png) 同時按下 Shift + Alt + U，此時 Settings Sync 會創建新的 Gist，於右下角上傳設定至 Gist 的彈窗訊息中點選 Yes ![](https://i.imgur.com/sZMMlkc.png) 上傳過程中會彈出 OUTPUT 視窗提示進度，並於右下角出現訊息通知使用者複製新創建 Gits 的 ID，供其他裝置下載備份的設定檔時使用。在通知訊息視窗上按右鍵點 Copy Text 可複製內容 ![](https://i.imgur.com/5DZmv86.png) **(方式三)** 若上述方式都出現問題，可直接到json檔紀行編輯 於vscode中使用快捷鍵"ctrl + Shift + p"，輸入Sync:Advanced Options ![](https://i.imgur.com/F7Teqmb.png) 編輯本機延伸模組設定 ![](https://i.imgur.com/2yBM421.png) 於token處編輯github token並儲存 ![](https://i.imgur.com/z81KOKP.png) ##### 4.上傳設定紀錄 快捷鍵"Shift + Alt + U"，會開始上傳本機端vscode相關設定於github中 ![](https://i.imgur.com/Zh3oymF.png) ##### 5.下載設定紀錄 到任何一台電腦中安裝Settings Sync 插件 ![](https://i.imgur.com/HYS672E.png) 接著進入Settings Sync擴充套件設定 ![](https://i.imgur.com/NWK6SBG.png) 將之前建立的Gist ID 貼上 ![](https://i.imgur.com/AKM17W3.png) 按下下載同步快捷鍵"Shift + Alt + D"，就可以將環境及相關套件設定檔案都下載下來摟！ ***再次重申：會覆蓋目前電腦中的所有設定，請謹慎使用*** --- #### 9.git系列工具(建議可全部安裝，於git運作上有許多幫助) ##### [(1)git graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) 可看美美的graph、加入tag等功能 ![](https://i.imgur.com/aLaPfXR.gif) ##### [(2)git history](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 可以看到之前的git history, 還可以看到對特定檔案的file hisory ![](https://i.imgur.com/R5QP1N8.gif) ##### [(3)git stash](https://marketplace.visualstudio.com/items?itemName=arturock.gitstash) git stash暫存功能 ![](https://i.imgur.com/WHfwH7c.gif) ##### [(4)git lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 可簡易的比較幾次commit的差異及變換 ![](https://i.imgur.com/Vhk4kmj.gif) 觀察是誰編輯過此段程式碼 ![](https://i.imgur.com/UyhIY8O.png) 查看Repositories ![](https://i.imgur.com/Ql7xShZ.png)