WSL + Hyper，前端windows下的优雅linux环境

Intro

之前一直用Mac进行前端开发，习惯了命令行中安装工具的舒适感，所以目前用公司的windows电脑，决定搭建个简单舒适的环境。

安装WSL

能看到这篇博客的巨巨们一定是了解了WSL，不了解也没关系，简单一句话来说，就是一个windows内的Linux子系统，如果是轻量使用的话，完全可以代替虚拟机和双系统。安装方法如下：

1. 打开系统支持

• 桌面右键——设置——搜索栏输入“开发者设置”，选择开发者模式

  
  
  开发者模式

• 右键开始菜单，有两个Windows PowerShell，选择后面带管理员的那个，然后键入如下命令：

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

此时在“控制面板——搜索——启用或关闭 Windows 功能”中看一下设置是否打开，如果没有打开，就手动勾选

打开子系统功能

2. 下载WSL

开始菜单——选择 Microsoft Store——搜索栏输入 linux，此时会出现如下界面，选择任意一个WSL就好，我用的是 20.04LTS的 Ubuntu，也就是star数最高的那个，点击获取即可：

image.png

3. 启动 Ubuntu

安装成功后，在开始菜单里能看到图标，点击启动会看到如下界面：

不是默认界面哦，因为我已经装好插件了

4. 安装 oh my zsh

是不是感觉这个界面丑的一B？没到Mac的舒适度？没关系，这是Linux，你要做的事其实和在Mac上大同小异，让我们来安装 oh my zsh：
先安装zsh:

sudo apt install zsh

oh my zsh官网：https://github.com/ohmyzsh/ohmyzsh
直接看Installation部分：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

这里如果网络失败了，比如 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

被墙了

注意，这里是Connection refused，访问拒绝，并不是端口的问题，解决思路：

• 关掉你的代理软件，如ss，如果在浏览器中打开这个网址，能够访问，那有可能是防火墙不允许WSL内的访问，把360、卡巴斯基之类的关掉重启试试（windows防火墙不用管）；
• 如果浏览器中也无法访问，那就是该网址被墙了，此时打开你的代-理软件再在浏览器中看看，如果能访问，事情就简单了，直接给 curl 一个代理即可，找到你的代理配置的 http 端口，给刚才的命令加上 -x 127.0.0.1:7890，其中 7890 就是端口号，换成你们自己的，这里的 -x 就是代理的意思，具体可以学下 Linux 基础命令：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -x 127.0.0.1:7890)"

• 如果上述步骤中，关闭了防火墙，打开代理扔不显示页面，那就换个代理吧，或者用其他 oh my zsh 镜像地址，因为这个问题不解决，后续安装其他插件也是会遇到同样问题的，具体怎么看端口呢，拿我的狗子云为例：
  
  那俩数字就是端口号，ss同理，随便翻翻肯定能找到，一般是1080

5. 主题选择

• 我用的 ys，在 Mac 下用的 af-magic，都很简洁清爽，主题参见 oh-my-zsh theme

# 打开 zsh 配置
vim ~/.zshrc
# 如果你有 vscode，并配置了shell path，可以用
code ~/.zshrc

将配置文件中 ZSH-THEME 改成 ys

配置主题，截个图怕小白看得蒙蔽

 ZSH_THEME="ys"
 # 修改完后退出编辑，更新配置
 source ~/.zshrc

6. oh-my-zsh 插件

我试了 incr ，一个自动补全强化插件，最后卸载了，因为进项目时，node_modules 会让 npm 命令特别卡顿，具体也没研究为什么，这里只介绍安装方法，有知道怎么解决卡顿问题的麻烦评论告诉我哈，谢谢啦。
下载插件

# 同理，下载不了就用浏览器下载或者走代理
wget http://mimosa-pudica.net/src/incr-0.2.zsh

将插件放到 oh-my-zsh 目录的插件库下

 cd ~/.oh-my-zsh/plugins/
 # 创建文件夹 incr
 mkdir incr
 # 复制文件到此文件
 cp ~/incr-0.2.zsh ./incr
 # 打开配置文件
 sudo vim ~/.zshrc

在~/.zshrc文件末尾加上

source ~/.oh-my-zsh/plugins/incr/incr*.zsh

退出编辑，更新配置

source ~/.zshrc

此时可以试试命令补全的功能了~

7. WSL 换源

补充下上面的 WSL 内容，因为微软的 WSL 速度较慢，可以换成国内源，我使用的时阿里源，换的时候记得备份
WSL系统更换国内源
如果没修改权限，就加上（username是你的wsl用户名）：

sudo chown -R username /etc/apt

hyper

Hyper Terminal 是一个基于 Electron 的命令行终端工具，具有很高的自定义性，很美观。

1. 安装

进入官网直接下载对应版本，速度慢的可以用代理 hyper

2. 启动进入WSL

