web 前端开发玩转 win10 linux 子系统

前言

最新版 win10 已经内置了 linux 子系统 (WSL) 功能。在使用 win10 WSL 开发一周后，个人感觉已经完全可以取代 macOS 在 web 前端开发中的地位了。linux 环境下终端工具易用性、环境稳定性与 win10 的海量的软件生态相结合，再看看 PC 电脑选择的宽泛性，简直不要太赞。是时候放弃 OSX 而选用 win10 作为 web 前端 开发者主要生产力工具平台了。

总的来说，要使用 WSL 环境作为 web 前端开发环境，我们需要以下步骤：打开 WSL 功能、安装 linux 发行版、切换 linux 源、配置 zsh 终端环境、安装 NodeJs、配置 VSCode 终端环境等。

参考

Dev on Windows with WSL

windows 10 linux子系统oh-my-zsh与Cmder配置-2018

打开 win10 linux 功能

步骤1：快捷键 win+x 点击应用和功能，打开程序和功能

步骤2：勾选开启 linux 功能

安装 linux 发行版

1. 单击 win 键，打开 win10 应用商店

   

2. 搜索 linux 关键字

   

3. 安装 ubuntu18

   

4. 打开 ubuntu18 应用图标

   

5. 第一次安装终端会提示访问网址后操作 powershell 以管理员模式启用功能 (已操作过无法再截图，自行操作)
6. 等待安装

   

7. 配置账号密码

   

完成以上步骤后，你就可以在 win10 磁贴菜单点击 ubuntu 图标，或者快捷键 win+r 输入 bash 的方式打开 win 10 ubuntu

ubuntu 切换为 Ali 源

\cp -f /etc/apt/sources.list /etc/apt/sources.list_bak_`date +"%Y_%m_%d_%H_%M_%S"`;
echo 'deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse' >/etc/apt/sources.list;

apt-get update

apt-get upgrade

安装 zsh

sudo apt-get install zsh

安装 oh-my-zsh

由于国内网络问题这一步可能无法成功可以跳过。

git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh

cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

修改 zsh 主题

如果 oh-my-zsh 安装失败这一步可以跳过。

vim ~/.zshrc

ZSH_THEME="agnoster"

设置启动 bash 时默认进入 zsh

// 方式一
sudo chsh -s /bin/zsh
// 方式二
vim ~/.bashrc

if test -t 1; then
    exec zsh
fi

此时我们再打开 ubuntu 时默认进行 zsh 命令行状态，像在 mac 电脑一样的终端体验 ！

终端字体补全

sudo apt-get install fonts-powerline

安装 Node.js

sudo su
apt update
apt install nodejs
node -v
apt install npm
npm i -g n
n lts

至此 Node.js 环境已经安装完成，但是要怎么用来开发呢？

配置 VSCode

将 VSCode 开发工具的终端环境直接指向 ubuntu 就可以真正体验在 win10 上感受 mac 电脑的开发体验了。

打开 VSCode , 快捷键 ctrl+, 打开 json 配置模式加入以下配置：

{
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
    "terminal.external.windowsExec": "C:\\Windows\\sysnative\\bash.exe" 
}