如何在WSL下使用VS Code

摘要： 轉載請註明出處： 葡萄城官網 ，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 本有由葡萄城技術團隊翻譯並整理 自微軟開始宣佈擁抱開源以來，我認為微軟釋出的最棒的兩大功能是：Visual Studio Code（VS Code）和Windows子系統Linux（WS...

轉載請註明出處： 葡萄城官網 ，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

本有由葡萄城技術團隊翻譯並整理

自微軟開始宣佈擁抱開源以來，我認為微軟釋出的最棒的兩大功能是：Visual Studio Code（VS Code）和Windows子系統Linux（WSL），有了這兩者的結合，它為軟體開發人員開闢了一條新的編寫程式碼的途徑。

WSL使開發人員能夠在Windows 10上執行Linux環境，而無需付出更多使用虛擬機器時的開銷。使用WSL，我們可以從Windows應用商店上安裝大多數Linux正式版，我們甚至還能在其GUI上執行Bash shell指令碼和Linux應用程式。

本文提供了詳細的WSL配置分步說明，便於我們能夠通過WSL在Linux上執行VS Code。雖然本文的標題是《 在WSL下使用VS Code》，但也同樣適用於其他GUI應用程式。

本文中使用的軟體包括：

• Windows 10 1809
• Ubuntu 18.04
• Visual Studio Code 1.30.2
• MebaXTerm 11.1

本文目錄：

• 啟用WSL
• 安裝Linux
• 下載並安裝MobaXterm
• 啟動MobaXterm並開啟X Server
• 在已安裝的Linux上安裝X Client
• 啟動VS Code

除了Windows 10和VS Code之外，我們還需要X Server和X Client來使VS Code與WSL協同工作。

在Linux的世界中， X Window System扮演著為構建GUI環境必要的基本框架角色。 X Window System使用客戶端 - 伺服器模型，已實現與遠端計算機以圖形介面連線。 因此，要使用我們的本地計算機（例如膝上型電腦）連線到遠端Linux計算機，我們需要：

• 在遠端Linux機器上執行X Client應用程式
• 在本地計算機上執行X Server應用程式

遠端X客戶端與本地X伺服器建立連線並提供該應用程式的圖形介面。所以使用此技術，就可以使用WSL執行VS Code。

X Server為我們提供了我們要執行的圖形環境，由於WSL的Bash不支援X Server，因此通過選型在這裡我選擇了配置更為簡單的MobaXterm。

開啟WSL功能

在我們安裝Linux發行版之前，我們需要啟用WSL。 為此，首先在搜尋欄上輸入“開啟或關閉Windows功能”。

然後在開啟的視窗勾選 “WSL”

單擊“確定”按鈕後，我們可能需要重啟機器。

現在，我們在Windows 10上啟用了WSL。

（有關WSL的更多詳細資訊，請訪問https://docs.microsoft.com/en-us/windows/wsl/install-win10）

安裝Linux（Ubuntu）

如果啟用了WSL功能，那麼我們就可以將Linux安裝到Windows 10上了。

在Windows應用商店搜尋Ubuntu。

安裝完成後啟動

啟動Ubuntu後，請按照說明建立使用者帳戶。

Ubuntu全部配置完成後，我們繼續安裝MobaXterm

安裝並設定MobaXterm

首選我們從官網下載MobaXterm，他們官網提供了綠色版和安裝版兩種版本。選哪個看個人喜好，實際使用上區別不大，我這裡使用的是綠色版。解壓完成後啟動程式，點選啟動X Server（如下圖）

而後，X Server就啟動了。

配置X Client

如開頭所述，X Client是我們想要遠端訪問的應用程式。在本文裡，這個應用程式是VS Code。 為此，請按照以下步驟操作：

1. 啟動命令提示符
2. 在命令提示符下，鍵入bash以進入Ubuntu bash。
   
3. 輸入命令 $ export DISPLAY=localhost:0.0. 我們也可以在 ~/.bashrc新增這個命令, 這樣我們每次登入時就都不需要再重複這樣的工作了<g class="gr_ gr_9 gr-alert gr_tiny gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="9" data-gr-id="9">in.