hyper 默认进入的是 cmd，我们可以选择其他终端，这里希望进入 WSL，配置方法如下：
打开菜单——Edit——'Preferences'，打开配置文件，修改 shell 配置：

 # 编辑shell和shellArgs
 shell: 'C:\\Windows\\System32\\wsl.exe',
 shellArgs: ['~'],

3. 主题和插件

官网有主题和插件可供选择：

image.png

在 WSL 中直接用 hyper 命令会提示一些问题，如 Warning! Due to WSL limitations, you can't use CLI commands here，所以这里还是打开管理员 PowerShell，然后输入如下：

 # 安装主题 verminal
 hyper i verminal
 
 # 安装插件
 # hypercwd,让你打开新的Tab页时自动保持上一个Tab页的路径
 hyper i hypercwd
 # hyper-search,支持对命令行窗口里的内容全文检索
 hyper i hyper-search
 # hyper-opacity,解决windows下hyper原生不支持的窗口透明化
 hyper i hyper-opacity

这里需要注意一个问题，hypercwd 在我的家庭版windows中不生效，并且还会报错，如果出现 a javascript error 字样的弹窗，那就直接用 hyper uninstall hypercwd 卸载了吧，还是那句话，有大佬知道什么问题可以留言带带我~
OK，安装完之后，我们需要进行配置，不建议在插件本身配置中修改，因为会被版本更新覆盖掉，还是在 菜单——Edit——Preference 中修改：

# 在 exports 的 config 中添加如下配置，不要写窜了
 module.exports = {
   config: {
     // for advanced config flags please refer to https://hyper.is/#cfg
     opacity: {
      focus: 0.8,
      blur: 0.8
    },
    # 更改字体是因为主题和hyper自己的配置一起用有点模糊
    verminal: {
      fontFamily: 'Consolas',
      fontSize: 16
    }
   },

WSL 的使用

OK，此时打开 hyper，界面很舒服，那么，我们如何进行前端依赖管理与开发呢？这里我简单介绍下 WSL 的使用，因为我也是刚刚接触，还没有太深入，总的来说就是知道两点：

• WSL 与 windows 文件夹切换
• WSL 下的环境安装

1. 切换命令

# 切换到 Linux 中
cd ~
# 切换到 windows 目录中
cd /mnt
# 切换到 D盘
cd /mnt/d

2. 安装 Git

输入 git，会看到系统自带了 git，但是版本较旧，可以根据官网说明更新下：

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git

3. 安装 Node

我习惯用 nvm 管理 Node，按照官网的 install 方法，将命令最后的 shell 改为 zsh，这样就免去从 bash 中复制粘贴 nvm 配置了：

# 将 bash 改成 zsh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | zsh
# 网络失败在后面加上 -x 127.0.0.1:你的代理端口
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh -x 127.0.0.1:7890 | zsh

如果还是网络失败无法安装，那就直接改WSL的总代理：

# 查看window的ip，最后一行就是，比如172.19.80.1
cat /etc/resolv.conf
# 设置总代理，其中7890就是你自己的代理端口
export ALL_PROXY="http://172.19.80.1:7890"

然后根据自己的需要，安装对应的 Node 版本：

# 安装最新稳定的 Node
nvm install node
# 安装指定版本，比如公司项目需要
nvm install 10.16.0
# 查看所有 nvm 命令
nvm

与 vscode 配合使用

vscode中有3个远程编码的插件，直接在扩展中输入 “remote”，即可看到；由于我司现在用的是 svn，我也是刚接触，懒得折腾就没在 WSL 中开发公司的项目，因为在 WSL 中启动项目后，使用 tortoiseSVN 可能在冲突时遇到无权限访问文件的问题，之后我会在 WSL 环境中使用 svn 看会不会仍出现这个问题，然后补充到这里~

remote

所以，具体怎么使用，或者用 WSL 与 IDE 配合使用，这个话题可以看我下面的参考文章，目前还没有做，只是跑自己的 git 项目会用到remote。
打开 vscode 终端，可以选择终端，也可以在右下角直接以 WSL 模式打开项目：

选择终端

关于代理

可以为 WSL 配置代理，也可以为 git 配置代理，这个具体看需求，我是流量有限，所以只有在没速度时才使用代理，这也是为什么用 -x 命令的原因，具体配置代理的方法可以看下面的参考~

结语

WSL 可以说是让我们的 windows 开发体验很舒服了，尤其对于工作年限较短的前端同学来说，并没有很多深度需求，一个 Linux 命令行环境足以满足日常开发需求了，希望 windows 自家的 Terminal 项目在不久的将来能够越做越好，实现真正意义上的 “终端”，对于预算有限或者喜欢 windows 自(da)由(you)度(xi)的同学来说，无疑不是一件好事。

参考

windows 前端工作环境搭建指北
使用hyper+zsh打造更好用的Windows 10 WSL终端
提高Github Clone速度
为 windows wsl 配置 socks5 代理
npm\cnpm\yarn\tyarn 关于源和代理的问题

---

如果对你有帮助，请留言一起交流，转载请注明出处，谢谢~