VSCode integrated terminal versus nerdfont-complete

[rockchalkwushock]

I'm new to zsh and am running into an issue using nerdfont-complete in my config with vscode. I was looking through related issues and found making sure the fonts match between the terminal and the integrated terminal in VSCode seems to be the underlying issue with the glyphs not displaying. Doesn't seem to be the case though with nerdfonts. Below are the pertinent screenshots and configurations. If I missed the issue that discusses this please feel free to comment with it and close as a duplicate. I'm wondering if anyone else has ran into this issue with using nerdfonts and vscode.

Thank you for your time and assistance!

tech	version
zsh	5.4.2
macOS	10.3.1
iTerm	3.1.5
VSCode	1.18.0

.zshrc

settings.json

{
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.enableBold": true,
  "terminal.integrated.fontFamily": "Source Code Pro Nerd Font Complete",
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.rightClickCopyPaste": true
}

iTerm2 Preferences

iTerm2 Display

VS Code Display

[rockchalkwushock]

Update

At first it seemed like if I found a PowerLine font that was also enabled with nerd-fonts I could get things to work in vscode. InconsolataForPowerline Nerd Font worked and then I found that the below worked as well.

My only question now is how to get the prompt to not display so lightly, almost looks like their is opacity to it.

settings.json

{
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.enableBold": true,
  "terminal.integrated.fontFamily": "MesloLGL Nerd Font",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.rightClickCopyPaste": true,
}

[bhilburn]

Hey @rockchalkwushock! Wow, I'm so sorry it's taken me over a month to respond to this! I'm clearly rather behind at the moment.

Okay, so it looks like you were able to resolve your original problem for the most part, but now have a colors issue. In most environments, that is actually a terminal setting where you define what each color looks like. So, for example, if ZSH says "draw a blue character", your terminal will say, "Okay, blue is " and draw it. What is usually totally configurable - you could make it red, if you wanted. Based on your screenshot, it looks to me like your VSCode color scheme is just off, a bit.

I'm not familiar with VScode, myself. Do you see a way anywhere in the options to tweak that?

[rockchalkwushock]

@bhilburn

No worries on the delay, I understand.

For future users that are using vscode they can follow the instructions found here on how to customize color schemes. In particular they will want to make use of the integrated terminal section.

I use material theme so the defaults for the terminal color were coming from that theme. Overwriting them looked like this (used the same theme from iTerm2: Solarized Dark Patched)

settings.json

{
"workbench.colorCustomizations": {
    "activityBarBadge.background": "#80CBC4",
    "list.activeSelectionForeground": "#80CBC4",
    "list.inactiveSelectionForeground": "#80CBC4",
    "list.highlightForeground": "#80CBC4",
    "scrollbarSlider.activeBackground": "#80CBC450",
    "editorSuggestWidget.highlightForeground": "#80CBC4",
    "textLink.foreground": "#80CBC4",
    "progressBar.background": "#80CBC4",
    "pickerGroup.foreground": "#80CBC4",
    "tab.activeBorder": "#80CBC4",
    "terminal.background": "#002833",
    "terminal.foreground": "#839496",
    "terminal.ansiBlack": "#003541",
    "terminal.ansiBlue": "#268bd2",
    "terminal.ansiBrightBlack": "#586e75",
    "terminal.ansiBrightBlue": "#839496",
    "terminal.ansiBrightCyan": "#93a1a1",
    "terminal.ansiBrightGreen": "#586e75",
    "terminal.ansiBrightMagenta": "#6c6ec6",
    "terminal.ansiBrightRed": "#cb4b16",
    "terminal.ansiBrightWhite": "#fdf6e3",
    "terminal.ansiBrightYellow": "#657b83",
    "terminal.ansiCyan": "#2aa198",
    "terminal.ansiGreen": "#859901",
    "terminal.ansiMagenta": "#d33682",
    "terminal.ansiRed": "#dc322f",
    "terminal.ansiWhite": "#eee8d5",
    "terminal.ansiYellow": "#b58901",
    "terminal.selectionBackground": "#003541"
  },
  "workbench.colorTheme": "Material Theme",
}

Doesn't look pretty with the editor scheme but the pesky white on super light green is fixed so I can read it better! Feel free to close unless you have anything to add and thanks for the help 👍

[bhilburn]

This is great! Thanks so much for providing the additional docs, @rockchalkwushock!

[zhouchao941105]

In my vscode terminal, some icon font display well , but some not.Since some font display well, does it mean that I have the right settings?

[yuntaoL]

@zhouchao941105 seems you are not using right font. Install nerd font and add font configuration item as mentioned above.

[zhouchao941105]

@LuciferLu Thank you! I installed a new nerd font from github and set it in my vscode, finally it works.

[bhilburn]

Thanks so much, everyone! I added @rockchalkwushock's settings to the Wiki, as well =)

https://github.com/bhilburn/powerlevel9k/wiki/Troubleshooting#p9k-in-the-vscode-terminal

[nomaed]

For the DejaVu, use "DejaVuSansMono Nerd Font"

[someok]

@rockchalkwushock I like your zsh theme, can your share the url?

thanks

[rockchalkwushock]

@someok

ZSH_THEME="powerlevel9k/powerlevel9k"

https://github.com/bhilburn/powerlevel9k

[TheButlah]

This doesn't work for me. I tried downloading https://github.com/ryanoasis/nerd-fonts/blob/master/patched-fonts/Meslo/M/Regular/complete/Meslo%20LG%20M%20Regular%20Nerd%20Font%20Complete%20Mono.ttf and copying it into ~/Library/Fonts

I set "terminal.integrated.fontFamily": "MesloLGM Nerd Font"

It still gives the weird characters. I can't figure out how to fix it.

[TheButlah]

Update: I'm really dumb

The filename is separate from what you actually have to put into vs code. In my case, the font name was actually MesloLGM Nerd Font Mono

I spent two hours on this.... smh

[bennowak]

Ok. So I think I figured out the problem, ... on MacOSX at least (and maybe on other platforms). When you name the font in VSCode settings it has to match EXACTLY what is reported by your font manager. Not what the filename (or what the download says it's called). Be sure that the names match.

For example:
I had
"terminal.integrated.fontFamily": "Meslo LG M DZ Regular Nerd Font Complete Mono"
but it was actually
"terminal.integrated.fontFamily": "MesloLGMDZ Nerd Font Mono"

That did the trick for me. Hope that helps someone. Give that a try @TheButlah @rockchalkwushock @bhilburn

[mliradelc]

Ok. So I think I figured out the problem, ... on MacOSX at least (and maybe on other platforms). When you name the font in VSCode settings it has to match EXACTLY what is reported by your font manager. Not what the filename (or what the download says it's called). Be sure that the names match.

For example:
I had
"terminal.integrated.fontFamily": "Meslo LG M DZ Regular Nerd Font Complete Mono"
but it was actually
"terminal.integrated.fontFamily": "MesloLGMDZ Nerd Font Mono"

That did the trick for me. Hope that helps someone. Give that a try @TheButlah @rockchalkwushock @bhilburn

Thanks, I was wondering for days why I couldn't configure the fonts in my VScode.

[irfanbaigse]

vscode fonts for the terminal and the icons from Nerd Font.
https://gist.github.com/480/3b41f449686a089f34edb45d00672f28#gistcomment-2975644