Setting Up Development In Wsl

By the end of this guide, you’ll have the following installed:

• WSL
• Git
• zsh
• Node
• tmux

WSL

This guide will use “Ubuntu”. So your mileage may vary.

Enable the feature

You will be prompted to restart your machine after enabling.

Search for “Turn Windows features on or off”.

And check the option that says “Windows Subsystem for Linux”.

Download Ubuntu from the store

As of this writing, the “Ubuntu” with no version number is 20.04.

Converting to WSL 2

Open powershell and wsl --set-version <name> 2 on the distro you want to upgrade.

To move your projects to the WSL network, just do explorer.exe . on the directory like ~/projects to open it in the File Explorer and copy your files.

To open your projects in VSCode, navigate to the directory and do code ..

Copy and Pasting

Right click on the title bar of the Ubuntu terminal and click on Properties. In the Options tab, check “Use Ctrl+Shift+C/V as Copy/Paste”

Fonts

Some characters will not work out of the box. I’m currently using “DejaVu Sans Mono for Powerline”.

Download is available here ↗️

Git

Install Git

1
sudo apt-get update
2
sudo apt-get install git
3

4
# verify
5
git --version

Set your identity

1
git config --global user.name "John Doe"
2
git config --global user.email "john.doe@gmail.com"

A better git log

1
git config --global alias.lg "log --color --graph --pretty=format:'%C(bold yellow)%h%Creset -%C(bold cyan)%d%Creset %s %C(bold cyan)(%cr) %C(bold red)<%an>%Creset' --abbrev-commit"

Use it by running git lg

Colors available are: normal, black, red, green, yellow, blue, magenta, cyan, white

Attributes available: bold, dim, ul, blink, reverse

Configure Git to push on current branch

To avoid pushing to the wrong branch, especially master.

1
git config --global push.default current

When doing a push, no need to specify to which branch. Just run git push origin and it will push to whatever branch you’re currently on.

Hub

This is optional. Hub is a superset of git like how TypeScript is a superset of JavaScript.

1
# Install binary and documentation
2
wget https://github.com/github/hub/releases/download/v2.2.9/hub-linux-amd64-2.2.9.tgz
3
tar zvxvf hub-linux-amd64-2.2.9.tgz
4
sudo ./hub-linux-amd64-2.2.9/install
5

6
# Skipped autocomplete and alias
7

8
# Cleanup
9
rm -rf hub-linux-amd64-2.2.9

With hub you can do a pull request to github by running hub pull-request -b <branch> -m <pr_message>.

Generate SSH key

1
ssh-keygen -t rsa -C "your_email@example.com"
2

3
# You can just press Enter when it asks to enter a file to save the key
4

5
# Copy key to clipboard
6
cat ~/.ssh/id_rsa.pub
7

8
# Add the ssh key on github or bitbucket

ZSH Shell

I prefer zsh but you can replace it with others like fish or just the default bash shell.

Install ZSH

1
sudo apt-get install zsh
2

3
# verify
4
zsh --version
5

6
# set as default
7
chsh -s $(which zsh)
8

9
# reopen the terminal

You’ll be greeted with this screen, select the (q) option.

Installing Oh my ZSH

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

Auto suggest

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

Using plugins in ZSH

Edit your ~/.zshrc file and find the plugins section

1
# find this line and add the following
2
plugins=(git ssh-agent zsh-autosuggestions)

Refresh zsh to apply the changes

1
source ~/.zshrc

Node

This will install Node using nvm to avoid using sudo

Install by nvm (Recommended)

1
# you can replace zsh with bash
2
# this will add some scripts to the .zshrc or .bashrc
3
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
4

5
# Note: On Linux, after running the install script, if you get nvm: command not found or see no feedback from your terminal after you type:
6
command -v nvm
7

8
# If that doesn't work, you can try this command instead
9
source ~/.nvm/nvm.sh
10

11
# To verify nvm installation
12
nvm --version
13

