ZSH + Oh My ZSH! on Windows with WSL
Tags: productivity, zsh, git, terminal
Published: 2023-03-03 08:14:00

## 1. Install WSL

There are plenty of good articles about how to [install WSL](https://learn.microsoft.com/en-us/windows/wsl/install) so I'm not going to detail about this step.

The easy way, install [Ubuntu from the Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9PDXGNCFSCZV)

## 2. Ubuntu

Search the Ubuntu icon on the start menu and open the terminal (you can also use [Windows Terminal](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701))

Update the package source list and updates all the packages presently installed, with this command.

```
sudo apt update && sudo apt upgrade
```

This can take a while depending on how many packages going to need to be updated. Maybe it's a good idea to take a rest.

![waiting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inlo80w5ccpkaxjcnv4d.gif)

## 3. ZSH

Bash is the default Ubuntu shell, but ZSH is in another league with his productivity boosts. So, we are going to install ZSH over Bash.

### Install

```
sudo apt install zsh
```

Verify the installed version.

```bash
zsh --version
zsh 5.8.1 (x86_64-ubuntu-linux-gnu)
```

Close and reopen the terminal, to update those changes. 

## 4. Oh my zsh!

### Install

Add superpowers to `zsh` installing **Oh my zsh!** running this command.

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

### Default

Answer `y` to change the default shell.

```
Time to change your default shell to zsh:
Do you want to change your default shell to zsh? [Y/n] y
```

### Fonts

Download and install manually the [Meslo Nerd Fonts](https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k) to include all glyphs and symbols that Powerlevel10k may need

Copy the `.ttf` files inside `~/.fonts` folder. Create one if you don't already have one.

And run these commands:

```
sudo apt install fontconfig
fc-cache -fv
```

### Theme

There are a lot of themes but my favorite is [Powerlevel10k](https://github.com/romkatv/powerlevel10k) because is easy to set up and use.

```bash
git clone https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k
```

On the `~/.zshrc` file add this additional configuration

```bash
ZSH_THEME="powerlevel10k/powerlevel10k"
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(history)
POWERLEVEL9K_SHORTEN_DIR_LENGTH=1

export LS_COLORS="rs=0:no=00:mi=00:mh=00:ln=01;36:or=01;31:di=01;34:ow=04;01;34:st=34:tw=04;34:pi=01;33:so=01;33:do=01;33:bd=01;33:cd=01;33:su=01;35:sg=01;35:ca=01;35:ex=01;32:"
```

Restart the terminal and type `p10k configure`.

![Wizard](https://dev-to-uploads.s3.amazonaws.com/i/mtrv39dhe0f0b5pe2shs.gif)

### Plugins 

**Oh My zsh!** have [a lot of plugins](https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins) to use. It's recommended to explore the options and use what is good for your needs.

I've already installed a lot related to software development and other ones to add more functionalities. Running these commands:

```bash
git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/Pilaton/OhMyZsh-full-autoupdate.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/ohmyzsh-full-autoupdate
```

And now edit the `~/.zshrc` file and add it inside the `plugins` property (don't use commas as separators)

```bash
ZSH_HIGHLIGHT_HIGHLIGHTERS=(main brackets pattern cursor root line)
ZSH_HIGHLIGHT_PATTERNS=('rm -rf *' 'fg=white,bold,bg=red')

plugins=(
    adb
    command-not-found
    extract
    deno
    docker
    git
    github
    gitignore
    history-substring-search
    node
    npm
    nvm
    yarn
    volta
    vscode
    sudo
    web-search
    z
    zsh-autosuggestions
    zsh-syntax-highlighting
    ohmyzsh-full-autoupdate
)
```

> If you are using NVM take care of following this [configuration to avoid slowing the zsh start-up](https://lakur.tech/2021/12/10/fix-slow-zsh-startup-nvm/) and this [configuration to speed up the compinit](https://gist.github.com/ctechols/ca1035271ad134841284?permalink_comment_id=3365691)

⚠ If you have done previous package configurations, alias definitions, or something else on your `~/.basrc` previous ZSH installation you need to move those manually to `~/.zshrc`.

## 4. Terminals

To use the same terminal inside VSCode and Windows Terminal follow these configurations.

### VS Code

Add these properties to the user `setttings.json`

```diff
{ 
    ...
+   "terminal.integrated.fontFamily": "MesloLGS NF",
+   "terminal.integrated.fontSize": 12,
+   "terminal.integrated.shellIntegration.enabled": true,
+   "terminal.integrated.defaultProfile.windows": "Git Bash",
+   "terminal.integrated.defaultProfile.linux": "zsh",
    ...
}
```

### Microsoft Terminal

Add these configurations to the Ubuntu terminal.

```diff
{
    "profiles": {
        "defaults": {},
        "list": [
                "colorScheme": "Ubuntu-ColorScheme",
                "cursorShape": "filledBox",
+               "font": {
+                   "face": "MesloLGS NF",
+                   "size": 10
+               },
                "guid": "{57ff1822-68a9-4a3f-90c5-a55c8557df50}",
                "hidden": false,
                "icon": "https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png",
                "name": "Ubuntu",
+               "commandline": "wsl",
+               "startingDirectory": "~/Developer"
            },
        ]
    }
}
```

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)