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数最高的那个，点击获取即可：
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. 主题和插件
官网有主题和插件可供选择：
在 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 看会不会仍出现这个问题，然后补充到这里~
所以，具体怎么使用，或者用 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 关于源和代理的问题
如果对你有帮助，请留言一起交流，转载请注明出处，谢谢~
