愉快的使用 Windows 開發！WSL 安裝及前端開發環境配置

WSL 全稱爲 Windows Subsystem for Linux，是一個爲在 Windows 10 上可以原生運行 Linux 二進制可執行文件（ELF格式）的兼容層。微軟早在 16 年就推出了 WSL，前一陣更是發佈了 WSL 2.0，如今想必已經相對完善了。最近我在本身的 Windows 筆記本上安裝了 WSL 並進行了體驗，整體來講體驗很棒，下面是具體的內容。

---

2019.6.10 更新：

VS Code 發佈了 May 2019 (version 1.35)，如今 Remote Development 插件包能夠在穩定版的 VS Code 中使用了！

---

Windows Subsystem for Linux 有什麼用？跟虛擬機有什麼區別？

相對於虛擬機，Windows Subsystem for Linux 有如下優勢：

1. 性能更好。

   因爲實現更加底層，因此性能要比虛擬機好不少。

2. 與 Windows 共享的文件系統。

   子系統是能夠直接訪問硬盤中的全部文件的，甚至能夠執行 .exe 文件。

當前 Windows 有什麼問題？

Windows 雖然是應用最廣的桌面操做系統，可是在 web 開發領域，主流的選擇倒是 macOS。在前端方面，React Native 剛出的時候甚至無法在 Windows 下開發😓。用於 web 開發時，Windows 最主要的問題應該就是命令行工具了，Windows 下的 cmd 與 Linux 有不少不同的地方。好比前一陣本身在開發中就遇到了 Windows 與 Linux 的路徑書寫方式不一致問題：

www.howtogeek.com/137096/6-wa…

系統要求

安裝子系統要求 Windows 10 Fall Creators Update 及以後版本，從這個版本開始，子系統才正式對外發布，以前的版本須要打開開發者選項。

咱們能夠在設置中選擇系統—-關於-—Windows 規格，來查看 Windows 版本號，大於 16215 就能夠了：

安裝

WSL 的安裝已經十分簡單了。

首先，以管理員身份打開 PowerShell 並運行：

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
複製代碼

以後，在 Microsoft Store 搜索 Linux，安裝想要的 Linux 分發。

我這裏選擇的 Ubuntu，你能夠裝不少分發，並非只能安裝一個。

Microsoft Store 裝軟件十分簡單，只須要點一點就行了。以後開始菜單中就會出現 Ubuntu 的icon

點擊啓動！

使用

啓動後，第一次須要初始化較長時間，以後會讓設置一個系統的帳號密碼，和 Windows 的帳號密碼是有沒有關係，的能夠隨便設，但遺忘不能找回，須要注意。

啓動後就和使用虛擬機同樣的感受：

從子系統中是能夠直接訪問 Windows 路徑中的文件的，Windows 中的磁盤掛載在了 /mnt 目錄下。

跨平臺執行

子系統一個很強大的功能是能夠跨平臺執行，在 Linux 中執行 Windows 程序，在 Windows 中執行 Linux 程序。

Windows 執行 bash

在 Windows 命令行中，能夠直接使用 bash:

bash -c "sudo apt-get update"

bash 執行 windows

Linux 子系統中，只需在命令中加上 .exe 後綴，就能夠直接執行：

試了一下甚至能夠直接執行 chrome.exe，不過並無發現有什麼特殊的地方。

開發環境配置

安裝 oh-my-zsh

安裝 oh-my-zsh 和在 Mac 中是同樣的， 直接執行：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
複製代碼

安裝 Node.js

nvm 和 n 我沒有體驗出太大區別，我通常習慣使用 n 來管理 node 版本。node 的包管理在 Windows 上也有點複雜，雖然有 nvm-widnows 可是不很好用。

咱們直接在子系統中執行如下命令來安裝 n 和 Node.js：

curl -L https://git.io/n-install | bash
複製代碼

安裝 git

因爲是 Ubuntu，咱們能夠直接使用 apt 來安裝 git：

sudo apt install git
複製代碼

VS Code 體驗

開發環境，離不開代碼編輯器。如今咱們已經能夠作到命令行工具運行在 Linux 下了，接下來要作的就是讓 VS Code 適配 WSL。

在以前的版本，不少人試過各類辦法：

• 把 VS Code 的默認 terminal 改爲 wsl.exe，但 VS Code 集成的 Git 工具仍是運行在 Windows 中的。
• 直接在 WSL 中打開 VS Code，過程十分複雜，坑也不少。

幸運的是如今已經不須要這些複雜的操做了！在 VS Code 的 insider 版本中，已經支持了 Remote Development with VS Code，Remote Development 功能可讓咱們流暢的在 WSL 中進行開發。

首先咱們須要在 Windows 側安裝 Visual Studio Code Insiders：code.visualstudio.com/insiders/，安裝過程當中記獲得勾選上 添加到PATH 選項，不然咱們不能直接經過code-insiders命令開啓 VS Code。

以後就能夠在 WSL 中打開項目目錄，經過 code-insiders . 打開 VS Code。第一次打開時須要安裝一些依賴：

打開後能夠看到在項目目錄名後會增長 [WSL] 字樣：

打開命令行試試，已是在 WSL 環境中了：

爲了使用方便，咱們把默認 terminal 從 bash 改爲 zsh，在 VS Code 的選項中修改：

如今 terminal 已是 zsh 了：

在 WSL 中進行開發

咱們用 node 打印一下項目路徑試試，能夠看到路徑問題沒有了🎉：

後記

雖然 macbook 十分高大上，但我仍是一直但願能用 Windows 進行開發，一個最直接的緣由是 mac 實在是太貴了😓，錢不花夠，性能會比 PC 差不少。如今用的 MacBook Pro：

CPU 實在是不給力。

正在變成開源公司的微軟如今對開發者愈來愈重視了，對你們來講真是個好消息。

相關文章

1. Windows Subsystem for Linux Overview
2. Announcing WSL 2
3. Awesome-WSL
4. Setting Up Windows for Web Development
5. Remote Development with VS Code
6. Developing in WSL