前言

這篇文章是面向那些想要使用命令列開發，卻又不想放棄 windows 的童鞋

工作這幾年，雖然也有在伺服器上用 vim 開發的經驗，但是個人的工作環境一直是 windows，要說為什麼，一個是不太喜歡 Mac 稍顯封閉的風格（Linux 就不說了，軟體太少），再一個這幾年 windows 也在不斷的改善自己，使自己的產品變得更加方便好用，我喜歡這種不斷改變嘗試的風格，可能也是情懷的一種吧

為了使自己的工作環境更加方便，前後使用了 git bash , cygwin 等模擬 linux 命令列的工具，但都有這樣那樣的問題，直到前不久 windows 更新發布了 windows 子系統 WSL(Windows Subsystem for Linux) ，這是微軟面向開發者的又一次嘗試，畢竟是一個完整的 linux 系統，命令列的體驗上比模擬器不知道高到哪裡去了，因此我看好這個系統，也將自己的工作中心遷移到 WSL 裡，在這裡給大家分享一下，希望還堅持在 windows 下的前端er能通過這篇文章打造出自己心目中理想的工作站

1. 安裝 WSL

1.1 開啟 WSL 功能

首先需要在 windows 的 [ 啟用或關閉 Windows 功能 ] 中開啟 [ 適用於 Linux 的 Windows 子系統 ]

1.2 下載 Linux

去應用商店搜尋 Linux 就會看到目前提供的三個 Linux 子系統，在這裡我選擇了經典的 Ubuntu

進入詳情頁點選下載即可（少見的4星評分，呵呵）

下載完成後可以將其固定在開始螢幕，啟動後，Linux 系統還需要繼續安裝一段時間，在設定你的使用者名稱與密碼之後就可以正常使用了

2. 改善模擬器（wsl-terminal）

用過一段時間後你就會發現，預設的終端實在是醜，也不支援256色，而終端的配置選項又很有限，不用擔心，有很多替代的終端工具，例如：wsl-terminal，cmder 等等，在這裡我選擇了 wsl-terminal

2.1 下載 wsl-terminal

goreliu.github.io/wsl-termina…

2.2 解壓到任意目錄，官方宣告必須是 NTFS 分割槽的目錄

2.3 執行 open-wsl.exe 即可開啟命令列

2.3 更多操作

在 wsl-terminal 目錄裡的 tools 目錄有很多實用的工具，例如

• add-open-wsl-terminal-here-menu.js

  可以在右鍵資源管理器裡新增一個快捷方式，開啟命令列並進入到當前目錄

• create-start-menu-shortcut-login-shell.js

  在開始選單建立一個快捷方式，通過該快捷方式開啟的命令列自動進入 Linux 子系統的家目錄

在命令列的視窗右鍵選擇選項，可以看到命令列顯示的更多配置，也可以更改主題，字型大小等，例如，我將主題改為

那麼當前的命令列視窗效果如下

看起來要好點了，如果想要 DIY 更騷的命令列，可以使用 ZSH ，配合 oh-my-zsh 一起使用，這裡就不多講了，具體可以谷歌

當安裝 tools 裡的工具時，如果用 IDE 關聯了 js 檔案，會彈出以下錯誤提示

需要將 js 預設開啟方式關聯為 Windows Based Script Host，有兩種方式如下：

• 【設定】 - 【預設應用】 - 【按檔案型別指定的預設應用】（這個方法我試了對我沒有效果，不知道是否需要重啟）
• 直接修改登錄檔，定位到 \ HKEY_CLASSES_ROOT \ .js，修改預設的數值資料為 JSFile

  

  然後雙擊即可執行 tools 工具

3. 像 Linux 一樣搭建工作環境

3.1 安裝 nginx

我們按照官方的安裝方式一步步來 nginx: Linux packages

• 下載一個 key 儲存在本地，命名為 nginx_signing.key

• 新增上一步儲存的 key

  sudo apt-key add nginx_signing.key
  複製程式碼

