Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Install and Setup Windows Subsystem 2 for Linux, Hyper, ZSH + Oh My Zsh + Powerlevel9k + plugins, FNM + VSCode (+ext) and Nerd Font

Setup Windows Subsystem 2 for Linux

Windows Subsystem 2 for Linux, Hyper, ZSH + Oh My Zsh + Powerlevel9k + plugins, FNM + VSCode (+ext) and Nerd Font

To setup native Linux, see this gist

Preview

Requirements

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
)

21. Recommended VSCode extensions + theme

https://gist.github.com/leodutra/941345a39d1f3b1e13e16a860c3385e0

20. Set VSCode integrated terminal font

{
    "workbench.colorTheme": "Community Material Theme High Contrast",
    "rust-client.engine": "rust-analyzer",
    "terminal.integrated.fontFamily": "'FuraMono Nerd Font'",
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontWeight": 600,
    "editor.fontFamily": "'FuraMono Nerd Font'",
    "editor.fontSize": 13,
    "editor.fontWeight": 500,
    "editor.suggestSelection": "first",
}

22. Exit Hyper

exit

23. Final .zshrc reference

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/home/home/.oh-my-zsh"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
#ZSH_THEME="robbyrussell"
ZSH_THEME="powerlevel9k/powerlevel9k"
POWERLEVEL9K_MODE="nerdfont-complete"

# VSCode specific styling
# "terminal.integrated.env.linux": {
#     "ZSHRC_VSCODE_MODE": "true"
# }
if [ "$ZSHRC_VSCODE_MODE" = "true" ]; then
    POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(os_icon dir vcs)
else
    POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(context dir vcs)
fi
#POWERLEVEL9K_PROMPT_ON_NEWLINE=true
#POWERLEVEL9K_RPROMPT_ON_NEWLINE=false


# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"

# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"

# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"

# Uncomment the following line to change how often to auto-update (in days).
# export UPDATE_ZSH_DAYS=13

# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS=true

# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"

# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"

# Uncomment the following line to enable command auto-correction.
# ENABLE_CORRECTION="true"

# Uncomment the following line to display red dots whilst waiting for completion.
# COMPLETION_WAITING_DOTS="true"

# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"

# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# You can set one of the optional three formats:
# "mm/dd/yyyy"|"dd.mm.yyyy"|"yyyy-mm-dd"
# or set a custom format using the strftime function format specifications,
# see 'man strftime' for details.
# HIST_STAMPS="mm/dd/yyyy"

# Would you like to use another custom folder than $ZSH/custom?
# ZSH_CUSTOM=/path/to/new-custom-folder

# Which plugins would you like to load?
# Standard plugins can be found in ~/.oh-my-zsh/plugins/*
# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
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
)

source $ZSH/oh-my-zsh.sh

# User configuration

# export MANPATH="/usr/local/man:$MANPATH"

# You may need to manually set your language environment
# export LANG=en_US.UTF-8

# Preferred editor for local and remote sessions
# if [[ -n $SSH_CONNECTION ]]; then
#   export EDITOR='vim'
# else
#   export EDITOR='mvim'
# fi

# Compilation flags
# export ARCHFLAGS="-arch x86_64"

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

neofetch
@altosaar
Copy link

altosaar commented Jan 11, 2021

Thank you! This is incredibly useful. Consider renaming this to "Windows for hackers" or "WSL for hackers" :) as it is the closest I could find to https://gist.github.com/brandonb927/3195465 - a painless setup for a reasonable dev environment on a clean install of Windows. Again, this is a huge time saver. Thanks so much!! :)

@LionByteTech
Copy link

LionByteTech commented Mar 9, 2021

Appreciate this! Finally something that is quick and to the point to get a dev env that makes sense!

@pandaa880
Copy link

pandaa880 commented Mar 14, 2021

Thank you for putting this together. I just switched to windows and this really helped.

@KenyOS
Copy link

KenyOS commented Apr 26, 2021

many thanks!! extremely helpful I didn't have Windows store for some reason but I could download manually and install Ubuntu18 '.appx'

@aiyanajade
Copy link

aiyanajade commented May 20, 2021

I cannot find hyper icon on my windows, moreover when I open it from search as admin it first opens cmd and then an 'unintereactive' hyper terminal where I still don't see the properties option.

@leodutra
Copy link
Author

leodutra commented May 31, 2021

@aiyanajade hyper preferences should be in its title menu or right click

@loctran016
Copy link

loctran016 commented Jul 25, 2021

I've tried but the hyper open and then quit, I've put a discussion on hyper. I've install zsh, neofetch, zsh, oh-my-zsh inside Ubuntu (instead of in hyper).
P/S: The newest version (Ubuntu 20.04) need this setting:

shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

@altosaar
Copy link

altosaar commented Jul 25, 2021

I've found Windows Terminal to work better than hyper.

@aiyanajade
Copy link

aiyanajade commented Jul 25, 2021

I tried almost everything to fix my hyper issues but could not fix them so I just switched back to working on ubuntu terminal

@loctran016
Copy link

loctran016 commented Jul 25, 2021

Oh, and btw, the command come out when I found this in Window Terminal (wsl.exe -d Ubuntu-20.04):
image

@Rafaelb4rros
Copy link

Rafaelb4rros commented Sep 23, 2021

when I try to use the 'hyper' command (hyper i hyper-statusline hyper-search hyper-oceanic-next) it's giving the following error: /usr/bin/env: ‘bash\r’: No such file or directory. What can it be?

@lucascouto91
Copy link

lucascouto91 commented Oct 11, 2021

I've tried but the hyper open and then quit, I've put a discussion on hyper. I've install zsh, neofetch, zsh, oh-my-zsh inside Ubuntu (instead of in hyper). P/S: The newest version (Ubuntu 20.04) need this setting:

shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

Thank you very much!

@pamisoni
Copy link

pamisoni commented Nov 9, 2021

Oh, and btw, the command come out when I found this in Window Terminal (wsl.exe -d Ubuntu-20.04): image

You are right, now it works

@pamisoni
Copy link

pamisoni commented Nov 9, 2021

I've tried but the hyper open and then quit, I've put a discussion on hyper. I've install zsh, neofetch, zsh, oh-my-zsh inside Ubuntu (instead of in hyper). P/S: The newest version (Ubuntu 20.04) need this setting:

shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

really it works

@joaodejesus
Copy link

joaodejesus commented Dec 28, 2021

Mine worked normally, I just put the ~ in quotes.

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

@AndresERojasI
Copy link

AndresERojasI commented Jan 14, 2022

If you are using Ubuntu 18.04,

you can config your Hyper with this:

shell: 'ubuntu1804.exe',
shellArgs: [],

it will open the Ubuntu console directly...

@JoanComasFdz
Copy link

JoanComasFdz commented Feb 10, 2022

Following up on @AndresERojasI , if you installed Ubuntu from Microsoft Store (with no version specified) you can also use:

shell: 'ubuntu.exe',
shellArgs: [],

@JoanComasFdz
Copy link

JoanComasFdz commented Feb 16, 2022

Do I really need NVM, Node, Nodemon, PM2, ESLint, Pug and neofetch or can I have a fully functional OhMyZsh and theme in Hyper without them?

@loctran016
Copy link

loctran016 commented Feb 17, 2022

Do I really need NVM, Node, Nodemon, PM2, ESLint, Pug and neofetch or can I have a fully functional OhMyZsh and theme in Hyper without them?

No you don't. nvm, node, nodemon, pm2, eslint, pug are for front-end dev and neofetch only provide some cool screen showing info about your os so all of them are optional

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment