Visual Studio Code

教學影片：開開心心學 Visual Studio Code

簡介

Visual Studio Code 是由 Microsoft 開發、支援 Windows, Linux 和 macOS 等作業系統的開放原始碼程式編輯器。

安裝與執行

先到下載頁面取得合適的安裝檔案

以下說明 Linux Debian/Ubuntu (副檔名為 .deb) 及 Windows 的安裝方式

Linux Debian, Ubuntu(.deb)

可選擇以下方式安裝：

透過 snap 安裝

$ sudo snap install --classic code

下載 .deb 檔並執行sudo dpkg -i <file>.deb命令安裝
- 注意<file> 的路徑

新增 apt repository 後執行 apt 命令安裝。

$ sudo apt-get update
$ sudo apt-get install code

這樣就完成安裝囉！

延伸閱讀: Visual Studio Code on Linux

執行

三種方法：

在終端機下 code 開啟
終端機下code <file_name> ，使用 code 開啟特定檔案
在應用程式列表搜尋 code 並開啟

Windows

安裝

下載完成後直接點開 Installer 等待安裝結束即可
64-bit 電腦的預設安裝路徑為 C:\Program Files (x86)\Microsoft VS Code

延伸閱讀: Visual Studio Code on Windows

執行

雙擊 VS code 的圖示開啟

界面說明

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

選單

選單左側的 5 個圖示最常用，點擊側欄 (B) 就會開啟，再點一下關閉
由上而下依序說明：

檔案總管︰
- 可以在此選擇要打開的檔案或目錄
- 以樹狀結構一層層顯示
- 可以在指定目錄下新增 / 刪除檔案或目錄
跨檔案搜尋：
- 在編輯區的檔案搜尋: ctrl + f
- 在開啟的目錄下搜尋: shift + ctrl + f
- 可進行搜尋及取代 (可使用 regular expression)
- 可指定要搜尋或要排除的檔案
  Image Not Showing Possible Reasons
  The image was uploaded to a note which you don't have access to
  The note which the image was originally uploaded to has been deleted
  Learn More →
Git
- 若以設定好 git repository，則可以在此執行各式 git 操作。如: pull, push, commit…
- 可以點選下方面板 (E) 的「輸出」查看 git 的訊息
偵錯
- 各式 debugger (網頁也可)
- 可以設立 breakpoint
- debug 前須設定好組態檔 launch.json
擴充套件
- 各式套件可在此自由選取安裝
  Image Not Showing Possible Reasons
  The image was uploaded to a note which you don't have access to
  The note which the image was originally uploaded to has been deleted
  Learn More →

設定

Visual Studio Code 有許多設定可依照使用者偏好變更，設定檔都採 json 格式，而擴充套件的設定值也是在此更改。

Visual Studio Code 的設定檔 (含後面會介紹的 debug 設定檔) 都是 json 格式。沒有使用過或學過 json 的人不用擔心，參照預設檔案即可一目了然！
格式： "要設定的目標" : 值

每一個設定值都有詳盡的中文解說，讓你我都更清楚每個設定值對應的功能！但擴充套件的設定說明可能就只有英文。
改完記得存檔喔！

開啟設定檔
- 檔案
  $\to$ 喜好設定
  $\to$ 設定
- 開啟時的歡迎頁面右側點選 組態設定

欲變動設定須在右邊的編輯區重新輸入，左側的預設值是不能更改的

例圖：
Image Not Showing Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →

程式碼風格及縮排

縮排：
- 預設的 Tab 就已是 4 個空白，所以不必再更動。
程式碼風格:
- Trunk Check
- astyle

色彩主題及圖示設定

這應該也是許多人很注重的一點 —— 自訂佈景主題！顏色不對，工作起來就渾身不對，來挑一個自己喜歡的環境吧！

開啟色彩主題設定選單
- 檔案
  $\to$ 喜好設定
  $\to$ 色彩佈景主題
- 開啟時的歡迎頁面右側點選 色彩佈景主題

開啟之後已有內建的多種選擇，若還是不喜歡，會引導你至 擴充套件 (Marketplace) 下載安裝。
在擴充套件點擊一下主題可以預覽套用後的樣子，如圖:

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

開啟圖示設定選單
- 檔案
  $\to$ 喜好設定
  $\to$ 檔案圖示佈景主題

一樣可以預覽，如圖：

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

快速鍵設定

