WSL2+oh-my-zsh+VS Code 开发环境搭建获得Mac下相同的开发体验

5,102 阅读3分钟

平时的主力电脑为 Mac 系统,家里的电脑为 Windows,希望在两种系统里能有同样的开发体验,WSL-Windows Subsystem for Linux 可以在不需要传统虚拟机的情况下在 Windows 里运行 Linux 刚好可以满足需求。这里记录一下我的环境搭建过程,包括 安装 Linux 环境安装 oh-my-zsh设置 powerlevel10k 主题配置 VS Code 等。废话不多说直接上最终效果。

image.png

推荐软件

安装 WSL

官方文档 Install WSL | Microsoft Docs

1.1 自动安装(管理员运行 PowerShell)

您必须运行 Windows 10 版本 2004 及更高版本(内部版本 19041 及更高版本)或 Windows 11。

wsl --install

1.2 手动安装(管理员运行 PowerShell)

旧版本或者自动安装失败(如:下载 Ubuntu 失败),可以尝试手动安装。

1.2.1 启用 WSL

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

image.png

1.2.2 检查运行要求

  • For x64 systems: Version 1903 or higher, with Build 18362 or higher.
  • For ARM64 systems: Version 2004 or higher, with Build 19041 or higher.
  • Builds lower than 18362 do not support WSL 2. Use the Windows Update Assistant to update your version of Windows

1.2.3 启用虚拟机功能

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

屏幕截图 2022-02-13 145129 (3).png

1.2.4 下载 Linux 内核更新包

1.2.5 将 WSL 2 设置为默认版本(win 10)

wsl --set-default-version 2

屏幕截图 2022-02-13 150010.png

1.2.6 安装 Linux 发行版

可在微软商店里安装 Ubuntu 20.04 LTS

image.png

1.2.7 查看版本

wsl -l -v

屏幕截图 2022-02-13 150333.png

1.2.8 重启电脑

WSL 环境配置

2.1 初始化用户名和密码

开始菜单进入 Ubuntu,等待一或两分钟,输入用户名和密码

  • 用户名密码特定于安装的每个单独的 Linux 分发版,与 Windows 用户名无关。
  • 创建用户名密码后,该帐户将是分发版的默认用户,并将在启动时自动登录。
  • 此帐户将被视为 Linux 管理员,能够运行 sudo (Super User Do) 管理命令。 image.png

2.2 更新和升级包

sudo apt update && sudo apt upgrade

2.3 设置 Windows Terminal

  • 设置中设置默认启动 Ubuntu
  • 设置启动文件夹 屏幕截图 2022-02-13 150528.png 打开命令行默认进入/mnt/c/user/<name>文件夹
    cd && explorer.exe .

进入当前用户文件夹并打开文件管理器,在文件管理器里复制当前文件夹,然后在 Windows Terminal 设置启动目录。

屏幕截图 2022-02-13 153858.png

注意:

  • win10 与 win11 启动目录不同,最好通过 explorer.exe .打开文件管理后复制路径
  • 不要跨操作系统访问文件,这可能会显著降低性能。Windows 命令行(PowerShell、命令提示符)访问 Windows 文件系统中的文件,Linux 命令行(Ubuntu、OpenSUSE 等)访问 WSL 的。

2.3.1 安装 zsh

 # 安装
 sudo apt install zsh -y
 
 # 查看 shells
 cat /etc/shells
 
 # 设置默认 shell
 chsh -s /usr/bin/zsh

设置默认shell时要求输入密码后,输入后。重开一个窗口,zsh 会询问用户配置问题,选择2推荐配置,后续如果需要自己修改~/.zshrc。

image.png

2.3.2 修改 hosts 访问 github(github 访问不畅,否则跳过此步)

  • 创建 /etc/wsl.conf
    sudo touch /etc/wsl.conf
    
    # 输入以下内容,阻止自动生成 hosts 文件
    [network]
    generateHosts = false
    
  • 访问 GitHub最新hosts
  • 将 github hosts 追加到 /etc/hosts
    sudo vim /etc/hosts
    
  • ping
    ping github.com
    ping raw.githubusercontent.com
    

image.png

2.3.3 安装 oh-my-zsh

 sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

image.png

2.3.4 配置 powerlevel10k 主题

安装字体

image.png

设置 Windows Terminal 字体
            "font": {
                "face": "MesloLGS NF",
                "size": 14
            }

image.png

下载主题
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/powerlevel10k
echo 'source ~/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc
配置主题

新打开窗口且没有配置时会询问用户一些问题做配置,选自己喜欢的配置,后续可以通过 p10k configure 命令重新配置。

image.png

下载 zsh-syntax-highlightingzsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

编辑 ~/.zshrc

plugins=(zsh-syntax-highlighting zsh-autosuggestions)
source .zshrc

输入命令即可看到高亮和建议

image.png

配置 VS Code

安装 Remote-WSL 插件

屏幕截图 2022-02-13 180003.png

此时 ubuntu 中使用 code . 打开文件夹

屏幕截图 2022-02-13 181706.png

image.png

设置字体 MesloLGS NF

 "editor.fontFamily": "'MesloLGS NF', Consolas, 'Courier New', monospace"

下载 Node

Ubuntu 里 apt-get 命令安装的 Node 版本为 10.x,太老旧,而且 npm 报错,在这里 NodeSource Node.js Binary Distributions 安装想要的版本

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

image.png

参考