export DISPLAY=localhost:0.0 告訴X Client應用程式的具體IP資訊，因為我們在本機執行該命令，所以使用的是localhost，如果你使用的是遠端計算機，請改掉localhost部分

安裝VS Code

現在，我們可以下載VS Code並安裝到Ubuntu上。在這我們使用Firefox下VS Code，這能再之後減少很多麻煩。

命令如下：

$ sudo apt update

$ sudo apt install firefox

啟動Firefox以下載VS Code

下載的VS Code Debian軟體包應該位於 ~/Download.目錄內

$ cd ~/Download

$ sudo dpkg -i code_1.30.2-1546901646_amd64.deb

注：如果因為一些依賴問題而導致安裝失敗，請先安裝依賴庫，如下：

$ sudo dpkg -i code_1.30.2-1546901646_amd64.deb

Selecting previously unselected package code.

(Reading database ... 42604 files and directories currently installed.)

Preparing to unpack code_1.30.2-1546901646_amd64.deb ...

Unpacking code (1.30.2-1546901646) ...

dpkg: dependency problems prevent configuration of code:

 code depends on libnotify4; however:

Package libnotify4 is not installed.

 code depends on libnss3 (>= 2:3.26); however:

Package libnss3 is not installed.

 code depends on libxkbfile1; however:

Package libxkbfile1 is not installed.

 code depends on libgconf-2-4; however:

Package libgconf-2-4 is not installed.

 code depends on libsecret-1-0; however:

Package libsecret-1-0 is not installed.

 code depends on libxss1; however:

Package libxss1 is not installed.

 

dpkg: error processing package code (--install):

 dependency problems - leaving unconfigured

Processing triggers for mime-support (3.60ubuntu1) ...

Errors were encountered while processing:

 code

安裝依賴庫

sudo apt install libnotify4 libnss3 libxkbfile1 libgconf-2-4 libsecret-1-0 libgtk-3-0 libxss1

如果出現如下錯誤，請嘗試sudo apt -fix-broken install命令重新安裝

Reading package lists... Done

Building dependency tree

Reading state information... Done

libgtk-3-0 is already the newest version (3.22.30-1ubuntu1).

libgtk-3-0 set to manually installed.

You might want to run 'apt --fix-broken install' to correct these.

The following packages have unmet dependencies:

 libgconf-2-4 : Depends: gconf2-common (= 3.2.6-4ubuntu1) but it is not going to be installed

Recommends: gconf-service but it is not going to be installed

 libnss3 : Depends: libnspr4 (>= 2:4.12) but it is not going to be installed

 libsecret-1-0 : Depends: libsecret-common but it is not going to be installed

E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).

安裝完成後，啟動VS Code。

$ code

注意：一旦我們啟動了VS Code，我們可能會無法移動或調整VS Code的視窗。這是因為自VS Code 1.30以來預設啟用了Linux上的自定義磁貼和選單欄。 為了能夠避免這一問題，我們需要將設定更改為native。

首先，開啟VS Code設定。[檔案 - >首選項 - >設定]

其次，在搜尋欄上鍵入title bar，然後選擇native。

重啟VS Code，現在我們應該已經可以移動和調整VS Code視窗和大小了。

結論

使用WSL和X Server，我們可以在Windows 10上安裝Linux並使用圖形介面執行Linux上的應用程式。 但是，這時候可能有人會問，我們為什麼要這樣做？ 為什麼不直接在Windows上使用VirtualBox或VMware等虛擬機器或者使用其他Linux機器？當然，大多數情況下這些方式沒有問題，但在某些個別情況下，這樣的方式並不適用。 例如：

• 沒有強大的工作站，執行虛擬機器會導致機器很慢。
• 沒有預算購買另一臺機器來執行Linux。
• 由於網路的延遲，在雲上執行帶有圖形介面的應用程式可能會很慢。

WSL提供了一種簡單而廉價的解決方案，我們可以在我們更熟悉的Windows 10環境中執行Linux和Linux應用程式。