Level-up your VSCode terminal to oh-my-zsh shell on Windows 10

5 min readOct 27, 2018

Set up WSL. And then install Node. And then set up Zsh! And then oh-my-zsh!! And then theming!!! And then 2 helpful plugins for you!!!! And…then use zsh in vscode!!!!! *mic drop*

“four men standing outside storefront” by frankie cordoba on Unsplash

EDIT [17 Jan 2019]: I have since went back to using Git Bash. I think all this is worth it if: 1) You intended to be a power user of Linux/Bash, 2) What you do deals with Linux heavily like devOps etc, 3) Its horrible UI/UX don’t bother you unless read Point-1. Otherwise, keep it simple and boring and ship it! 🚀

EDIT [29 Jan 2020]: WSL Bash is back as my terminal in VSCode! Turns out using just plain bash is actually quite pleasant without complication from stuff like zsh 😃

If you are a web developer and a Windows 10 user, installing the ‘Window Subsystem for Linux’(WSL) will enable you to tap into an existing open source solution space to solve your common development problems that you might encounter by using popular Linux command-line utilities like apt-get , git , nano , vim , ssh and etc!

Here we go! 🚀

Install the WSL

First, install WSL and the Ubuntu distro. All that is easily done just following this official guide!

Launch WSL

windows key + s and search for ubuntu and enter, and you are in the Ubuntu’s bash!

Windows Key + r
Type cmd and enter to open the command prompt.
Type wsl (recommended) or ubuntu or bash

source

Now you might see something like below:

The /mnt/c/Users/<win_user_name> maps to your Windows machine path — C:\Users\<win_user_name> so you can actually access your Windows filesystem in the Ubuntu Bash! So to translate your Windows path, you would do something like cd /mnt/c to end up in the C:\ and so on.

Note that the <user_name> is your Windows’s name, not the one you entered when setting up WSL before, which will be the name of your Ubuntu home directory — /home/<Ubuntu_name> — which is where you would end up when you do cd ~ too. We will use the ~a lot later!

OK, now stay in the bash cuz we are going to switch over to a different shell called Zsh! 🚀

Install Node

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.9/install.sh | bashsource ~/.bashrcnvm install --ltsnvm alias default 8.12.0

Now you are running by default, as of writing, the latest Node release 8.12.0 .

If you are getting nvm command not found error after installation, try putting source ~/.nvm/nvm.sh in your ~/.bash_profile .

Install Zsh

sudo apt-get install zsh
Verify it’s installed — zsh --version, expects zsh 5.1.1 or more recent
Make it your default shell: chsh -s $(which zsh)
Close and reopen your bash window…
Test that it worked with echo $SHELL. Expects /bin/zsh
Test with $SHELL --version expects zsh 5.1.1 or similar

source

Install Oh-My-Zsh

Run this in your new terminal:

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

Nano editor (Prelude)

Next, we are going to have to use ‘Nano’ editor to edits files inside our command line.

Personally, I hate using it, but have a look at this short guide on the basics and you will go quite far for sure.

Specifically for the matter at hand, ^ is the ctrl key, and M is the Alt key. So if you see ^+w , you will do ctrl+w , and M+wwill be alt+w 😖.

OK, let’s go.

Enable Node/npm commands in Zsh

Since now that our bash defaults to the Zsh shell, when you fire up your terminal, it will run the ~/.zshrc instead of the ~/.bashrc which contains the sourcing of nvm stuffs. So now we need to copy and paste that sourcing part into the ~/.zshrc .

Here goes,

Run nano editor with multiple buffer -F :

nano -F ~/.zshrc

2. Press ctrl+r .

3. From inside nano editor, open the source file~/.bashrc

4. Select the following text.

Tip:shift+down arrow to select multiple lines of text.

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

5. Copy it to clipboard by pressing Alt+^

6. Press ctrl+x to close the current file which is the source file.

7. Now we will see the previous ~/.zshrc file.

8. Move the cursor to the beginning of the file and paste the copied text.

9. Press ctrl+u to paste the text.

10. Press ctrl+x , then press Y to confirm save changes before exit the editor.

11. Run source ~/.zshrc to reload the file.

12. Run node -v && npm -v and you should see them version numbers!🚀 🎈

(adapted from here)

Theming 💅

Although there are tons of themes you can choose from, personally I like the Pure theme. Using one is easy too!

nano ~/.zshrc
Press ctrl-w to search for zsh_theme keyword.
Then insert refined value into the ZSH_THEME like so:

4. ctrl-x , Y to exit.

5. source ~/.zshrc to reload the config! And you should have it! 💪

Install Plugins

We will just install 2 very useful plugins here — zsh-syntax-highlighting to add syntax highligting, and zsh-autosuggestion to suggest your previous commands!

Run these two:

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

Then as usual go to nano ~/.zshrc , ctrl-w search for plugin= , and add the plugins:

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

Then source ~/.zshrc to see the changes! 👯

Leveling up your VSCode terminal

Now for the grand finale we will integrate this Ubuntu Bash to be used as your VSCode’s terminal!

In your VSCode:

Press ctrl+shift+p to fire up the command box.
Type ‘select default shell’ to filter, and select and enter the Terminal-Select Default Shell .

3. Finally, select the WSL Bash ! Then reload the terminal close open or whatever, and you should see it loaded to our zsh shell automatically. 🐚

Alright! I think that’s all from me! kthxb!

Shameful plug: I’m building a Markdown editor. Check it out.