Development environment setup: Installing WSL2, Hyper, ZSH, VSCode, OhMyZsh

dev-setup.md

Installing Windows Subsystem for Linux 2, Hyper, ZSH, Node.js and VSCode extensions

Requirements

• Windows 10 Build 18917+ (only as Windows Insider 09/2019)

Steps

1. Enable WSL2

Run in PowerShell, as admin (elevated):

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform

2. Install a Linux distro for WSL2

• open Microsoft Store on Windows;
• search for Linux;
• install Ubuntu 18.04 (recommended).

3. Install Chocolatey

Run in CMD, as admin:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

4. Install Hyper and VSCode using Chocolatey

Run in CMD, as admin:

choco install hyper vscode -y

5. Set Hyper to use WSL

• Hyper (icon) > Properties > Compatibility > check "Run as adminstrator";
• open Hyper;
• Edit > Preferences
• change lines:

    shell: 'C:\\Windows\\System32\\wsl.exe',
    shellArgs: [~],

• save preferences;
• restart Hyper.

6. Install ZSH and Oh My Zsh

Run in Hyper:

sudo apt update && sudo apt upgrade -y

sudo apt install zsh -y
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

7. Install NVM using ZSH

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
echo "export NVM_DIR=\"$HOME/.nvm\"\n[ -s \"$NVM_DIR/nvm.sh\" ] && \. \"$NVM_DIR/nvm.sh\"\n[ -s \"$NVM_DIR/bash_completion\" ] && \. \"$NVM_DIR/bash_completion\"" >> ~/.zshrc
source ~/.zshrc

8. Install Node (latest) using NVM

nvm install node
nvm alias default node

9. Install Yarn

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-get update && sudo apt-get install --no-install-recommends yarn

10. Install Nodemon, PM2, ESLint, Pug

npm i -g nodemon pm2 eslint pug

11. Install neofetch

sudo apt install neofetch
echo 'neofetch' >> ~/.zshrc

12. Install VSCode extensions

Reference

13. Install Powerline9k theme for Oh My Zsh

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

Then, add to your ~/.zshrc:

ZSH_THEME="powerlevel9k/powerlevel9k"

14. Install Powerline specific fonts (Nerd Font or Powerline Fonts)

Nerd Fonts

For Windows, download and install manually from: https://github.com/ryanoasis/nerd-fonts/releases

Powerline Fonts

Run in Powershell:

git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
Set-ExecutionPolicy Bypass
./install.ps1
cd ..
Remove-Item fonts -Recurse -Force

Recommended fonts

• FuraMono
• FiraCode
• Menlo
• DejaVu Sans
• Hack
• HeavyData

15. Change Hyper font config

• back to Hyper, open Edit > Preferences;
• give font name (fontFamily: '"FuraMono Nerd Font Mono", "FuraMono Nerd Font", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace')
• (optional) set webGLRenderer: false if you see 1px spaces in Powerline stripes (causes small performance degradation).

16. Setup POWERLEVEL9K_MODE and more variables

Change your ~/.zshrc and include:

POWERLEVEL9K_MODE='nerdfont-complete'

More options and styling on
https://github.com/Powerlevel9k/powerlevel9k/wiki/Stylizing-Your-Prompt

17. Install Hyper plugins

hyper i hyper-statusline hyper-search hyper-oceanic-next

18. Upgrade Ubuntu

sudo apt upgrade -y

19. Install ZSH plugins

Install plugins

Run in Hyper:

# zsh-completions
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
# zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# fasd
sudo apt install fasd -y

Edit ~/.zshrc in WSL

plugins=(
    ansible
    aws
    cargo
    command-not-found
    docker
    fasd
    git
    golang
    npm
    npx
    nvm
    react-native
    rust
    sudo
    systemd
    ubuntu
    vscode
    web-search
    yarn
    zsh-autosuggestions
    zsh-completions
)

Final .zshrc reference

20. Set VSCode integrated terminal font

"terminal.integrated.fontFamily": "'FuraMono Nerd Font Mono'",
"terminal.integrated.fontSize": 12

21. Exit Hyper

exit

Thanks for sharing.

Could you please guide with Windows 11. After WSL run as admin, restarting the system crashes the OS(Windows 11) Any insight on this will be pretty much appreciated.

Unfortunately, for installing WSL on Windows 11, I can’t say anything yet.
Maybe in the future when I switch to it.