Configure VSCode to work with Zsh

zsh is an extended Bourne shell equipped with many improvements, including useful features from bash, ksh and tcsh. Zsh features ranging from automatic cd, where you can simply type a directory name to navigate to it, to built-in spell-check, recursive path expansion, etc.

zsh also supports plug-ins, which enables things like the popular Oh-My-Zsh - an open source, community-driven framework for managing your zsh configuration, which adds even more features and makes advanced configuration easier.

In this article, we're going to show you how to install and configure Zsh and Oh-My-Zsh to work peacefully with VSCode.

Install and configure Zsh/Oh-My-Zsh

First, you have to install zsh itself. zsh is available in most popular package manager database. In Ubuntu/Debian, you can install it using apt-get.

sudo apt-get install zsh -y

After that, you can install Oh-My-Zsh framework using curl or wget, as well as its required fonts.

sudo sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
sudo apt-get install fonts-powerline ttf-ancient-fonts -y
## OR ##
sh -c "$(wget -O- https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
sudo apt-get install fonts-powerline ttf-ancient-fonts -y

During installation you would be asked to make zsh your default terminal, choose Yes.

Change VSCode default terminal

After installing and configure Zsh/Oh-My-Zsh, you need to change VSCode settings to use it instead of bash.

We're going to add the following key to VSCode settings.

"terminal.integrated.shell.linux": "/bin/zsh"
"terminal.integrated.shell.osx": "/bin/zsh"

In Visual Studio Code, go to File -> Preferences -> Settings to open the settings view. Alternatively, fire up Command Palette and search for Settings (JSON).

Add the following lines to settings.json or find and change them one by one.

"terminal.integrated.shell.linux": "/bin/zsh",
"terminal.integrated.shell.osx": "/bin/zsh",

Change VSCode terminal font to Powerline

You may notice that Zsh and Oh My ZSH works in the the normal terminal but not in Visual Studio Code’s terminal, as it needs a monospaced font and the patched Powerline font installed isn’t one of them.

By default, VSCode uses the same font for both the editor and the terminal. But in order to display special characters, Zsh needs Powerline, otherwise the terminal would output gibberish.

image-20210531100916384

However, you can use Menlo for Powerline, a patched version of the monospaced Menlo font guaranteed to work with Powerline.

On an Ubuntu machine, you need to clone the repo, copy it to /usr/share/fonts/ and refresh the fonts cache using these commands :

git clone https://github.com/abertsch/Menlo-for-Powerline.git
cd Menlo-for-Powerline
sudo mv * /usr/share/fonts/
sudo fc-cache -vf /usr/share/fonts/

Next, you have to set the font for VSCode terminal. Fire up Command Palette and search for Settings (UI). In the new Settings tab, look for Terminal Font setting and change it to Menlo for Powerline.

image-20210531100650984

Here you can see that VSCode terminal is now working with zsh.

image-20210531101057556

Click to rate this post!
[Total: 27 Average: 5]

Leave a Comment