windows 前端工做環境搭建指北

前言

這篇文章是面向那些想要使用命令行開發，卻又不想放棄 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圖形界面軟件)