# Visual Studio Code ###### tags: `sysprog2017`, `sysprog2018` 教學影片: * ==[Editor 編輯者 -- Visual Studio Code](https://www.youtube.com/watch?v=8WnQfbqxBxI&list=PL4eoLKmwShjvh9B8zLkGxTos_OUoZhkNv)== * ==[開開心心學 Visual Studio Code](https://www.youtube.com/watch?v=7VhWtbbPPh4&list=PLjavDKFcyCOkl6uL8BG9_sP6A2FxmBFqv)== ## [簡介](https://zh.wikipedia.org/wiki/Visual_Studio_Code) 由 **微軟** 開發,同時支援 Windows、Linux 和 OS X 作業系統的開源文字編輯器。 [VS Code Github link](https://github.com/Microsoft/vscode) ## 安裝與執行 * 先到 [下載](https://code.visualstudio.com/download) 載下自己適合的安裝包 :::info 以下說明 Linux Debian, Ubuntu(.deb) 及 Windows 的安裝方式 ::: ### Linux Debian, Ubuntu(.deb) #### 安裝 * `sudo dpkg -i <file>.deb` * 注意`<file>` 的路徑 * `sudo apt-get update` * `sudo apt-get install code` 這樣就完成安裝囉! [官方說明](https://code.visualstudio.com/docs/setup/linux) #### 執行 三種方法: * 在終端機下 `code` 開啟 * 終端機下`code <file_name>` ,使用 code 開啟特定檔案 * 在應用程式列表搜尋 code 並開啟 ### Windows #### 安裝 * 下載完成後直接點開 Installer 等待安裝結束即可 * 64-bit 電腦的預設安裝路徑為 `C:\Program Files (x86)\Microsoft VS Code` [官方說明](https://code.visualstudio.com/docs/setup/windows) #### 執行 * 雙擊 VS code 的 icon 開啟 ## 界面說明 ![](https://i.imgur.com/KKcD4C5.png) ### 選單 選單的五個 icon 是最常用到的功能,點一下 icon 側欄 (B) 就會開啟,再點一下關閉 由上而下依序說明: * **檔案總管**︰ * 可以在此選擇要打開的檔案或資料夾 * 以樹狀結構一層層顯示 * 可以在指定資料夾下**新增 / 刪除**檔案或資料夾 * **跨檔案搜尋**: * 在編輯區的檔案搜尋:ctrl + f * 在開啟的資料夾下搜尋:shift + ctrl + f * 可進行搜尋及取代 (**可以使用 regular expression!!**) * 可以指定要搜尋或要排除的檔案 ![](https://i.imgur.com/pF5ajpA.png) * **Git** * 若以設定好 git repository,則可以在此執行各式 git 操作。如: pull, push, commit... * 可以點選下方面板 (E) 的「輸出」查看 git 的訊息 * **偵錯** * 各式 debugger (網頁也可) * 可以設立 breakpoint * debug 前須設定好組態檔 `launch.json` * **擴充套件** * 各式套件可在此自由選取安裝 ![](https://i.imgur.com/YBzfDxY.png) ## 設定 VS code 也有許多設定可以依照使用者喜好更改,設定檔都採 **==json==** 格式,而擴充套件的設定值也是在此更改。 基本上 VS code 的設定檔(含後面會介紹的 debug 設定檔) 都是 json 格式。沒有使用過或學過 json 的人不用擔心,參照預設檔案其實就一目了然囉! **格式**: `"要設定的目標" : 值` 每一個設定值都富有詳盡的 **==中文==** 解說,讓你我都更清楚每個設定值對應的功能!但擴充套件的設定說明可能就只有英文了 看到中文還是很感動 QAQ **改完記得存檔喔!** * **開啟設定檔** * 檔案 -> 喜好設定 -> 設定 * 開啟時的歡迎頁面右側點選 **組態設定** :::danger 欲變動設定須在右邊的編輯區重新輸入,左側的預設值是不能更改的 ::: * 例圖: ![](https://i.imgur.com/IWC1Ijq.png) ### coding style & 縮排 * 縮排: 預設的 Tab 就已是 4 個空白,所以不必再更動。 * coding style: 有套件可以使用 * [C/C++ clang](https://marketplace.visualstudio.com/items?itemName=mitaki28.vscode-clang) * [astyle](https://marketplace.visualstudio.com/items?itemName=Lukamicoder.AStyleExtension) ### 色彩主題及圖示設定 這應該也是許多人很注重的一點 —— 就是美美的佈景主題!顏色不對,工作起來就渾身不對,來挑一個自己喜歡的環境吧! * **開啟色彩主題設定選單** * 檔案 -> 喜好設定 -> 色彩佈景主題 * 開啟時的歡迎頁面右側點選 **色彩佈景主題** 開啟之後已有內建的多種選擇,若還是不喜歡,會引導你至 **擴充套件** (Marketplace) 下載安裝。 在擴充套件點擊一下主題可以預覽套用後的樣子,如圖: ![](https://i.imgur.com/GBv1VSF.png) * **開啟圖示設定選單** * 檔案 -> 喜好設定 -> 檔案圖示佈景主題 一樣可以預覽,如圖: ![](https://i.imgur.com/G9NThuS.png) ### 快速鍵設定 能夠自訂慣用的快速鍵也是重要的! [預設的功能說明](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf) * **裝套件** 若本來有**慣用編輯器的人**轉用 VS Code,可以直接在擴充套件找到套件!這樣就不用再改快速鍵的使用習慣囉~ 有 Vim, Sublime, Atom, Emacs, Eclipse... * 檔案 -> 喜好設定 -> 按鍵對應延伸模組 * **手動調** 設定檔一樣為 json 格式,且也是左欄為不可更動的預設值,右欄為使用者自訂 * **開啟設定檔** * 檔案 -> 喜好設定 -> 鍵盤快速鍵 ## 版本控制 還不熟悉 Git 的朋友可以參考[30天精通 Git 版本控管](https://github.com/doggy8088/Learn-Git-in-30-days) :::danger 請先自行安裝 Git 相關套件 [官方載點](https://git-scm.com/download) ::: 遇進入 Git 畫面請點選選單 (A) 的第 4 個圖示,更新後圖示有變喔!如下圖: ![](https://i.imgur.com/3ryyV0M.png) **那我們開始吧!** * 在 [GitHub](https://github.com/) 建立好遠端 repository 後,使用 clone 指令至本地端 `$ git clone [repository-url]` * 使用 VS Code 開啟剛剛 clone 下來的資料夾 (檔案 -> 開啟資料夾) VS Code 會自己抓取這個目錄的 Git 資訊 ### 基本操作 只要修改、新增或刪除檔案,對 Git 而言都是狀態改變。因此一修改完且存檔後,Git 的圖示就會跳通知。 #### 狀態 例如我在目錄下**建立一個空白檔案 vivian.txt**,再**修改 stopwatch.c**,並存檔 * Git 的圖示除了跳通知外,在 "CHANGES" 底下也多了 * 剛建好的 vivian.txt 且標注為 **U**,代表此檔案的狀態為 **Untracked file** * 修改的 stopwatch.c,標注為 **M**,代表此檔案狀態為 **Modified** ![](https://i.imgur.com/M73JFYk.png) * **git add** 滑鼠一至檔案上方會出現一個 **+** 號,或是右鍵點選檔案點選 **暫存檔案** 這就是 `$ git add [file]` 的意思 ![](https://i.imgur.com/rGxJmmq.png) * git add 完後,檔案會移至 **"STAGED CHANGES"** 如果想撤回就按下 **-** 號 ![](https://i.imgur.com/JNBwEtH.png) #### commit & push commit 的資訊打在上方訊息欄就好囉! * 提交 commit 就按上方的 **"v"**,或 ctrl + Enter * 撤回 commit : **...** -> 復原上次認可 ![](https://i.imgur.com/m2MDIRm.png) * commit 訊息也可以打多行!按下 enter 換行就好 ![](https://i.imgur.com/O0eUP4s.png) **push** * push : 點選 **...** -> 推送 * 接下來就是標準流程的輸入 username, pwd * 然後就成功囉! * 可以在終端機下 `$ git log` 確認,或使用接著要介紹的況充套件查看 ### Git log VS Code 也有許多好用的套件能讓使用者更加了解現今專案的狀態,不論是 branch 或歷史紀錄。透過圖形視覺化的呈現,更讓人一目了然。 :::danger 這裡介紹 [Git History(git log)](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 套件,請大家先裝好囉! ::: :::info 要使用這個套件理所當然要先開啟目標專案! ::: 我們以剛剛的同一個專案為例,如要觀看整個 git log,請先按下 ctrl + shift + P 叫出 **命令選擇區**,可以把它視為 VS Code 的 command line,許多擴充套件也須經由這個地方下指令。 * 叫出命令列後打 `>git h` 就會出現幾個選項,如圖: ![](https://i.imgur.com/JUhYv99.png) 接著請選擇第二個 `Git: View History (git log)` * 接著就可以看到以下畫面,清楚的呈現 git log,點選任一 commit 可以看到詳細訊息。 ![](https://i.imgur.com/U4314XL.png) * 點選任一 commit 中有變更過的檔案甚至還可以與前一版本或本地端版本比對 下圖為與該 commit 前一版的比對 ![](https://i.imgur.com/wcwdiDo.png) :::danger 目前限制: 課堂上使用的 pre-commit git hook (檢查 commit message) 無法順利跑出結果 ::: ## 偵錯 :::info **預設的 debugger 為 Node.js, JavaScript, Typescript** ::: 若要有其他語言的 debugger 首先要到擴充套件區下載該語言的套件,此篇教學以 gdb 為主。 **請先下載 [Native debug](https://marketplace.visualstudio.com/items?itemName=webfreak.debug) 套件** ### 進入 debug 環境 :::danger 記得要先產出執行檔! ::: * 直接按 F5,直接選擇要使用的 debugger,組態設定會直接開啟。 ![](https://i.imgur.com/Gx1ttQ1.png) * 點選選單中的第 4 個圖示,由於還未設定任何組態,所以先按下「齒輪」,並選擇 GDB ![](https://i.imgur.com/EnIkfec.png) #### 組態設定檔 一樣是 json 格式,只需要改設定檔的 **target** (下圖中紅色框內),改成執行檔的所在目錄就好,其他部份都已經自動設定好囉! 改好後記得 **存檔** 喔! ![](https://i.imgur.com/UXz6y7S.png) #### start debugging! * 按下 **綠色播放鍵**,就開始 debug 囉! ![](https://i.imgur.com/SeQG3Un.png) * 開始後會開啟下方的 **偵錯面板** 程式執行後的輸出結果也會出現在此區 ![](https://i.imgur.com/hV2bTpe.png) * **breakpoint** * 在行號旁邊點一下就設好 breakpoint,再點一下移除 breakpoint * 對某個 breakpoint 點選右鍵可以選擇三種操作:移除、停用、編輯(可以設定條件式,當條件觸發時中斷點才作用) ![](http://i.imgur.com/emSLGzE.png) * 中斷時如下圖 ![](http://i.imgur.com/e94Vthf.png) * 單步執行等操作在整個視窗上方 ![](http://i.imgur.com/NWNq6zN.png) * **GDB 指令** VS Code 提供的 debugger 指令有限,但其他的 GDB 指令還是可以執行!! 在面板中的偵錯主控台最下方就是一個指令輸入列了!如下圖: ![](http://i.imgur.com/Ii3frnK.png) * GDB 教學連結: [除錯程式: gdb](https://www.cyut.edu.tw/~ckhung/b/c/gdb.php) ## 更新版本 VS Code 的更新速度很快,若有最新版本可以更新,打開 Code 的時候最上方會出現提醒訊息,如圖: ![](https://i.imgur.com/W6ZB1yS.png) * 點下 **立即下載** 會導入更新包下載網頁 ![](https://i.imgur.com/ZqJt61o.png) * 接著執行下列指令 ```shell #注意`<file>` 的路徑 $ sudo dpkg -i <file>.deb $ sudo apt-get update ``` 更新完成!! 重新打開 VS Code 會顯示新版本資訊