# 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)，編輯檔案的語言...等等


### vscode基本開發流程
#### 1. 下載python
以python為範例。進入vscode頁面後，點擊Extensions圖示來下載python套件
#### 2. 開啟專案資料夾
進入專案資料夾(若無則直接創一個)，進入後此專案資料夾的內容將會顯示於左側
#### 3. 編輯檔案
開啟或建立一個.py檔案，編輯後可以發現檔案上出現一個白點，代表還沒存檔
#### 4. 執行檔案
使用快捷鍵`ctrl + 、`呼叫terminal，輸入python <<你的檔案名稱>>.py即可運行程式碼/另外若已經設定好python interpreter path會於右上角出現綠色三角形，點擊後可直接運行程式碼
#### 5. 設定interpreter
若出現問題可確認是否尚未選擇interpreter path，快捷鍵"shift+ctrl+p"並搜尋pytohn select interpreter，可設定自己的python版本


### vscode 偵錯模式debug

如何開啟dubug模式：點擊功能列的小蟲仔
點選run旁邊的綠色三角形 or 點run-->start Debugging or 快捷鍵F5

VSCode debug 模式示意圖：

#### 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:當某變數大於多少時中斷)
2.Hit Count(叫用次數):符合叫用次數條件時中斷(ex:當某程式碼被叫用次數大於多少時中斷)
3.Log Message(紀錄訊息):當命中中斷點時向紀錄傳送訊息。(ex:經過中斷點時傳送特定數值資訊)

#### 5.Debug console
Debug相關資訊
#### 6.panel:程式流程控制儀表板


依次是 Contiune, Step Over, Step In, Step Out, Restart, Stop
**Contiune**：繼續執行
**Step Over**：不離開當前執行函數，單步執行到下一行
**Step In**：單步執行到下一行。若有函數就進入
**Step Out**：離開當前函數後，停留在下一行
**Restart**：整個 deubg 重新執行
**Stop**：終止整個 deubg 模式

#### 7.Evaluate expression:程式測試
可在此直接輸入程式碼進行"即時"測試

#### 8.簡易DEBUG流程
(1)設定中斷點

(2)開啟偵錯模式
點選run旁邊的綠色三角形 or 點run-->start Debugging or 快捷鍵F5

(3)選偵錯方式
只有第一次要設定，後序此設定可沿用

(4)可對變數修改觀察變化(variables)
執行程式一部分後可對其中變數進行修改
再繼續執行Debug後可觀察輸出的數值變化

(5)可自訂計算變數觀察結果(watch)
於watch部份可輸入計算式觀察變數

### vscode插件使用
#### 1.[代碼運行:Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
代碼一鍵運行並自動偵測你所使用的，同時使測試運行時間
(支持Node.js, Python, C++, Java, PHP, Perl, Ruby, Go等超過40種的語言)

#### 2.[空行補色:indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
更方便清晰的觀察程式碼的縮排

#### 3.[檔案圖標:vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
以圖形標示資料夾中各類檔案

#### 4.[檢查錯字:Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
檢查錯字的插件＠＠，會在錯字下面標示底線提醒，點擊黃色燈泡圖示提供建議選項，或佳日字典

#### 5.[括號改色:Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
方便你在除錯 (debug) 時快速找到對應的標籤，當然框的顏色是可以自定義的

#### 6.[自動路徑:AutoFileName](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename)
自動填入檔案路徑提示檔案夾路徑(打入/並加上檔案開頭開始搜尋)

#### 7.[書籤:Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
可對程式碼標記、對該標記取名、往來於標籤之中以及於左側sidebar顯示所有標籤的細節
* 快捷鍵：
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

選擇左下developer settings

選擇左方Personal access token

新增Generate new token

輸入Note、點選gist(Creat gists)，再點選Generate token


##### 2.複製token
於Personal access tokens頁面中複製此token，(產生的 Access Token 之後不可查詢，僅能重新生成，所以務必在此處複製備份，以利後續設定之用)

##### 3.設定Settings Sync
**(方式一)**
回vscode中下載"Settings Sync"後，快捷鍵"Shift + Alt + U"輸入token
成功的話會自動跑出 syncSummary.txt的文件
(此檔記錄以利後續用此序號於其他地方下載環境用)

**(方式二)**
也可使用vscode UI界面設定，按 F1 開啟指令面板 Command Palette，輸入 Sync: Update/Upload Settings，開啟擴充套件，並點擊右側 EDIT CONFIGURATION 按鈕，進入上傳下載功能設定頁面
上傳下載功能頁面中，於右上角 Access Token 欄位中輸入先前備份的 GitHub gist access token

同時按下 Shift + Alt + U，此時 Settings Sync 會創建新的 Gist，於右下角上傳設定至 Gist 的彈窗訊息中點選 Yes

上傳過程中會彈出 OUTPUT 視窗提示進度，並於右下角出現訊息通知使用者複製新創建 Gits 的 ID，供其他裝置下載備份的設定檔時使用。在通知訊息視窗上按右鍵點 Copy Text 可複製內容

**(方式三)**
若上述方式都出現問題，可直接到json檔紀行編輯
於vscode中使用快捷鍵"ctrl + Shift + p"，輸入Sync:Advanced Options

編輯本機延伸模組設定

於token處編輯github token並儲存

##### 4.上傳設定紀錄
快捷鍵"Shift + Alt + U"，會開始上傳本機端vscode相關設定於github中

##### 5.下載設定紀錄
到任何一台電腦中安裝Settings Sync 插件
接著進入Settings Sync擴充套件設定
將之前建立的Gist ID 貼上
按下下載同步快捷鍵"Shift + Alt + D"，就可以將環境及相關套件設定檔案都下載下來摟！

***再次重申：會覆蓋目前電腦中的所有設定，請謹慎使用***

---
#### 9.git系列工具(建議可全部安裝，於git運作上有許多幫助)
##### [(1)git graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
可看美美的graph、加入tag等功能
##### [(2)git history](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
可以看到之前的git history, 還可以看到對特定檔案的file hisory
##### [(3)git stash](https://marketplace.visualstudio.com/items?itemName=arturock.gitstash)
git stash暫存功能
##### [(4)git lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
可簡易的比較幾次commit的差異及變換
觀察是誰編輯過此段程式碼
查看Repositories