能夠自訂慣用的快速鍵也是重要的！

預設的功能說明

安裝套件
若本來有慣用編輯器的人轉用 VS Code，可以直接在擴充套件找到套件！這樣就不用再改快速鍵的使用習慣囉~
有 Vim, Sublime, Atom, Emacs, Eclipse…
- 檔案
  $\to$ 喜好設定
  $\to$ 按鍵對應延伸模組
手動調整
設定檔一樣為 json 格式，且也是左欄為不可更動的預設值，右欄為使用者自訂
- 開啟設定檔
  - 檔案
    $\to$ 喜好設定
    $\to$ 鍵盤快速鍵

版本控制系統

還不熟悉 Git 的朋友，可參考Git 教學和 GitHub 設定指引。

請先自行安裝 Git 相關套件

遇進入 Git 畫面請點選選單 (A) 的第 4 個圖示，更新後圖示有變喔！如下圖：

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

開始！

在 GitHub 建立好遠端 repository 後，使用 clone 命令至本地端
$ git clone [repository-url]
使用 VS Code 開啟剛剛 clone 下來的目錄 (檔案
$\to$ 開啟目錄)
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 ： ...
$\to$ 復原上次認可
commit 訊息也可以打多行！按下 enter 換行就好

push

push : 點選 ...
$\to$ 推送
接下來就是標準流程的輸入 username, pwd
然後就成功囉！
可以在終端機下 $ git log 確認，或使用接著要介紹的況充套件查看

Git log

VS Code 也有許多好用的套件能讓使用者更加了解現今專案的狀態，不論是 branch 或歷史紀錄。透過圖形視覺化的呈現，更讓人一目了然。

這裡介紹 Git History(git log) 套件，請大家先裝好囉！
:warning: 要使用這個套件，當然要先開啟目標專案！

我們以剛剛的同一個專案為例，如要觀看整個 git log，請先按下 ctrl + shift + P 叫出 命令選擇區，可以把它視為 VS Code 的 command line，許多擴充套件也須經由這個地方下命令。

叫出命令列後打 >git h 就會出現幾個選項，如圖：

接著請選擇第二個 Git: View History (git log)
接著就可以看到以下畫面，清楚的呈現 git log，點選任一 commit 可以看到詳細訊息。
點選任一 commit 中有變更過的檔案甚至還可以與前一版本或本地端版本比對
下圖為與該 commit 前一版的比對

目前限制：
課堂上使用的 pre-commit git hook (檢查 commit message) 無法順利跑出結果

偵錯

預設的 debugger 為 Node.js, JavaScript, Typescript

若要有其他語言的 debugger 首先要到擴充套件區下載該語言的套件，此篇教學以 gdb 為主。

請先下載 Native debug 套件

進入 debug 環境

:warning: 記得要先編譯出執行檔！

直接按 F5，直接選擇要使用的 debugger，組態設定會直接開啟。
點選選單中的第 4 個圖示，由於還未設定任何組態，所以先按下「齒輪」，並選擇 GDB

組態設定檔

一樣是 json 格式，只需要改設定檔的 target (下圖中紅色框內)，改成執行檔的所在目錄就好，其他部份都已經自動設定好囉！

改好後記得存檔喔！

start debugging!

按下 綠色播放鍵，就開始 debug 囉！
開始後會開啟下方的 偵錯面板
程式執行後的輸出結果也會出現在此區
breakpoint
- 在行號旁邊點一下就設好 breakpoint，再點一下移除 breakpoint
- 對某個 breakpoint 點選右鍵可以選擇三種操作：移除、停用、編輯(可以設定條件式，當條件觸發時中斷點才作用)
- 中斷時如下圖
- 單步執行等操作在整個視窗上方
GDB 命令
VS Code 提供的 debugger 命令有限，但其他的 GDB 命令還是可以執行！！
在面板中的偵錯主控台最下方就是一個命令輸入列了！如下圖：
GDB 教學連結：
除錯程式: gdb

更新版本

VS Code 的更新速度很快，若有最新版本可以更新，打開 Code 的時候最上方會出現提醒訊息，如圖：

點下 立即下載
會導入更新包下載網頁
接著執行下列命令

# 注意`<file>` 的路徑
$ sudo dpkg -i <file>.deb
$ sudo apt-get update

更新完成！！
重新打開 VS Code 會顯示新版本資訊