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 关于源和代理的问题


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

你可能感兴趣的:(WSL + Hyper,前端windows下的优雅linux环境)