WSL 搭配 Visual Studio Code (VSC)

0. 目錄

第一篇：WSL 原理介紹
第二篇：WSL 環境設定
第三篇：WSL 補充內容
第四篇：本篇

1. 安裝設置

1.1. 事前須知

市面上編輯器這麼多，為何要選 VSC？答案其實很簡單，因為 VSC 除了開源以及大量人員持續開發外，也提供內建的 git 和 debugger 的框架，同時在編輯中也提供了相當多便利的功能，以及不少擴充功能可供安裝。
筆者個人也很喜歡 VSC 在重大更新的時候，會詳列出更動的部分以及解說，同時在最後感謝各個協助開源的工程師們。

歡迎參考這篇一起服用~
Visual Studio Code

1.2. 下載 VSC

直接到官網下載最新版，切記不是 Visual Studio。

安裝過程中可以自己勾選喜愛的設定，下圖為筆者設定。

進到歡迎畫面後，一般應該會看到程式提示說找不到 Git，所以我們需要先在 Windows 安裝 Git。

1.3.安裝 Git

直接到官網下載最新版。

一開始的安裝選項我選擇不和檔案總管做整合，因為原生的 bash 和 GUI 實際上很少會用到。

接下來我選擇使用 VSC 作為 Git 的預設編輯器，不過這部分使用預設 Vim 也可以。

之後基本上一直按 Next 即可完成安裝，打開命令提示字元並輸入 git --version 檢查是否正常安裝。

由於使用 git 需要先輸入使用者資訊，所以請先照下面並修改成自己的資訊輸入。提醒一下這裡的 git 是給 VSC 用的，WSL 是使用自己獨立的 git，所以最好也在裡面輸入一次使用者資訊。

$ git config --global user.name "xxxxx"
$ git config --global user.email "[e-mail]"

輸入完後可以用 git config --list 檢查全域設定是否正確。

1.3. 環境設定

需要搜尋什麼指令，按下 Ctrl+Shift+P 開啟「命令選擇區」可以很方便查找，像是搜尋 icon 可以調整檔案總管裡檔案的圖示，搜尋 theme 則可以改變 VSC 整體主題配色。

2017 年 11 月更新，在命令提示字元裡輸入 code --status 可以看到 VSC 內部的資源使用狀況。

從「檔案 > 喜好設定 > 設定」或 Ctrl+, 進入使用者設定，這個檔案以筆者而言會位於以下路徑，要備份的話可以記起來。

C:\Users\使用者名稱\AppData\Roaming\Code\User\settings.json

在此提供一些設定範例，請依照自己喜愛去做調整，預設設定或使用者設定都可以直接按筆狀圖示修改。使用者設定比較偏全域設定，而工作區設定則可以個別獨立。

