如何在WSL下使用VS Code

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
本有由葡萄城技術團隊翻譯並整理

 

自微軟開始宣佈擁抱開源以來，我認爲微軟發佈的最棒的兩大功能是：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應用程序。