第一篇:WSL 原理介紹
第二篇:WSL 環境設定
第三篇:WSL 補充內容
第四篇:本篇
市面上編輯器這麼多,為何要選 VSC?答案其實很簡單,因為 VSC 除了開源以及大量人員持續開發外,也提供內建的 git 和 debugger 的框架,同時在編輯中也提供了相當多便利的功能,以及不少擴充功能可供安裝。
筆者個人也很喜歡 VSC 在重大更新的時候,會詳列出更動的部分以及解說,同時在最後感謝各個協助開源的工程師們。
歡迎參考這篇一起服用~
Visual Studio Code
直接到官網下載最新版,切記不是 Visual Studio。
安裝過程中可以自己勾選喜愛的設定,下圖為筆者設定。
進到歡迎畫面後,一般應該會看到程式提示說找不到 Git,所以我們需要先在 Windows 安裝 Git。
直接到官網下載最新版。
一開始的安裝選項我選擇不和檔案總管做整合,因為原生的 bash 和 GUI 實際上很少會用到。
接下來我選擇使用 VSC 作為 Git 的預設編輯器,不過這部分使用預設 Vim 也可以。
之後基本上一直按 Next 即可完成安裝,打開命令提示字元並輸入 git --version
檢查是否正常安裝。
由於使用 git 需要先輸入使用者資訊,所以請先照下面並修改成自己的資訊輸入。提醒一下這裡的 git 是給 VSC 用的,WSL 是使用自己獨立的 git,所以最好也在裡面輸入一次使用者資訊。
輸入完後可以用 git config --list
檢查全域設定是否正確。
需要搜尋什麼指令,按下 Ctrl
+Shift
+P
開啟「命令選擇區」可以很方便查找,像是搜尋 icon
可以調整檔案總管裡檔案的圖示,搜尋 theme
則可以改變 VSC 整體主題配色。
2017 年 11 月更新,在命令提示字元裡輸入
code --status
可以看到 VSC 內部的資源使用狀況。
從「檔案 > 喜好設定 > 設定」或 Ctrl
+,
進入使用者設定,這個檔案以筆者而言會位於以下路徑,要備份的話可以記起來。
在此提供一些設定範例,請依照自己喜愛去做調整,預設設定或使用者設定都可以直接按筆狀圖示修改。使用者設定比較偏全域設定,而工作區設定則可以個別獨立。
最重要的是在整合式終端機的部分,在第二章有提到幾個開啟 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
一般這些擴充功能是協助我們在開發中,對於 code 語法的自動建議或偵錯。
請先點擊左邊側邊欄最後一個,開啟擴充功能後,預設是會顯示熱門的擴充,安裝好的會顯示齒輪圖示。
基本上越多人安裝的可靠性越高,當然這部分也是看個人開發語言的偏好去安裝,若沒有特別的需求可以先考慮安裝下面所列的幾個功能,詳細說明也都可以在裡面看到。
由於 VSC 有 Astyle 的擴充套件,再加上其在 C/C++、Java 的格式化提供相當多的選擇,對於程式碼的整理相當有幫助。在此會以 Windows 的搭配來介紹,在 WSL 裡也可以安裝 Astyle,但是不能被擴充功能支援。
到官網找到 Download 並安裝最新版
下載後請解壓縮到 C 槽 (或是任何你想要的位置),記住這個位置。由於我們已經安裝了 Astyle 的擴充功能,在使用者設定裡應該會看到像下圖的選項。
以下是參考設定,請加在原本的使用者設定後面,執行路徑就是剛才解壓縮後放的位置再加上 /bin/AStyle.exe
,後綴的引數可以根據官方文件選擇自己需要的。
更多關於 VSC 小技巧可以參考台灣官方教學影片活用 Visual Studio Code。
在此會先以以下很醜的範例 code 來說明。
在剛才的測試資料夾裡新增一個 test.c
,並打上剛才的程式碼。
2018 年 1 月更新,可以在左側檔案總管看到 errors 和 warnings 的提示。
接著按下右鍵選擇「文件格式化」(Shift
+Alt
+F
),一下就自動幫我們排版好了。
在這裡就先以 C 程式來解說,請先輸入以下指令安裝裝 gcc 和 g++。
綠底的部分是由於 VSC 在 Windows 環境無法找到這些標頭檔,但我們會透過 WSL 來執行,所以可以不用管。
輸入 gcc -o test test.c
編譯後,檔案的更動都會在左邊欄位即時顯示
輸入 ./test
執行
結果如圖,可以看到即使檔案不是位於 Linux 用戶所熟知的根目錄等位置,WSL 依然可以正常辨識這些檔案
VSC 在編輯上提供了相當多的快捷鍵,想知道的可以點這裡,像是下圖利用 Ctrl
+H
就可以開啟取代功能,或是直接使用 Ctrl
+Shift
+L
同時修改多處地方
我們也可以透過 Ctrl
+Shift
+方向鍵
來選取程式碼片段
再建一個測試的標頭檔如下
回到原本的 .c
檔,像下圖這種提供自動建議的部分就是 VSC 所支援的 intellisence
VSC 還提供了 peek definition 的功能,按下 Alt
+F12
可以直接在底下查看 function 或 class 的定義,直接按 F12
會直接跳轉至定義,或是按住 Ctrl
來查看。
(待補充) 由於我們 gcc 是在 WSL 裡,這些標頭檔尚無法透過 Windows 找到,所以自動建議和查找定義只能透過開啟的資料夾做關聯,如果是 Linux 的 OS 使用 VSC 一般就不會有這種困擾
Ctrl
+/
:Line commentShift
+Alt
+A
:Block comment在這裡會簡單介紹在 VSC 裡使用 git,若要使用終端機等可以參考 git 新手入門教學或其他相關網站~
.git
的隱藏資料夾2017 的 10 月更新,可以直接在左側的檔案總管檢視 repo 的 git status,像是 modified 或 untracked 等。
在左側變更那裏點擊一個加號「暫存所有變更」,當然也可以自己選擇哪些檔案要暫存,這等同於 git add
的部分,取消暫存只需按減號即可
在訊息欄位填上自己的備註後就可以按下勾勾送出就結束了,這等同於 git commit
的部分
這時可以用我們之前裝好的擴充功能,我們先回到檔案總管,左下角的「GITLENS」可以方便查看 repo 的資訊,而點擊右上的圖示「Git: View History」可以詳細看到自己每一次的 commit 的訊息與更動,最底下的狀態列也會有圖示表示
由於我們現在都還算是在本地端,所以先到 github 建立一個新的 repo
名稱請和本地端的資料夾名一致
VSC 裡面雖然有提供 clone 的介面,但卻沒有選項將本地端新建的丟上去,所以在此得用終端機來處理,首先把網站底下兩行指令記下