Setting up `oh-my-zsh` on Vistual Studio Code on Windows 10

Solaiman Kabir
3 min readNov 27, 2020

Terminals and Command Line Interfaces are your best friends if you are a developer. Would you not like to spice up your best friend or just “BASH” it over? zsh would do the job. There are many reasons why you should choose zsh over bash such as customizability, autocomplete, spellchecking and what not. But in this article, I will go over how you can get zsh running on windows without Windows Subsystem for Linux (WSL).

The first tool you need is git for windows. You can download and install it from here, which is pretty straightforward. It comes with ‘git bash’ which is what we will be using.

VS Code: command palette

Once it is installed you would want to launch your Visual Studio Code and open up the command palette (Ctrl+Shift+P). Search for ‘Terminal: Select Default Shell’ and select Git Bash from the drop-down.

We are half-way there. Give your self a pat at this point.

Fire up your terminal in VS Code (Ctrl+`) and you should see something like this. From there it’s just a few lines of commands.

curl -L https://repo.msys2.org/msys/x86_64/zsh-5.8-3-x86_64.pkg.tar.xz — output zsh.pkg.tar.xztar xvJf zsh.pkg.tar.xz — directory /

Alternatively, you can download it from here and extract in you git bash location (C:\Program Files\Git)

zsh

Now run the command zsh in your git bash terminal and voila! you have zsh. If you did everything correctly you should see something like this.

To make zsh your default shell, you will need to modify your .bashrc file.

code ~/.bashrc

This command will open up .bashrc file in VS Code. You can add the following lines.

if [ -t 1 ]; thenexec zshfi

Now we have zsh as our default terminal shell in VS Code. To setup the theme, we need to use a few more commands.

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
code ~/.zshrc

Now add the following lines to your .zshrc file

ZSH_THEME="powerlevel10k/powerlevel10k"

That’s it. You can restart your VS Code to have zsh with powerlevel10k theme. Run the following command and you will be prompted with a lot of customization option.

p10k configure

If you want my configuration you can download my .p10k.zsh file from github and copy to your home directory (C:\Users\[User name])

There you go you have you zsh with cute looking cactus and cats and what not!!!

oh-my-zsh with git-bash VS Code integrated terminal (windows 10)

If you want my color scheme add the following lines to your VS Code ‘settings.json’ file.

“workbench.colorCustomizations”: { 
//”terminal.background”: “#1D2021”,
“terminal.foreground”: “#ebebeb”,
“terminalCursor.background”: “#ff9500”,
“terminalCursor.foreground”: “#ffe9cb”,
“terminal.ansiBlack”: “#1D2021”,
“terminal.ansiBlue”: “#fcff31”, //right
“terminal.ansiYellow”: “#31ffee”, //left
“terminal.ansiBrightBlack”: “#5a5e72”, //sub-text “terminal.ansiBrightBlue”: “#0D6678”,
“terminal.ansiBrightCyan”: “#8BA59B”,
“terminal.ansiBrightGreen”: “#95C085”,
“terminal.ansiBrightMagenta”: “#8F4673”,
“terminal.ansiBrightRed”: “#242424”,
“terminal.ansiBrightWhite”: “#FDF4C1”,
“terminal.ansiBrightYellow”: “#FAC03B”,
“terminal.ansiCyan”: “#8BA59B”,
“terminal.ansiGreen”: “#75fb69”,
“terminal.ansiMagenta”: “#202020”,
“terminal.ansiRed”: “#FB543F”,
“terminal.ansiWhite”: “#A89984”
}

For more customization options refer to the following links:

Powerlevel9k: https://github.com/Powerlevel9k/powerlevel9k

VS Code Color Customization: https://code.visualstudio.com/api/references/theme-color

Alright then! HACK AWAY!!! See you in the next one.

--

--

Solaiman Kabir

Full-stack Web Developer | Deep Learning Enthusiast