Making Powerline Work in Visual Studio Code

Powerline is a statusline plugin for vim that can be used in other tools, including the shell feature in Visual Studio Code. Learn how to make it work.   

Written by Matt Stratton
Published on Sep. 12, 2024
Two developers reviewing code on a terminal
Image: Shutterstock / Built In
Brand Studio Logo

Powerline is a statusline plugin originally created for use in vim, and can also be used for statuslines and prompts in other tools, including bash, zsh and other shells. The shell feature in Visual Studio Code (VS Code) is one of those use cases.

What Is Powerline in Visual Studio Code (VS Code)? 

Powerline is a statusline and prompt plugin that can be used in the shell feature for Visual Studio Code. It is a plugin that was originally developed for vim and can also be used in other tools like bash, zsh and other shells.   

However, when you use Powerline in VS Code, you may run into an error where it doesn’t properly represent your Powerline prompt.

zsh prompt in VS Code
zsh prompt in VS Code. | Screenshot: Matt Stratton
zsh prompt in iterm
zsh prompt in iTerm. | Screenshot: Matt Stratton

We’ll take a look at how to make Powerline work in VS Code.

More on Software EngineeringA Guide to Vim Visual Mode

 

How to Make Powerline Work in VS Code

It only takes two steps to make Powerline work in VS Code. The following solution works in OS X, but I believe a similar solution would apply on Windows or Linux:

  1. Download the proper patched font.
  2. In your user settings (Code | Preferences | Settings) add this:
{
"terminal.integrated.fontFamily": "Menlo for Powerline",
}

And now, my prompt in code looks right!

Prompt code in VS Code.
Prompt code in VS Code. | Screenshot: Matt Stratton

Yes, the colors look different than the previous screenshot. Since taking those screenshots, I changed from using the powerlevel9koh-my-zsh theme to the powerline-go.

 

A tutorial on how to resolve an error with Powerline in VS Code. | Video: Huy Nguyen USA

More on Software EngineeringBypass AWS API Gateway Limits Using S3 Presigned URLs

Frequently Asked Questions

If powerline isn’t displaying properly in Visual Studio Code, follow these steps:

  1. Download the patched font. 
  2. Enter the following code to adjust the user settings:
{
"terminal.integrated.fontFamily": "Menlo for Powerline",
}

Powerline can be used to create prompts in the shell feature in Visual Studio Code.

Explore Job Matches.