• 新增源，將下面兩行程式碼新增到檔案 /etc/apt/sources.list 中

  deb http://nginx.org/packages/ubuntu/ codename nginx
  deb-src http://nginx.org/packages/ubuntu/ codename nginx
  複製程式碼

  這裡需要將最後兩行的 codename 替換為特定的名稱，這個名稱是根據 Linux 系統和版本來定的，具體列表可以參見 這裡

  我的系統和版本是 Ubuntu 16.04 ，因此我需要把 codename 替換為 xenial，因此新增的具體程式碼為，別忘了用 sudo

  deb http://nginx.org/packages/ubuntu/ xenial nginx
  deb-src http://nginx.org/packages/ubuntu/ xenial nginx
  複製程式碼

• 更新 apt 並安裝

  sudo apt-get update
  sudo apt-get install nginx
  複製程式碼

3.2 安裝 nodejs

官方推薦使用 nvm 來安裝及更新 nodejs 版本，因此我們先來安裝 nvm（Node Version Manager）

• 執行如下命令，執行結果會在你的家目錄下的 .bashrc 檔案裡新增幾行程式碼用於配置 nvm

  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
  複製程式碼

• 重啟你的命令列

• 安裝 nodejs，如下命令將會安裝最新版（stable）的 nodejs，更多命令可以去官網檢視

  nvm install node
  複製程式碼

  仔細觀察的話，可以看出 nvm 下載了 nodejs 原始碼並且編譯安裝到了本地的家目錄裡 ~/.nvm，這樣有個好處是安裝全域性的 nodejs 包也會安裝在家目錄裡，防止使用全域性命令時還得 sudo

3.3 更新 Git

預設安裝後會自帶一個 git ，但是版本過舊，按照官方的辦法更新一下即可

Download for Linux and Unix

• 執行如下命令

  sudo add-apt-repository ppa:git-core/ppa
  sudo apt update
  sudo apt install git
  複製程式碼

4. 和 IDE 配合起來

經過上面的步驟，基本命令列工作空間已經搭建起來了，但是我們肯定不能就這麼在命令列裡寫程式碼，最後還是要回歸到 IDE 裡面來，那麼這就有個很嚴峻的問題了，雖然 Linux 系統在 windows 下可以執行的很完美了，但說到底還是兩個系統，他們的檔案型別不同，許可權系統也天差地別

我曾經天真的通過 IDE 直接開啟 WSL 下的專案，是的，你可以在 windows 檔案資源管理器 裡找到 WSL 下的所有檔案，也可以在 IDE 裡開啟並編輯，但是之後的事情是個災難：整個專案的檔案許可權被更改、新新增的檔案在 WSL 下無法展示，甚至 git 命令也因為奇怪的許可權問題而不可用了

所以沒辦法了嗎？ 辦法還是有的，不過路子比較野

還記得10年前（可能沒那麼遠 = =!）我們都在用 windows 系統，而伺服器都是 遠端 Linux 系統，那時沒有現在這麼流行的 MacOS ，我們是怎麼用 IDE 程式設計的呢，沒錯，FTP 或者 SFTP，那我們可不可以換個思路，通過 SFTP 或者 FTP 連線到我們本地的 WSL 呢，答案是肯定的，而且我認為目前只有這麼一種方法能夠很好的和 WSL 結合起來使用

2018年9月21日更新

在一次查詢 VSCode 選項過程中（是的，我打算放棄 webstorm），我發現了廣大勞動人民的偉大功績，沒錯，現在可以在 WSL 中使用圖形化介面，那麼我們也可以直接使用 Linux 下的 IDE 來直接開發，這無疑讓我們更加接近原生 Linux 開發，也預示著 windows 即將成為最受歡迎的 Linux 發行版（滑稽）

4.1 通過 Linux 下的 IDE 進行開發（推薦）

4.1.1 安裝 X-Server

簡單的說這個東西就是用於把遠端的 Linux 圖形展示在本地，當然這裡我們展示的是本地的 Linux

這裡我選擇的客戶端是 VcXsrv

其他的客戶端也可以，但是有的是缺少後續更新，有的需要費用，這裡就不一一列舉了

• 點選上面的連結，一路下一步安裝好即可

  

• 啟動 VcXsrv

  全部預設選項即可

  

