Setup Windows Subsystem for Linux (WSL) with Hyper & oh-my-zsh.

๐Ÿ“…April 07, 2020

๐Ÿ•’7 minute read

๐Ÿท

windows

wsl

linux

hyper

Today, I will show you how to get set up and make your WSL experience enjoyable and more Linux-like. After years of having to appeal to a dual-boot setup with Windows and some Linux distribution, I decided to try WSL for once. To my surprise, I ended up admiring it enough to drop my dual-booted Linux (at least for now).

WSL terminal hyper setup

Here's a simple step-by-step breakdown of how to get WSL set up to function and look beautifully.

DISCLAIMER: I must admit WSL isn't perfect (slowish I/O for example), but it more than does the job.

WSL Installation

First, open up PowerShell as Administrator and execute this command to enable the use of WSL:

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

After this, you're free to download the Linux distribution of your choice (personally, I like Ubuntu). At the time of writing this, the available ones (with links) are:

After downloading and installing, you'll be able to open up your Ubuntu (or whatever distro you chose) bash and start installing native packages and using Linux commands.

Zsh Installation

Although not necessary, Zsh is too awesome to leave out. If it's not your cup of tea, you can skip this step and move on with your preferred shell.

Supposing you chose the Ubuntu distribution, follow these steps:

Run:

sudo apt-get install zsh

After it's finished installing Zsh, you need to set it as your default shell via the .bashrc file.

Open the file:

nano ~/.bashrc

Then append these lines to the end:

if [ -t 1 ]; then
  exec zsh
fi

Oh My Zsh Installation

oh-my-zsh is a framework for configuring Zsh, which includes tons of approaches for customizing and making your workflow powerful and productive.

Install via curl:

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

After you're done installing, you'll get a generated .oh-my-zsh directory and a .zshrc file with the base setup for Oh My Zsh, which you can edit. You may want to read up on how to modify your zsh config here (for themes) and here (for plugins)!

My current configuration includes the intheloop theme and these plugins:

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

PS: try keeping it light to avoid a long load!

Fix ls command colors

For some reason, when on a fresh WSL install, you might see some funky colors when executing ls on a directory. To fix this just add the following lines to your .zshrc:

# WSL specific
LS_COLORS="ow=01;36;40" && export LS_COLORS

# Make cd use the ls colours
zstyle ':completion:*' list-colors "${(@s.:.)LS_COLORS}"
autoload -Uz compinit
compinit

Hyper Terminal

Apart from having the cool functionality that zsh and oh-my-zsh provide, you can make your terminal nice to look at 24/7, like mine ๐Ÿ˜Ž. If you don't have an affinity for fancy terminals, just use the default terminal that WSL yields.

Install Hyper

You can install Hyper here in the same fashion you would install any other program on Windows (just 'Next' everything).

After doing so, you'll have a .hyper.js file in your home directory (e.g /c/Users/Erick). This file will contain your Hyper terminal config, which is where you can install plugins, themes, add colors, sounds, etc. You can then open that file up with your favorite editor.

Set default shell for Hyper

By default, Hyper will use Windows' cmd as it's shell. Therefore, the first thing you should do after installing Hyper is changing that.

In your .hyper.js file, look for the shell property, which is a string, and add the path to the location of your WSL shell location.

  // ... rest of config

  shell: 'bash.exe',

  // ...

You can just add 'bash.exe' for shorthand. Otherwise, it would be something like 'C:\\Windows\\System32\\bash.exe'.

Adding plugins in Hyper

Somewhere near the end of your .hyper.js file, there'll be a plugins: [...] property where you can add awesome plugins by simply adding their respective string names (resulting in an array of strings), like so:

  // ... rest of config

  plugins: [
    'hyperterm-chesterish',
    'hyper-dark-scrollbar',
    'hyperterm-paste',
    'hyperborder'
  ],

  // ...

If you want your terminal to resemble mine, I advise you to get those plugins (you won't regret it).

For reference you can see my .hyper.js and .zshrc files here. If you need help with anything mentioned in this post you can hit me up anytime. Have fun with your new terminal๐Ÿค–.