14
# install latest lts
15
nvm install --lts # or `nvm install 12` for specific version
16

17
# To verify node installation
18
node --version

The normal way which will require sudo

1
# replace "setup_8.x" with the version you want
2
# like "setup_7.x" if you want to install version 7.x
3
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
4
sudo apt-get install -y nodejs
5

6
# verfiy
7
node -v
8
npm -v
9

10
# to update npm (if necessary)
11
npm i -g npm

Reinstalling node

1
sudo apt-get remove nodejs
2
sudo apt-get remove npm
3
sudo apt-get update
4

5
# verify by running
6
which nodejs npm node
7

8
# should return a 'not found'
9
# then install again

tmux

Install tmux

1
sudo apt-get update
2
sudo apt-get install tmux
3

4
# verify
5
which tmux
6
# /usr/bin/tmux
7

8
# start tmux
9
tmux

Configuring tmux

Create a tmux configuration file

1
# Create .tmux.conf in your home directroy
2
# This will hold tmux configurations
3
cd ~
4
nano .tmux.conf

Add the 1st part on the config for now

1
# remap prefix from C-b to C-a
2
unbind C-b
3
set-option -g prefix C-a
4
bind-key C-a send-prefix
5

6
# set pane using mouse
7
set -g mouse on
8

9
# make tmux use your preffered shell
10
set-option -g default-shell /bin/zsh
11

12
# use 256 term for pretty colors
13
set -g default-terminal "screen-256color"
14

15
# decrease command delay (increases vim responsiveness)
16
set -sg escape-time 1
17

18
# color status bar
19
set -g status-bg colour235
20
set -g status-fg white
21

22
# new pane on the same path
23
bind '"' split-window -c "#{pane_current_path}"
24
bind % split-window -h -c "#{pane_current_path}"
25

26
# add tmux prefix key pressed indicator
27
set -g status-right '#{prefix_highlight} | %a %Y-%m-%d %H:%M'
28

29
# customize indicator
30
set -g @prefix_highlight_bg 'colour201'
31
set -g @prefix_highlight_fg 'black'

1
# to apply modifications
2
tmux source-file .tmux.conf

Installing plugins

This will install the following plugins:

• tpm
• tmux-sensible
• tmux-resurrect
• tmux-prefix-highlight

Add the rest of the config

1
# list of plugins
2
set -g @plugin 'tmux-plugins/tpm'
3
set -g @plugin 'tmux-plugins/tmux-sensible'
4
set -g @plugin 'tmux-plugins/tmux-resurrect'
5
set -g @plugin 'tmux-plugins/tmux-prefix-highlight'
6

7
# keep this at the bottom of .tmux.conf
8
# initialize tmux plugin manager
9
run '~/.tmux/plugins/tpm/tpm'

1
# to install tmux plugins
2
prefix + I
3
#ctrl+a, shift+i

There’s no progress indicator but once complete this screen will show

tmux key combinations

• prefix % - split horizontally
• prefix " - split vertically
• prefix ctrl+s - save layout for tmux-resurrect
• prefix ctrl+r - reload layout
• prefix c - create a window
• prefix w <window_number> - switch to a window
• prefix x - close a pane
• prefix z - make pane fullscreen

other key combinations

To highlight texts inside WSL while using tmux you’ll have to hold down shift and highlight.

• ctrl+shift+c - copy highlighted text
• ctrl+shift+v - paste to terminal while using tmux

Refer to #copy-and-pasting for the combinations above

If you’re using Windows Terminal ↗️, you still need to hold shift when highlighting but you can use the normal ctrl+c and ctrl+v.

Update history:

• Jan 20, 2021 - updated nvm section, add source ~/.nvm/nvm.sh
• Jan 20, 2021 - updated tmux section, add tmux command to go to tmux
• Feb 09, 2021 - add setopt HIST_IGNORE_SPACE
• Aug 09, 2022 - remove setopt HIST_IGNORE_SPACE, update stuff