4.1.2 配置 WSL

• 在 .bashrc 中新增環境變數

  export DISPLAY=:0.0

• 重啟命令列或者執行

  source .bashrc

• 測試是否可以展示圖形介面

  sudo apt install x11-apps -y && xeyes

  能看到如下眼睛圖形即可

  

  這個 x11 算是最初的視窗圖形介面，基本所有的 Unix 都支援，在這裡我們只是用他來檢測一下 WSL 是否已經具有了輸出圖形的能力

4.1.3 安裝 Linux 版的 VSCode

• 這裡我使用 64 位 .deb 檔案安裝

  下載地址 VSCode-64bit.deb

• 複製檔案到 WSL 並安裝

  cp /mnt/c/Users/path/to/download/code_1.27.2-1536736588_amd64.deb ./
  ## 安裝依賴
  sudo apt install libnotify4 libnss3 libgconf-2-4 libsecret-1-0 libgtk2.0-0 libxss1 libasound2 -y
  sudo dpkg -i ./code_1.27.2-1536736588_amd64.deb
  複製程式碼

• 執行 VSCode

  code

  稍微等一會，即可看到 VSCode 介面！

  

4.1.4 解決中文輸入法問題

• 安裝中文字型

  首先，如果你程式碼裡有中文，你會發現全是亂碼，怎麼辦呢，是因為你的 WSL 裡沒有中文字型支援，所以需要安裝中文字型

  sudo apt-get install fonts-wqy-microhei fonts-wqy-zenhei xfonts-wqy

• 安裝輸入法

  雖然在命令列裡可以直接輸入中文，但是圖形介面裡還是需要切換中文輸入法來輸入，所以需要安裝輸入法，這裡我用的是 fcitx 與 谷歌輸入法

  sudo apt-get --assume-yes install fcitx fcitx-googlepinyin dbus-x11

  用命令列啟動 fcitx

  fcitx

  如果需要在命令列啟動的時候啟動輸入法，在 .bashrc 檔案中新增如下程式碼

  if [ $(ps -ax | grep dbus-daemon | wc -l) -eq 1 ]; then
     dbus-launch fcitx > /dev/null 2>&1
  fi   
  複製程式碼

  如果啟動 fcitx 時報如下錯誤

    D-Bus library appears to be incorrectly set up; failed to read machine uuid: UUID file '/etc/machine-id' should contain a hex string of length 32, not length 0, with no other text
  複製程式碼

  則使用如下命令

  sudo dbus-uuidgen --ensure

• 調整快捷鍵

  接下來需要調整一下快捷鍵位設定，不能和 windows 的輸入法鍵位衝突

  • fcitx-configtool

    執行之後會看到一個設定介面

    

  • 選擇 Global Config

    

    這裡我把第一行切換輸入法的設定改為了 左 Ctrl 鍵位，和 windows 的 Shift 鍵位有所區別

    如果開啟設定介面沒有找到谷歌中文輸入法，可以用左下角+號新增進來

    

  成功安裝後使用 VSCode 的介面

  

總結

至此，直接在 wsl 內使用 VSCode 開發就基本完成了，接下來一些配置項和其他平臺的並無區別，也可以直接用 VSCode 執行命令、打斷點等一系列複雜操作了，唯一的問題是在某些 DPI 比較高的電腦上，開啟 VSCode 會有一點模糊，這是由於縮放倍數導致的，而如果以正常 DPI 效果開啟，又太過於小了...這方面還需要繼續優化，但是在程式碼體驗上，無疑要更加接近原生的 Linux 開發，同時也保留了 windows 應用軟體的優勢

4.2 使用 SFTP 和 WSL 進行通訊

4.2.1 開啟 WSL 的 SSH 服務

• 開啟 SSH 服務

  sudo service ssh start
  複製程式碼

  當你第一次開啟 ssh 服務的時候，會提示有 4 個檔案沒有找到，這時候需要執行一個初始化命令來生成這 4 個檔案

  sudo dpkg-reconfigure openssh-server