{
//編輯器
    // 控制字型家族，有空格的才要+'。
    "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 開啟的終端機變得相當美觀。

2018 年 2 月更新，可以分割整合式終端機以達到類 tmux 的功能，需要注意我們使用 zsh 主題的關係，調整大小不慎就會變成這樣，不過 WSL 很早就支援 tmux 了，自己可以衡量一下。

參考資料：User and Workspace Settings

7.安裝擴充功能

一般這些擴充功能是協助我們在開發中，對於 code 語法的自動建議或偵錯。

請先點擊左邊側邊欄最後一個，開啟擴充功能後，預設是會顯示熱門的擴充，安裝好的會顯示齒輪圖示。

基本上越多人安裝的可靠性越高，當然這部分也是看個人開發語言的偏好去安裝，若沒有特別的需求可以先考慮安裝下面所列的幾個功能，詳細說明也都可以在裡面看到。

• Python
• C/C++
• GitLens
• Git History
• Astyle (詳見下面)

8.安裝 Astyle

由於 VSC 有 Astyle 的擴充套件，再加上其在 C/C++、Java 的格式化提供相當多的選擇，對於程式碼的整理相當有幫助。在此會以 Windows 的搭配來介紹，在 WSL 裡也可以安裝 Astyle，但是不能被擴充功能支援。

到官網找到 Download 並安裝最新版

下載後請解壓縮到 C 槽 (或是任何你想要的位置)，記住這個位置。由於我們已經安裝了 Astyle 的擴充功能，在使用者設定裡應該會看到像下圖的選項。

以下是參考設定，請加在原本的使用者設定後面，執行路徑就是剛才解壓縮後放的位置再加上 /bin/AStyle.exe，後綴的引數可以根據官方文件選擇自己需要的。

//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。

使用Astyle

在此會先以以下很醜的範例 code 來說明。

#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 的提示。

接著按下右鍵選擇「文件格式化」(Shift+Alt+F)，一下就自動幫我們排版好了。

執行第一個程式

在這裡就先以 C 程式來解說，請先輸入以下指令安裝裝 gcc 和 g++。

$ sudo apt-get install build-essential

0. 綠底的部分是由於 VSC 在 Windows 環境無法找到這些標頭檔，但我們會透過 WSL 來執行，所以可以不用管。

1. 輸入 gcc -o test test.c 編譯後，檔案的更動都會在左邊欄位即時顯示

2. 輸入 ./test 執行

3. 結果如圖，可以看到即使檔案不是位於 Linux 用戶所熟知的根目錄等位置，WSL 依然可以正常辨識這些檔案
   

4. VSC 在編輯上提供了相當多的快捷鍵，想知道的可以點這裡，像是下圖利用 Ctrl+H 就可以開啟取代功能，或是直接使用 Ctrl+Shift+L 同時修改多處地方
   

   
   

5. 我們也可以透過 Ctrl+Shift+方向鍵 來選取程式碼片段
   

6. 再建一個測試的標頭檔如下
   

7. 回到原本的 .c 檔，像下圖這種提供自動建議的部分就是 VSC 所支援的 intellisence
   

8. VSC 還提供了 peek definition 的功能，按下 Alt+F12 可以直接在底下查看 function 或 class 的定義，直接按 F12 會直接跳轉至定義，或是按住 Ctrl 來查看。

(待補充) 由於我們 gcc 是在 WSL 裡，這些標頭檔尚無法透過 Windows 找到，所以自動建議和查找定義只能透過開啟的資料夾做關聯，如果是 Linux 的 OS 使用 VSC 一般就不會有這種困擾

9. VSC 還有不錯的快速註解功能

• Ctrl+/：Line comment
  
• Shift+Alt+A：Block comment
  

使用 Git

在這裡會簡單介紹在 VSC 裡使用 git，若要使用終端機等可以參考 git 新手入門教學或其他相關網站~

0. 先確定一下自己是否有 github 的帳號，以及是否有照前面章節設定好 git 使用者資訊
1. 這裡可以選擇先在 github 建立新的 repo 再 clone 下來，或是直接從現有檔案建立 repo 再 remote，就以和 WSL 搭配而言，前者會相對省事一些，以下是後者的說明。
2. 首先點擊左邊側邊欄的「原始檔控制」，下面的終端機可以先切換至「輸出 > Git」以方便觀察
   
3. 之後點擊左側的一個圖示「初始化儲存庫」，選擇資料夾後就會變成下圖這樣，同時資料夾裡會多了 .git 的隱藏資料夾

2017 的 10 月更新，可以直接在左側的檔案總管檢視 repo 的 git status，像是 modified 或 untracked 等。

4. 在左側變更那裏點擊一個加號「暫存所有變更」，當然也可以自己選擇哪些檔案要暫存，這等同於 git add 的部分，取消暫存只需按減號即可
   

5. 在訊息欄位填上自己的備註後就可以按下勾勾送出就結束了，這等同於 git commit 的部分

6. 這時可以用我們之前裝好的擴充功能，我們先回到檔案總管，左下角的「GITLENS」可以方便查看 repo 的資訊，而點擊右上的圖示「Git: View History」可以詳細看到自己每一次的 commit 的訊息與更動，最底下的狀態列也會有圖示表示
   

7. 由於我們現在都還算是在本地端，所以先到 github 建立一個新的 repo
   

8. 名稱請和本地端的資料夾名一致
   

9. VSC 裡面雖然有提供 clone 的介面，但卻沒有選項將本地端新建的丟上去，所以在此得用終端機來處理，首先把網站底下兩行指令記下
   

$ 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」，方便確保路徑相同
    
12. 把指令依序打上後會出現登入畫面 (WSL 會是文字介面輸入)
    
    
13. 登入後就完成 repo 的 remote 了
    
14. 去 github 上面也會發現東西都 push 上去了
    
15. 接下來試著增加一些東西再來按下勾勾 (commit) 一次，並透過 Git History 檢查。如果想要比較和上次的版本哪裡不一樣，點擊檔案查看即可，但需要在 commit 前
    
    
16. 如果 commit 完後想反悔，就點選旁邊的「復原上次認可」，在 push 前都還可以
    
17. 按下後就會回復上次 commit 之前的狀態，體驗過後還是重新 commit 吧
    
18. commit 完後請按下「推送」，就完成了 repo 的更新
    
19. 在右上角應該會發現多了一個圖示，在這裡可以概觀自己每次 commit 的部分
    
20. 回去刪減一點再次 push，這次回到檔案總管，透過 GITLENS 可以更明確找到每次變更的地方