此前因为工作的原因，用过一年多 Macbook，还是没有太习惯，在此之前就尝试过了 WSL 作为主力开发系统，对比之下基于 Windows 的生态的 WSL 更令人满意，也更游刃有余。刚好最近也重新搭建过一遍开发环境，此前一直想写个脚本做这种事儿，一直没能走出第一步，趁着还有些印象，好好梳理一下自己的开发环境，方便之后写脚本，也算是 WSL 的安利文章了。

由于自己主要从事前端工作，所以开发环境主要偏前端。另外本篇文章所涉及 WSL 默认为 WSL 2，WSL 1 与 WSL 2 对比，请戳这里。

? 准备工作

网络

由于众所周知的原因，前提自然是需要保证网络通畅，这样才能无痛过渡各种问题~至于怎么搞吧，可参考我之前的一篇文章《当一名前端攻城狮把 WSL 作为主力开发系统之后……》，最有效的办法应该还得是软路由，暂时没实操过，木有经验可供分享。

WSL

安装 WSL 之后就可以开始配置环境了，这里参照官方文档，在 Powershell 中执行 wsl --install 即可，注意需要满足系统版本最低要求。此外，通过该命令默认安装的是 Ubuntu，如果需要替换可自行配置。

值得注意的是 WSL 默认是将宿主机的设备名称作为 hostname 的，可预先将 Windows 中设备名称改为自己期望的名称。另外需要注意的是确保 BIOS 中的已启用了虚拟化（virtualization）。

另外有个关于 Hyper-V 的讨论，暂时没遇到。

软件

• Windows Terminal
• VS Code
• Git
• Chrome
• Firefox Developer Edition

WSL 系统安装过程中，可提前将上述软件安装完成。Windows Terminal 可在微软应用商店中安装，如果无法访问可尝试在 GitHub 仓库 Release 中下载安装。

Git 的安装是以备不时之需，毕竟之后主要的开发任务还是在 WSL，另外是避免直接使用 VS Code 的时候 Git 相关扩展报警告。

? WSL 开发环境

系统安装完毕，就可以开始正式配置环境了，用户名密码按需配置就好了，我的密码配置得比较简单，方便使用。另外不会有人跟我第一次用 Linux 一样，输入密码的时候以为没有输入进去吧？_(:з」∠)_

换源

备份默认源

cp /etc/apt/sources.list /etc/apt/sourses.list.bak

替换为阿里源

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
复制代码

换源后更新一下

sudo apt-get update
sudo apt-get upgade
复制代码

配置 zsh

sudo apt-get install zsh

# 将 zsh 设置为默认 Shell
chsh -s /bin/zsh

# 安装 Oh My Zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# 安装 zsh-autosuggestions 插件
# ref: https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md#oh-my-zsh
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# 添加插件到 Oh My Zsh 插件配置中
plugins=( 
    # other plugins...
    zsh-autosuggestions
)

# 安装 zsh-syntax-highlighting 插件
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

# 添加插件启动代码
# Note the `source` command must be **at the end** of `~/.zshrc
# why? https://github.com/zsh-users/zsh-syntax-highlighting#why-must-zsh-syntax-highlightingzsh-be-sourced-at-the-end-of-the-zshrc-file
echo "source \$ZSH_CUSTOM/plugins/zsh-syntax-highlighting/zsh-syntax-highlightin\
g.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

# 重新配置 zsh
source ~/.zshrc
复制代码

安装 git

sudo apt-get install git

git --version
复制代码

安装 nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
复制代码

安装 node

默认安装最新版即可。

nvm install node # "node" is an alias for the latest version
复制代码

安装 java

由于最近使用到的 npm 包会用到 Java，所以将 Java 也作为工具之一了。

sudo apt install openjdk-8-jdk
复制代码

配置 VS Code

最后就到了我最爱的 VS Code 配置环节，万事俱备的情况下，通过 Git 在 WSL 下克隆任意一个项目到本地后，再通过 code 命令打开项目，由于第一次通过远程调用的方式打开项目，在经过简单的初始化之后一切就准备就绪了。

推荐扩展

• Auto Close Tag
• Auto Rename Tag
• Material Icon Theme
• ESLint
• Git Graph
• GitLens
• indent-rainbow
• Path Intellisense
• Prettier – Code formatter
• SVG
• YAML
• Code Spell Checker
• CSS Modules
• CSS Peek

✨ 必备软件

• Ditto – 剪贴板管理工具
• Snipaste – 截图工具
• ScreenToGif – Git 录制工具
• Insomnia – API 测试工具

梳理下来 Shell 脚本的思路是有了，接下来就是 To be continued 了。