ZSH distorts in my VS code terminal and shows characters with long spaces

Question

I enabled zsh on my vs code terminal but it displays like this:

here is my settings.json:

how can I fix it?

Answer 1

In Ubuntu 20.04 none of the stuff in the answers worked for me, it kept complaining about with the message:

The terminal only supports monospace fonts.

So I dig a bit and this is my solution:

No need to add extra fonts in Ubuntu 20.04 to fix this, we just need to add the missing powerline fonts inside vscode to display the symbols correctly.

So I just added to my settings and rebooted the program:

{
    ...
    "terminal.integrated.fontFamily": "monospace, PowerlineSymbols",
    ...
}

And everything was nice and smooth and I could see my VSCode terminal with powerline just like the regular OS terminal.