Intro
之前一直用Mac進(jìn)行前端開發(fā)叁征，習(xí)慣了命令行中安裝工具的舒適感，所以目前用公司的windows電腦逛薇，決定搭建個(gè)簡單舒適的環(huán)境捺疼。
安裝WSL
能看到這篇博客的巨巨們一定是了解了WSL，不了解也沒關(guān)系永罚，簡單一句話來說啤呼，就是一個(gè)windows內(nèi)的Linux子系統(tǒng)，如果是輕量使用的話呢袱，完全可以代替虛擬機(jī)和雙系統(tǒng)媳友。安裝方法如下：
1. 打開系統(tǒng)支持
-
桌面右鍵——設(shè)置——搜索欄輸入“開發(fā)者設(shè)置”，選擇開發(fā)者模式
開發(fā)者模式 右鍵開始菜單产捞，有兩個(gè)Windows PowerShell醇锚，選擇后面帶管理員的那個(gè)，然后鍵入如下命令：
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
此時(shí)在“控制面板——搜索——啟用或關(guān)閉 Windows 功能”中看一下設(shè)置是否打開坯临，如果沒有打開焊唬，就手動(dòng)勾選
2. 下載WSL
開始菜單——選擇 Microsoft Store——搜索欄輸入 linux，此時(shí)會出現(xiàn)如下界面看靠，選擇任意一個(gè)WSL就好赶促，我用的是 20.04LTS的 Ubuntu，也就是star數(shù)最高的那個(gè)挟炬，點(diǎn)擊獲取即可：
3. 啟動(dòng) Ubuntu
安裝成功后鸥滨，在開始菜單里能看到圖標(biāo)嗦哆，點(diǎn)擊啟動(dòng)會看到如下界面：
4. 安裝 oh my zsh
是不是感覺這個(gè)界面丑的一B婿滓？沒到Mac的舒適度老速？沒關(guān)系，這是Linux凸主，你要做的事其實(shí)和在Mac上大同小異橘券，讓我們來安裝 oh my zsh：
先安裝zsh:
sudo apt install zsh
oh my zsh官網(wǎng)：https://github.com/ohmyzsh/ohmyzsh
直接看Installation部分：
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
這里如果網(wǎng)絡(luò)失敗了，比如 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused
注意卿吐，這里是
Connection refused旁舰，訪問拒絕，并不是端口的問題，解決思路：
- 關(guān)掉你的代理軟件，如ss猖凛，如果在瀏覽器中打開這個(gè)網(wǎng)址，能夠訪問磺樱，那有可能是防火墻不允許WSL內(nèi)的訪問，把360紧阔、卡巴斯基之類的關(guān)掉重啟試試（windows防火墻不用管）坊罢；
- 如果瀏覽器中也無法訪問续担，那就是該網(wǎng)址被墻了擅耽，此時(shí)打開你的代-理軟件再在瀏覽器中看看，如果能訪問物遇，事情就簡單了乖仇，直接給
curl一個(gè)代理即可，找到你的代理配置的 http 端口询兴，給剛才的命令加上-x 127.0.0.1:7890乃沙，其中7890就是端口號，換成你們自己的诗舰，這里的-x就是代理的意思警儒，具體可以學(xué)下 Linux 基礎(chǔ)命令：
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -x 127.0.0.1:7890)"
- 如果上述步驟中，關(guān)閉了防火墻眶根，打開代理扔不顯示頁面蜀铲，那就換個(gè)代理吧，或者用其他
oh my zsh鏡像地址属百，因?yàn)檫@個(gè)問題不解決记劝，后續(xù)安裝其他插件也是會遇到同樣問題的，具體怎么看端口呢族扰，拿我的狗子云為例：
那倆數(shù)字就是端口號厌丑，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 托嚣，一個(gè)自動(dòng)補(bǔ)全強(qiáng)化插件，最后卸載了厚骗，因?yàn)檫M(jìn)項(xiàng)目時(shí)示启，node_modules 會讓 npm 命令特別卡頓，具體也沒研究為什么领舰，這里只介紹安裝方法夫嗓，有知道怎么解決卡頓問題的麻煩評論告訴我哈，謝謝啦冲秽。
下載插件
# 同理舍咖，下載不了就用瀏覽器下載或者走代理
wget http://mimosa-pudica.net/src/incr-0.2.zsh
將插件放到 oh-my-zsh 目錄的插件庫下
cd ~/.oh-my-zsh/plugins/
# 創(chuàng)建文件夾 incr
mkdir incr
# 復(fù)制文件到此文件
cp ~/incr-0.2.zsh ./incr
# 打開配置文件
sudo vim ~/.zshrc
在~/.zshrc文件末尾加上
source ~/.oh-my-zsh/plugins/incr/incr*.zsh
退出編輯，更新配置
source ~/.zshrc
此時(shí)可以試試命令補(bǔ)全的功能了~
7. WSL 換源
補(bǔ)充下上面的 WSL 內(nèi)容锉桑，因?yàn)槲④浀?WSL 速度較慢排霉，可以換成國內(nèi)源，我使用的時(shí)阿里源民轴，換的時(shí)候記得備份
WSL系統(tǒng)更換國內(nèi)源
如果沒修改權(quán)限攻柠，就加上（username是你的wsl用戶名）：
sudo chown -R username /etc/apt
hyper
Hyper Terminal 是一個(gè)基于 Electron 的命令行終端工具，具有很高的自定義性后裸，很美觀瑰钮。
1. 安裝
進(jìn)入官網(wǎng)直接下載對應(yīng)版本，速度慢的可以用代理 hyper
2. 啟動(dòng)進(jìn)入WSL
hyper 默認(rèn)進(jìn)入的是 cmd微驶，我們可以選擇其他終端浪谴，這里希望進(jìn)入 WSL，配置方法如下：
打開菜單——Edit——'Preferences'因苹，打開配置文件苟耻，修改 shell 配置：
# 編輯shell和shellArgs
shell: 'C:\\Windows\\System32\\wsl.exe',
shellArgs: ['~'],
3. 主題和插件
官網(wǎng)有主題和插件可供選擇：
在 WSL 中直接用 hyper 命令會提示一些問題，如
Warning! Due to WSL limitations, you can't use CLI commands here容燕，所以這里還是打開管理員 PowerShell梁呈，然后輸入如下：
# 安裝主題 verminal
hyper i verminal
# 安裝插件
# hypercwd,讓你打開新的Tab頁時(shí)自動(dòng)保持上一個(gè)Tab頁的路徑
hyper i hypercwd
# hyper-search,支持對命令行窗口里的內(nèi)容全文檢索
hyper i hyper-search
# hyper-opacity,解決windows下hyper原生不支持的窗口透明化
hyper i hyper-opacity
這里需要注意一個(gè)問題，hypercwd 在我的家庭版windows中不生效蘸秘，并且還會報(bào)錯(cuò)官卡，如果出現(xiàn) a javascript error 字樣的彈窗蝗茁，那就直接用 hyper uninstall hypercwd 卸載了吧，還是那句話寻咒，有大佬知道什么問題可以留言帶帶我~
OK哮翘，安裝完之后，我們需要進(jìn)行配置毛秘，不建議在插件本身配置中修改饭寺，因?yàn)闀话姹靖赂采w掉，還是在 菜單——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
},
# 更改字體是因?yàn)橹黝}和hyper自己的配置一起用有點(diǎn)模糊
verminal: {
fontFamily: 'Consolas',
fontSize: 16
}
},
WSL 的使用
OK艰匙，此時(shí)打開 hyper，界面很舒服抹恳，那么员凝，我們?nèi)绾芜M(jìn)行前端依賴管理與開發(fā)呢？這里我簡單介紹下 WSL 的使用奋献，因?yàn)槲乙彩莿倓偨佑|健霹，還沒有太深入，總的來說就是知道兩點(diǎn)：
- WSL 與 windows 文件夾切換
- WSL 下的環(huán)境安裝
1. 切換命令
# 切換到 Linux 中
cd ~
# 切換到 windows 目錄中
cd /mnt
# 切換到 D盤
cd /mnt/d
2. 安裝 Git
輸入 git瓶蚂，會看到系統(tǒng)自帶了 git糖埋，但是版本較舊，可以根據(jù)官網(wǎng)說明更新下：
sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git
3. 安裝 Node
我習(xí)慣用 nvm 管理 Node窃这，按照官網(wǎng)的 install 方法瞳别，將命令最后的 shell 改為 zsh，這樣就免去從 bash 中復(fù)制粘貼 nvm 配置了：
# 將 bash 改成 zsh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | zsh
# 網(wǎng)絡(luò)失敗在后面加上 -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
如果還是網(wǎng)絡(luò)失敗無法安裝钦听，那就直接改WSL的總代理：
# 查看window的ip洒试，最后一行就是倍奢，比如172.19.80.1
cat /etc/resolv.conf
# 設(shè)置總代理朴上，其中7890就是你自己的代理端口
export ALL_PROXY="http://172.19.80.1:7890"
然后根據(jù)自己的需要，安裝對應(yīng)的 Node 版本：
# 安裝最新穩(wěn)定的 Node
nvm install node
# 安裝指定版本卒煞，比如公司項(xiàng)目需要
nvm install 10.16.0
# 查看所有 nvm 命令
nvm
與 vscode 配合使用
vscode中有3個(gè)遠(yuǎn)程編碼的插件痪宰，直接在擴(kuò)展中輸入 “remote”，即可看到畔裕；由于我司現(xiàn)在用的是 svn衣撬，我也是剛接觸，懶得折騰就沒在 WSL 中開發(fā)公司的項(xiàng)目扮饶，因?yàn)樵?WSL 中啟動(dòng)項(xiàng)目后具练，使用 tortoiseSVN 可能在沖突時(shí)遇到無權(quán)限訪問文件的問題，之后我會在 WSL 環(huán)境中使用 svn 看會不會仍出現(xiàn)這個(gè)問題甜无，然后補(bǔ)充到這里~
所以扛点，具體怎么使用哥遮，或者用 WSL 與 IDE 配合使用，這個(gè)話題可以看我下面的參考文章陵究，目前還沒有做眠饮，只是跑自己的 git 項(xiàng)目會用到remote。
打開 vscode 終端铜邮，可以選擇終端仪召，也可以在右下角直接以 WSL 模式打開項(xiàng)目：
關(guān)于代理
可以為 WSL 配置代理，也可以為 git 配置代理松蒜，這個(gè)具體看需求扔茅，我是流量有限，所以只有在沒速度時(shí)才使用代理秸苗，這也是為什么用 -x 命令的原因咖摹，具體配置代理的方法可以看下面的參考~
結(jié)語
WSL 可以說是讓我們的 windows 開發(fā)體驗(yàn)很舒服了，尤其對于工作年限較短的前端同學(xué)來說难述，并沒有很多深度需求萤晴，一個(gè) Linux 命令行環(huán)境足以滿足日常開發(fā)需求了，希望 windows 自家的 Terminal 項(xiàng)目在不久的將來能夠越做越好胁后，實(shí)現(xiàn)真正意義上的 “終端”店读，對于預(yù)算有限或者喜歡 windows 自(da)由(you)度(xi)的同學(xué)來說，無疑不是一件好事攀芯。
參考
windows 前端工作環(huán)境搭建指北
使用hyper+zsh打造更好用的Windows 10 WSL終端
提高Github Clone速度
為 windows wsl 配置 socks5 代理
npm\cnpm\yarn\tyarn 關(guān)于源和代理的問題
如果對你有幫助屯断，請留言一起交流，轉(zhuǎn)載請注明出處侣诺，謝謝~
