从零搭建wsl2[ubuntu]前端开发环境

安装wsl2

快速安装

如果是 Windows 10 版本 2004 及更高版本（内部版本 19041 及更高版本）或 Windows 11。可以直接在管理员运行的powershell中运行以下命令进行安装，安装的默认linux的版本为ubuntu。

wsl --install

手动安装

我的破旧笔记本只能选择手动安装，正好记录一下全过程。
电脑系统为amd架构win10系统。

1. 启动适用于linux的windows子系统，运行以下命令

   请使用管理员运行的powershell，下面的命令同样

   dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

2. 启动虚拟机功能，运行一下命令，完成此步骤后请重启电脑。

   dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

3. 下载 Linux 内核更新包，并安装。
   更新包下载地址

4. 将WSL2设置为默认版本，运行一下命令

   wsl --set-default-version 2

5. 从Microsoft商店下载Linux子系统，进入页面点击安装
   下载地址

   • 我下载的是ubuntu20.4 LTS版本：Ubuntu20.04

6. 安装完，先运行Ubuntu 20.04 LTS，它会初始化系统，让你添加用户密码等。至此wsl2就已经安装完了。

   终端美化与个人设置

   Windows Terminal

7. 自带的命令行工具用起来不爽，下载windows其他终端 Windows Terminal。可以直接在Microsoft商店直接下载。

8. 设置Terminal，设置中可以直接设置默认启动ubuntu，然后设置默认进入ubuntu时进入某个用户目录。点击左下角的打开JSON文件进行编辑，找到如下代码:

   {
     "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
     "hidden": false,
     "name": "Ubuntu-20.04",
     "source": "Windows.Terminal.Wsl"
   }

   并添加一句话

   {
     "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
     "hidden": false,
     "name": "Ubuntu-20.04",
     "source": "Windows.Terminal.Wsl",
     "startingDirectory": "//wsl$/Ubuntu-20.04/home/ascrew"
   }

   不知道为啥改完后我只能进入/目录，一气之下直接修改了/etc/bash.bashrc 末尾添加一句

   cd ~ 

安装zsh

sudo apt update
sudo apt install zsh
chsh -s /bin/zsh

安装oh-my-zsh

官方给的下载方法国内不好使，可以使用github直接手动安装。执行下面的命令后重新登录终端就ok了。

git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

由于换掉了bash shell为zsh，之前的 cd ~ 不好使了，这回要加在 ~/.zshrc 文件中。

安装omz主题 powerlevel10k/powerlevel10k

安装 powerlevel10k/powerlevel10k

git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

编辑 ~/.zshrc 文件，编辑ZSH_THEME这句话。

ZSH_THEME="powerlevel10k/powerlevel10k"

为win10安装字体解决乱码问题，下面包含了各种Powerline字体集合

windows 下需先安装 git

git clone https://github.com/powerline/fonts.git

下载完成fonts文件夹里面有两个安装脚本，一个是powershell运行，一个sh。根据系统运行可以直接安装下载的全部字体。然后去Terminal-ubuntu设置修改字体。然后重新打开终端会提示修改样式。或者输入p10k configure 进行重新设置。这个ubuntu子系统就可以进行前端开发了，除了小程序这种需要自家ide的情景。

vscode的插件 Remote-WSL

在vscode插件市场安装插件 Remote系列。在win10中使用vscode进行对子系统ubuntu的代码进行更改。

默认打卡vscode的文件选择会进入到win10的文件系统，想要加载ubuntu的文件系统需要使用插件，点击左下角。

然后选择Open Folder in WSL... ，就会进入到linux的文件系统。然后就可愉快的编辑代码了。

Ubuntu安装运行环境

现在前端 npm node 环境是必不可少的，通过安装他们的同时最好也安装一些版本管理插件，以备不时之需。

安装 npm、node

1. 在终端输入 sudo apt install npm -y下载npm。
2. 在终端输入 sudo apt install nodejs -y下载nodejs。使用apt下载nodejs的版本会比较低，可以使用node版本管理工具 n 进行管理。
3. 在终端输入 sudo npm install -g n下载node管理工具 n。
4. 在终端输入 sudo n 14 来下载node14并自动进行切换版本。
5. npm的源在国外的服务器，国内下载可能会很慢，下载源管理工具nrm进行提升体验，终端输入sudo npm install -g nrm,下载成功后使用nrm list查看可以使用的源，一般国内使用阿里源，终端输入nrm use taobao就切换为阿里的服务器了，至此就可以配合win10的可视化工具加ubuntu子系统进行前端开发了。