• 配置 sshd_config，修改兩個配置並新增一個配置

  # 修改配置
  UsePrivilegeSeparation no
  PasswordAuthentication yes
  # 新增配置
  AllowUsers lainlee
  複製程式碼

• 重啟 ssh

  sudo service ssh --full-restart
  複製程式碼

  如果你發現還是連不上 WSL 的話，試著將配置檔案中的埠改一個值，例如：2222，並重啟 ssh 服務

  # What ports, IPs and protocols we listen for
  Port 2222
  複製程式碼

  每次第一次開啟命令列都需要執行啟動 ssh ，不免有點麻煩，我們可以在家目錄的 .profile 裡寫個簡單的判斷指令碼

  echo "檢測開機啟動項"
  if [ ! -e "/var/run/sshd.pid" ]; then
      echo '啟動sshd'
      sudo service ssh start
  fi
  複製程式碼

  這樣每次都會先檢測是否啟動了 ssh，沒有的話則啟動，不過缺點是無法跳過 sudo 輸入密碼階段

4.2.2 IDE 通過 SFTP 同步程式碼

• 首先在【本地】建一個資料夾，這裡為什麼要引起來呢，因為遠端其實也在本地，只不過這裡需要新建一個不同於 WSL 的資料夾用於同步

• 配置 IDE，這裡我用的是 webstorm，其他 IDE 的配置應該也是大同小異

  • 開啟配置 Tool -> Deployment -> 新建（一個加號的圖示）

  

  • 配置賬號密碼

    賬號就是你的 WSL 的賬號

    密碼則是 WSL root 的密碼

    

  • 配置本地路徑與遠端路徑

    

    你還可以配置排除路徑，比如排除掉 node_modules 目錄，畢竟所有的 service 都跑在 WSL 中

• 一切準備就緒了之後，開啟剛才建好的本地專案，在 Tool 裡可以開始下載上傳，也可以勾選自動同步功能

  

好了，開始享受 IDE 的快感吧

如果想要配置一些測試指令碼，或者 debug 指令碼，可以在命令列配置裡簡單的呼叫

bash.exe -c node

即可呼叫 WSL 中的命令，這點還是比較直接的，這部分還沒有嘗試，如有需要，後續會更新的

後記

從開始下載 WSL 到應用到 IDE ，前後花了我兩週的時間，大部分之間卡在與 IDE 的配合上，我一直糾結能否直接在兩個系統中直接溝通，搜尋了很多資料，甚至有人寫了 wslgit 專案，但是最終用起來還是很噁心，差點就放棄這條搭建路線了，好在最後 SFTP 救了我

不過這麼做也有幾個缺點，比如：一個專案要同時建兩個專案，在 IDE 中使用外掛（git/node）等，還是需要下載 windows 版本的相關程式，並且最好版本和 WSL 中一致

那麼我們得到了什麼呢？一個非虛擬環境的 Linux，一個正版的完整 的Linux，不需要再花時間在 cygwin 等模擬工具上的意外的錯誤上，除了前端，我們甚至可以方便的跑 PHP，JAVA，MySQL等等

希望我的這篇分享，能讓在 windows 下備受煎熬與冷眼的程式設計師們，可以找到一點光明，也希望微軟在未來可以更好的發揮出 WSL 的優勢，有問題大家可以敲我，我也仍在繼續摸索中

2018年9月21日更新

不知不覺又過了一年，最近忙這忙那，部落格也停了好久，但是，奮戰在 windows 的工程師們顯然沒有放棄 WSL ，層出不窮的技術方案，讓開發趨於完美，大家都在為更好的在 windows 上開發而努力，而微軟也繼續更新優化著這一個業務，我相信，一個不斷追求進步，勇於改進的軟體是不會被時代淘汰的，他將在未來的某個時間節點，以一種厚積薄發的形式再次站在大家的面前（好了好了，新聞聯播稿都出來了）

---

參考：

在 WSL 下啟動 VSCode

如何在 Windows Subsystem for Linux (WSL) 上執行 Linux GUI 軟體

Windows Subsystem for Linux（WSL）環境下使用圖形介面軟體 (適用Vim，Emacs等大部分Linux圖形介面軟體)