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图形界面软件)