---
tags: sysprog
---
# Visual Studio Code
教學影片：
* ==[Editor 編輯者 -- Visual Studio Code](https://www.youtube.com/watch?v=8WnQfbqxBxI&list=PL4eoLKmwShjvh9B8zLkGxTos_OUoZhkNv)==
* ==[開開心心學 Visual Studio Code](https://www.youtube.com/watch?v=6wOMBd_8d_8&list=PL6S9AqLQkFpph4LOfSjtD-s4WB3pNh5M3)==
## [簡介](https://zh.wikipedia.org/wiki/Visual_Studio_Code)
由 Microsoft 開發，同時支援 Windows, Linux 和 macOS 作業系統的開放原始碼程式編輯器。
[Visual Studio Code 的 GitHub 頁面](https://github.com/Microsoft/vscode)
## 安裝與執行
* 先到 [下載](https://code.visualstudio.com/download) 載下自己適合的安裝包
:::info
以下說明 Linux Debian, Ubuntu(.deb) 及 Windows 的安裝方式
:::
### Linux Debian, Ubuntu(.deb)
#### 可選擇以下方式安裝：
* 透過 [snap](https://snapcraft.io/docs) 安裝
```shell
$ sudo snap install --classic code
```
* 下載 .deb 檔並執行`sudo dpkg -i <file>.deb`命令安裝
* 注意`<file>` 的路徑
* 新增 apt repository 後執行 `apt` 命令安裝。
```shell
$ 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 是最常用到的功能，點一下 icon 側欄 (B) 就會開啟，再點一下關閉
由上而下依序說明：
* **檔案總管**︰
* 可以在此選擇要打開的檔案或資料夾
* 以樹狀結構一層層顯示
* 可以在指定資料夾下**新增 / 刪除**檔案或資料夾
* **跨檔案搜尋**：
* 在編輯區的檔案搜尋：ctrl + f
* 在開啟的資料夾下搜尋：shift + ctrl + f
* 可進行搜尋及取代 (**可以使用 regular expression!!**)
* 可以指定要搜尋或要排除的檔案
* **Git**
* 若以設定好 git repository，則可以在此執行各式 git 操作。如: pull, push, commit...
* 可以點選下方面板 (E) 的「輸出」查看 git 的訊息
* **偵錯**
* 各式 debugger (網頁也可)
* 可以設立 breakpoint
* debug 前須設定好組態檔 `launch.json`
* **擴充套件**
* 各式套件可在此自由選取安裝
## 設定
VS code 也有許多設定可以依照使用者喜好更改，設定檔都採 **==json==** 格式，而擴充套件的設定值也是在此更改。
基本上 VS code 的設定檔(含後面會介紹的 debug 設定檔) 都是 json 格式。沒有使用過或學過 json 的人不用擔心，參照預設檔案其實就一目了然囉！
**格式**： `"要設定的目標" : 值`
每一個設定值都富有詳盡的 **==中文==** 解說，讓你我都更清楚每個設定值對應的功能！但擴充套件的設定說明可能就只有英文了
**改完記得存檔喔！**
* **開啟設定檔**
* 檔案 -> 喜好設定 -> 設定
* 開啟時的歡迎頁面右側點選 **組態設定**
:::danger
欲變動設定須在右邊的編輯區重新輸入，左側的預設值是不能更改的
:::
* 例圖：
### 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://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)
:::warning
請先自行[安裝 Git 相關套件](https://git-scm.com/download)
:::
遇進入 Git 畫面請點選選單 (A) 的第 4 個圖示，更新後圖示有變喔！如下圖：
**那我們開始吧！**
* 在 [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**
* **git add**
滑鼠一至檔案上方會出現一個 **+** 號，或是右鍵點選檔案點選 **暫存檔案** 這就是 `$ git add [file]` 的意思
* git add 完後，檔案會移至 **"STAGED CHANGES"**
如果想撤回就按下 **-** 號
#### commit ＆ push
commit 的資訊打在上方訊息欄就好囉！
* 提交 commit 就按上方的 **"v"**，或 ctrl + Enter
* 撤回 commit ： **...** -> 復原上次認可
* commit 訊息也可以打多行！按下 enter 換行就好
**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` 就會出現幾個選項，如圖：
接著請選擇第二個 `Git: View History (git log)`
* 接著就可以看到以下畫面，清楚的呈現 git log，點選任一 commit 可以看到詳細訊息。
* 點選任一 commit 中有變更過的檔案甚至還可以與前一版本或本地端版本比對
下圖為與該 commit 前一版的比對
:::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，組態設定會直接開啟。
* 點選選單中的第 4 個圖示，由於還未設定任何組態，所以先按下「齒輪」，並選擇 GDB
#### 組態設定檔
一樣是 json 格式，只需要改設定檔的 **target** (下圖中紅色框內)，改成執行檔的所在目錄就好，其他部份都已經自動設定好囉！
改好後記得 **存檔** 喔！
#### start debugging!
* 按下 **綠色播放鍵**，就開始 debug 囉！
* 開始後會開啟下方的 **偵錯面板**
程式執行後的輸出結果也會出現在此區
* **breakpoint**
* 在行號旁邊點一下就設好 breakpoint，再點一下移除 breakpoint
* 對某個 breakpoint 點選右鍵可以選擇三種操作：移除、停用、編輯(可以設定條件式，當條件觸發時中斷點才作用)
* 中斷時如下圖
* 單步執行等操作在整個視窗上方
* **GDB 命令**
VS Code 提供的 debugger 命令有限，但其他的 GDB 命令還是可以執行！！
在面板中的偵錯主控台最下方就是一個命令輸入列了！如下圖：
* GDB 教學連結：
[除錯程式: gdb](https://www.cyut.edu.tw/~ckhung/b/c/gdb.php)
## 更新版本
VS Code 的更新速度很快，若有最新版本可以更新，打開 Code 的時候最上方會出現提醒訊息，如圖：
* 點下 **立即下載**
會導入更新包下載網頁
* 接著執行下列命令
```shell
# 注意`<file>` 的路徑
$ sudo dpkg -i <file>.deb
$ sudo apt-get update
```
更新完成！！
重新打開 VS Code 會顯示新版本資訊