Window11 Terminal WSL 安装 zsh 及前端开发环境

Window11 Terminal WSL 安装 zsh 及前端开发环境.md

1. 准备

• window 11
• 开启适用与 Linx 的 Windows 子系统
• 到微软商店下载 Ubuntu 系统
• 这里我使用的是 WSL1, wsl --set-default-version <Version>

1.1 查看当前环境的 shell

echo $SHELL

1.2 查看当前系统有那些 shell

cat /etc/shells

2. 安装 zsh

sudo apt install zsh

3. 将 zsh 设置为默认的 shell

chsh -s /bin/zsh

4. 安装 Oh My Zsh

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

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

5. 安装 Powerlevel10k

5.1 克隆仓库

GitHub

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

Gitee

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

5.2 设置主题

在 ~/.zshrc 中添加

ZSH_THEME="powerlevel10k/powerlevel10k"

使配置生效。

source ~/.zshrc

5.2.1 设置字体为 MesloLGS NF

• https://github.com/romkatv/powerlevel10k#manual-font-installation

5.2.2 自定义配置

p10k configure

6. 安装一些 zsh 常用插件

安装插件后要使用 source .zshrc 使配置生效

• git

  显示 git 的一些功能，默认已经安装

  plugins=(git)
  

• z

  跳转目录，直接在 plugins 里面添加 z

  plugins=(
          git
          z)
  

• sudo

  偶尔输入某个命令，提示没有权限，需要加sudo，这个时候按两下ESC，就会在命令行头部加上 sudo 默认已经安装

  plugins=(
          git
          sudo
          z)
  

• zsh-autosuggestions

  会记录你之前输入过的所有命令，并且自动匹配你可能想要输入命令，然后按 Tab 补全

  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

  添加配置

  plugins=(
          git
          sudo
          z
          zsh-autosuggestions)
  

• zsh-syntax-highlighting

  直接在输入过程中就会提示你，当前命令是否正确，错误红色，正确绿色

  https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md#oh-my-zsh

  克隆仓库

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

  添加配置

  plugins=(
          git
          sudo
          z
          zsh-autosuggestions
          zsh-syntax-highlighting)
  

7. 前端部分

7.1 安装 npm

sudo apt install npm

7.2 通过 npm 安装 n

sudo npm i n -g

7.3 通过 n 安装 node

sudo n lts

7.4 安装 yarn

也可以使用 npm 直接安装，我这样安装是为了 webstorm 可以更好的找到路径

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

7.5 安装 tyarn

类似于 cnpm，个人感觉比 cnpm 好用

sudo npm i tyarn -g

7.6 yarn 开启 emoji

yarn config set -- --emoji true