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