阅读 144

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

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

image.png

推荐软件

  • Windows Terminal

  • Visual Studio Code

安装 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 内核更新包

  • WSL2 Linux kernel update package for x64 machines

  • 双击运行

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-highlighting 和 zsh-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


作者:bingcoder
链接:https://juejin.cn/post/7064161133996802061


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