---
tags: 環境設置
---
# **WSL 搭配 Visual Studio Code (VSC)**
## 0. 目錄
第一篇：[WSL 原理介紹](https://hackmd.io/s/Bkh8oAmGX)
第二篇：[WSL 環境設定](https://hackmd.io/s/BJByCIUHf)
第三篇：[WSL 補充內容](https://hackmd.io/s/SyL3pzzQm)
第四篇：本篇
## 1. 安裝設置
### 1.1. 事前須知
市面上編輯器這麼多，為何要選 VSC？答案其實很簡單，因為 VSC 除了開源以及大量人員持續開發外，也提供內建的 git 和 debugger 的框架，同時在編輯中也提供了相當多便利的功能，以及不少擴充功能可供安裝。
筆者個人也很喜歡 VSC 在重大更新的時候，會詳列出更動的部分以及解說，同時在最後感謝各個協助開源的工程師們。
歡迎參考這篇一起服用~
[Visual Studio Code](https://hackmd.io/s/rJPKpohsx)
### 1.2. 下載 VSC
直接到[官網](https://code.visualstudio.com/)下載最新版，切記不是 Visual Studio。
<img src="https://i.imgur.com/pDEmCKV.png" width=100%>
安裝過程中可以自己勾選喜愛的設定，下圖為筆者設定。
<img src="https://i.imgur.com/W6aGVzd.png" width=80%>
進到歡迎畫面後，一般應該會看到程式提示說找不到 Git，所以我們需要先在 Windows 安裝 Git。
<img src="https://i.imgur.com/dqIFbZ8.png" width=100%>
### 1.3.安裝 Git
直接到[官網](https://git-scm.com/)下載最新版。
<img src="https://i.imgur.com/rHL0zaT.png" width=100%>
一開始的安裝選項我選擇不和檔案總管做整合，因為原生的 bash 和 GUI 實際上很少會用到。
<img src="https://i.imgur.com/vIyxeSc.png" width=80%>
接下來我選擇使用 VSC 作為 Git 的預設編輯器，不過這部分使用預設 Vim 也可以。
<img src="https://i.imgur.com/ueDVeA0.png" width=80%>
之後基本上一直按 Next 即可完成安裝，打開命令提示字元並輸入 `git --version` 檢查是否正常安裝。
<img src="https://i.imgur.com/rBKZpsK.png" width=80%>
由於使用 git 需要先輸入使用者資訊，所以請先照下面並修改成自己的資訊輸入。提醒一下**這裡的 git 是給 VSC 用的**，**WSL 是使用自己獨立的 git**，所以最好也在裡面輸入一次使用者資訊。
```
$ git config --global user.name "xxxxx"
$ git config --global user.email "xxxxx@xxx.com"
```
輸入完後可以用 `git config --list` 檢查全域設定是否正確。
<img src="https://i.imgur.com/1kpre4y.png" width=90%>
<img src="https://i.imgur.com/CIOVmt7.png" width=90%>
### 1.3. 環境設定
需要搜尋什麼指令，按下 `Ctrl`+`Shift`+`P` 開啟「**命令選擇區**」可以很方便查找，像是搜尋 `icon` 可以調整檔案總管裡檔案的圖示，搜尋 `theme` 則可以改變 VSC 整體主題配色。
<img src="https://i.imgur.com/nqscMvA.png" width=100%>
> 2017 年 11 月更新，在命令提示字元裡輸入 `code --status` 可以看到 VSC 內部的資源使用狀況。
<img src="https://i.imgur.com/eYJSOJp.png" width=100%>
從「檔案 > 喜好設定 > 設定」或 `Ctrl`+`,` 進入**使用者設定**，這個檔案以筆者而言會位於以下路徑，要備份的話可以記起來。
```
C:\Users\使用者名稱\AppData\Roaming\Code\User\settings.json
```
在此提供一些設定範例，請依照自己喜愛去做調整，預設設定或使用者設定都可以直接按**筆狀圖示**修改。使用者設定比較偏**全域設定**，而工作區設定則可以個別獨立。
```jsx
{
//編輯器
// 控制字型家族，有空格的才要+'。
"editor.fontFamily": " 'Ubuntu Mono derivative Powerline' , 'monospace' ",
// 控制游標動畫樣式，可能的值為 'blink'、'smooth'、'phase'、'expand' 和 'solid'
"editor.cursorBlinking": "expand",
// 開啟檔案時，會依據檔案內容來偵測 `editor.tabSize` 及 `editor.insertSpaces`。
"editor.detectIndentation": false,
// 控制字型大小 (以像素為單位)。
"editor.fontSize": 18,
// 控制是否應在輸入時自動顯示建議
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
"editor.mouseWheelZoom": true,
// 控制編輯器是否會捲動到最後一行之後
"editor.scrollBeyondLastLine": false,
// 控制是否自動換行。可以是:
// - 'off' (停用換行),
// - 'on' (檢視區換行),
// - 'wordWrapColumn' (於 'editor.wordWrapColumn' 換行`) 或
// - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
"editor.wordWrap": "on",
// 當 `editor.wordWrap` 為 [wordWrapColumn] 或 [bounded] 時，控制編輯器中的資料行換行。
"editor.wordWrapColumn": 80,
// 指定在工作台中使用的圖示主題，或設定為 'null' 不顯示任何檔案圖示。
"workbench.iconTheme": "material-icon-theme",
//視窗
// 控制重新啟動後視窗重新開啟的方式。選取 [無] 一律以空白工作區開始、選取 [一] 從上一個編輯的視窗重新開啟、選取 [資料夾] 重新開啟所有資料夾曾經開啟的視窗，或選取 [全部] 重新開啟上一個工作階段的所有視窗。
"window.restoreWindows": "all",
//檔案
// 若啟用，將在儲存檔案時修剪尾端空白。
"files.trimTrailingWhitespace": true,
// 啟用時，請在儲存檔案時在其結尾插入最後一個新行。
"files.insertFinalNewline": false,
// 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
"files.trimFinalNewlines": true,
// 預設結尾斷行字元.LF使用 \n , CRLF使用\r\n
"files.eol": "\n",
// 控制已變更之檔案的自動儲存。接受的值: 'off'、'afterDelay、'onFocusChange' (編輯器失去焦點)、'onWindowChange' (視窗失去焦點)。若設為 'afterDelay'，可以在 "files.autoSaveDelay" 中設定延遲。
"files.autoSave": "onFocusChange",
//檔案總管
// 控制檔案與資料夾在總管中的排列順序。除了預設排序外，您也可以將順序設定為 'mixed' (檔案與資料夾)、'type' (依檔案類型)、'modified' (依最後修改日期) 或 'filesFirst' (將檔案排序在資料夾前)。
"explorer.sortOrder": "type",
//整合式終端機
// 控制終端機資料指標是否閃爍。
"terminal.integrated.cursorBlinking": true,
// 控制終端機資料指標的樣式。
"terminal.integrated.cursorStyle": "line",
// 控制終端機的字型大小 (以像素為單位)
"terminal.integrated.fontSize": 18,
// 終端機在 Windows 上使用的殼層路徑。使用隨附於 Windows 的殼層 (cmd、PowerShell 或 Bash on Ubuntu) 時。
"terminal.integrated.shell.windows": "wsl.exe",
}
```
最重要的是在整合式終端機的部分，在第二章有提到幾個開啟 WSL 的方法，為了方便直接導向到使用者目前位置，所以在此選擇 `wsl.exe`，他會幫我們以預設的 shell (zsh) 開啟。
若使用 `bash.exe` 或 `ubuntu.exe`，則需要加上 `"terminal.integrated.shellArgs.windows": ["-c", "zsh"]`。
透過 VSC「檔案 > 選擇資料夾」開啟想要測試的資料，再開啟「檢視>**整合式終端機**」(`Ctrl`+` )，可以看到兩者路徑是相同的，而且透過 VSC 開啟的終端機變得相當美觀。
<img src="https://i.imgur.com/YXXTWUC.png" width=100%>
> 2018 年 2 月更新，可以分割整合式終端機以達到類 tmux 的功能，需要注意我們使用 zsh 主題的關係，調整大小不慎就會變成這樣，不過 WSL 很早就支援 tmux 了，自己可以衡量一下。
<img src="https://i.imgur.com/aK6kv9i.png" width=100%>
參考資料：[User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings)
### 7.安裝擴充功能
一般這些擴充功能是協助我們在開發中，對於 code 語法的自動建議或偵錯。
請先點擊左邊側邊欄最後一個，開啟擴充功能後，預設是會顯示熱門的擴充，安裝好的會顯示齒輪圖示。
<img src="https://i.imgur.com/oFzmDSm.png" width=100%>
基本上越多人安裝的可靠性越高，當然這部分也是看個人開發語言的偏好去安裝，若沒有特別的需求可以先考慮安裝下面所列的幾個功能，詳細說明也都可以在裡面看到。
* Python
* C/C++
* GitLens
* Git History
* Astyle (詳見下面)
### 8.安裝 Astyle
由於 VSC 有 Astyle 的擴充套件，再加上其在 C/C++、Java 的格式化提供相當多的選擇，對於程式碼的整理相當有幫助。在此會以 Windows 的搭配來介紹，在 WSL 裡也可以安裝 Astyle，但是不能被擴充功能支援。
到[官網](http://astyle.sourceforge.net/)找到 Download 並安裝最新版
<img src="https://i.imgur.com/AyFITLO.png" width=100%>
下載後請解壓縮到 C 槽 (或是任何你想要的位置)，記住這個位置。由於我們已經安裝了 Astyle 的擴充功能，在使用者設定裡應該會看到像下圖的選項。
<img src="https://i.imgur.com/Z5u80E3.png" width=60%>
以下是參考設定，請加在原本的使用者設定後面，執行路徑就是剛才解壓縮後放的位置再加上 `/bin/AStyle.exe`，後綴的引數可以根據[官方文件](http://astyle.sourceforge.net/astyle.html)選擇自己需要的。
```jsx
//Astyle
// astyle executable path
"astyle.executable": "C:/AStyle/bin/AStyle.exe",
// array of command line options
"astyle.cmd_options": [
"--style=java", //-A2
"--max-code-length=80", //-xC
"--indent=spaces=4", //-s
"--indent-classes", //-C
"--indent-switches", //-S
"--indent-after-parens", //-xU
"--indent-col1-comments", //-Y
"--pad-oper", //-p
"--pad-comma", //-xg
"--unpad-paren", //-U
"--align-pointer=name", //-k3
"--align-reference=name", //-W3
"--break-closing-braces", //-y
"--break-one-line-headers", //-xb
"--remove-braces", //-xj
"--break-after-logical", //-xL
"--suffix=none", //-n
"--convert-tabs" //-c
]
```
### 9.執行第一個程式與一些小技巧
更多關於 VSC 小技巧可以參考台灣官方教學影片[活用 Visual Studio Code](https://channel9.msdn.com/Series/Mastering-Visual-Studio-Code)。
#### 使用Astyle
在此會先以以下很醜的範例 code 來說明。
```clike=
#include <stdio.h>
#include <stdlib.h>
int main( )
{int i=1,j=2,k=3;
printf("num1:%d\n",i);
printf("num2:%d\n",j);
printf("num3:%d\n",k);
if( i==1 && j< k){
printf("true~\n");
}
else
{printf("false~\n");}
return 0;
}
```
在剛才的測試資料夾裡新增一個 `test.c`，並打上剛才的程式碼。
> 2018 年 1 月更新，可以在左側檔案總管看到 errors 和 warnings 的提示。
<img src="https://i.imgur.com/nqBQ5fP.png" width=100%>
接著按下右鍵選擇「文件格式化」(`Shift`+`Alt`+`F`)，一下就自動幫我們排版好了。
<img src="https://i.imgur.com/ThXfdA4.png" width=100%>
#### 執行第一個程式
在這裡就先以 C 程式來解說，請先輸入以下指令安裝裝 gcc 和 g++。
```
$ sudo apt-get install build-essential
```
0. 綠底的部分是由於 VSC 在 Windows 環境無法找到這些標頭檔，但我們會透過 WSL 來執行，所以可以不用管。
1. 輸入 `gcc -o test test.c` 編譯後，檔案的更動都會在左邊欄位即時顯示
2. 輸入 `./test` 執行
3. 結果如圖，可以看到即使檔案不是位於 Linux 用戶所熟知的根目錄等位置，WSL 依然可以正常辨識這些檔案
<img src="https://i.imgur.com/EUYT2aQ.png" width=100%>
4. VSC 在編輯上提供了相當多的快捷鍵，想知道的可以點[這裡](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)，像是下圖利用 `Ctrl`+`H` 就可以開啟取代功能，或是直接使用 `Ctrl`+`Shift`+`L` 同時修改多處地方
<img src="https://i.imgur.com/adcAsCk.png" width=100%>
<img src="https://i.imgur.com/pQy9sDi.png" width=100%>
5. 我們也可以透過 `Ctrl`+`Shift`+`方向鍵` 來選取程式碼片段
<img src="https://i.imgur.com/S4Ps3ES.png" width=100%>
6. 再建一個測試的標頭檔如下
<img src="https://i.imgur.com/k1CcsoP.png" width=100%>
7. 回到原本的 `.c` 檔，像下圖這種提供自動建議的部分就是 VSC 所支援的 intellisence
<img src="https://i.imgur.com/aUCZR5l.png" width=100%>
8. VSC 還提供了 peek definition 的功能，按下 `Alt`+`F12` 可以直接在底下查看 function 或 class 的定義，直接按 `F12` 會直接跳轉至定義，或是按住 `Ctrl` 來查看。
> (待補充) 由於我們 gcc 是在 WSL 裡，這些標頭檔尚無法透過 Windows 找到，所以自動建議和查找定義只能透過開啟的資料夾做關聯，如果是 Linux 的 OS 使用 VSC 一般就不會有這種困擾
<img src="https://i.imgur.com/cj01Kwk.png" width=100%>
9. VSC 還有不錯的快速註解功能
* `Ctrl`+`/`：Line comment
<img src="https://i.imgur.com/TcLYchC.png" width=100%>
* `Shift`+`Alt`+`A`：Block comment
<img src="https://i.imgur.com/V2IqZuG.png" width=100%>
#### 使用 Git
在這裡會簡單介紹在 VSC 裡使用 git，若要使用終端機等可以參考 [git 新手入門教學](https://hellolynn.hpd.io/2017/01/18/git新手入門教學-part-1/)或其他相關網站~
0. 先確定一下自己是否有 [github](https://github.com/) 的帳號，以及是否有照前面章節設定好 git 使用者資訊
1. 這裡可以選擇先在 github 建立新的 repo 再 clone 下來，或是直接從現有檔案建立 repo 再 remote，就以和 WSL 搭配而言，前者會相對省事一些，以下是後者的說明。
2. 首先點擊左邊側邊欄的「原始檔控制」，下面的終端機可以先切換至「輸出 > Git」以方便觀察
<img src="https://i.imgur.com/CFnviIU.png" width=100%>
3. 之後點擊左側的一個圖示「初始化儲存庫」，選擇資料夾後就會變成下圖這樣，同時資料夾裡會多了 `.git` 的隱藏資料夾
> 2017 的 10 月更新，可以直接在左側的檔案總管檢視 repo 的 git status，像是 modified 或 untracked 等。
<img src="https://i.imgur.com/BifO1GI.png" width=100%>
4. 在左側變更那裏點擊一個加號「暫存所有變更」，當然也可以自己選擇哪些檔案要暫存，這等同於 `git add` 的部分，取消暫存只需按減號即可
<img src="https://i.imgur.com/M6QYZB8.png" width=40%>
5. 在訊息欄位填上自己的備註後就可以按下勾勾送出就結束了，這等同於 `git commit` 的部分
6. 這時可以用我們之前裝好的擴充功能，我們先回到檔案總管，左下角的「GITLENS」可以方便查看 repo 的資訊，而點擊右上的圖示「Git: View History」可以詳細看到自己每一次的 commit 的訊息與更動，最底下的狀態列也會有圖示表示
<img src="https://i.imgur.com/CycPpPi.png" width=100%>
7. 由於我們現在都還算是在本地端，所以先到 github 建立一個新的 repo
<img src="https://i.imgur.com/kejjWMH.png" width=50%>
8. 名稱請和本地端的資料夾名一致
<img src="https://i.imgur.com/8kdF4lT.png" width=100%>
9. VSC 裡面雖然有提供 clone 的介面，但卻沒有選項將本地端新建的丟上去，所以在此得用終端機來處理，首先把網站底下兩行指令記下
<img src="https://i.imgur.com/e0GcpgX.png" width=100%>
```
$ git remote add origin https://github.com/xxxxxx/test.git
$ git push -u origin master
```
10. 因為這裡都是連結在同一個資料夾位置，終端機可以選擇要透過 Windows 還是 WSL 來 remote，但若 repo 是位於 WSL 裡，因為檔案系統的關係就只能使用 WSL，再注意一下兩者的使用者資訊都一樣即可
11. (WSL 直接從步驟 12 開始) 開啟資料夾並點擊「檔案 > 開啟 Windows PowerShell」，方便確保路徑相同
<img src="https://i.imgur.com/eFuL36n.png" width=100%>
12. 把指令依序打上後會出現登入畫面 (WSL 會是文字介面輸入)
<img src="https://i.imgur.com/JaclHDL.png" width=100%>
<img src="https://i.imgur.com/eLAJt88.png" width=50%>
13. 登入後就完成 repo 的 remote 了
<img src="https://i.imgur.com/BzKsYc9.png" width=100%>
14. 去 github 上面也會發現東西都 push 上去了
<img src="https://i.imgur.com/3OsB0xQ.png" width=100%>
15. 接下來試著增加一些東西再來按下勾勾 (commit) 一次，並透過 Git History 檢查。如果想要比較和上次的版本哪裡不一樣，點擊檔案查看即可，但需要在 commit 前
<img src="https://i.imgur.com/TKOlNb9.png" width=100%>
<img src="https://i.imgur.com/Um1TH70.png" width=100%>
16. 如果 commit 完後想反悔，就點選旁邊的「復原上次認可」，在 push 前都還可以
<img src="https://i.imgur.com/GWjhsxU.png" width=60%>
17. 按下後就會回復上次 commit 之前的狀態，體驗過後還是重新 commit 吧
<img src="https://i.imgur.com/G2pfL9a.png" width=100%>
18. commit 完後請按下「推送」，就完成了 repo 的更新
<img src="https://i.imgur.com/uzPMi86.png" width=60%>
19. 在右上角應該會發現多了一個圖示，在這裡可以概觀自己每次 commit 的部分
<img src="https://i.imgur.com/XGJH4d3.png" width=100%>
20. 回去刪減一點再次 push，這次回到檔案總管，透過 GITLENS 可以更明確找到每次變更的地方
<img src="https://i.imgur.com/oc4DQ8z.png" width=100%>
Sign in with Wallet
Connect another wallet