New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode integrated terminal versus nerdfont-complete #672

Closed
rockchalkwushock opened this Issue Nov 10, 2017 · 9 comments

Comments

Projects
None yet
5 participants
@rockchalkwushock

rockchalkwushock commented Nov 10, 2017

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

screen shot 2017-11-10 at 11 29 26

iTerm2 Display

screen shot 2017-11-10 at 11 27 17

VS Code Display

screen shot 2017-11-10 at 11 27 46

@rockchalkwushock

This comment has been minimized.

Show comment
Hide comment
@rockchalkwushock

rockchalkwushock Nov 12, 2017

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,
}

screen shot 2017-11-12 at 10 26 21

rockchalkwushock commented Nov 12, 2017

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,
}

screen shot 2017-11-12 at 10 26 21

@bhilburn

This comment has been minimized.

Show comment
Hide comment
@bhilburn

bhilburn Dec 14, 2017

Owner

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?

Owner

bhilburn commented Dec 14, 2017

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?

@bhilburn bhilburn added the question label Dec 14, 2017

@rockchalkwushock

This comment has been minimized.

Show comment
Hide comment
@rockchalkwushock

rockchalkwushock Dec 14, 2017

@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",
}

screen shot 2017-12-14 at 15 20 34

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 👍

rockchalkwushock commented Dec 14, 2017

@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",
}

screen shot 2017-12-14 at 15 20 34

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 comment has been minimized.

Show comment
Hide comment
@bhilburn

bhilburn Dec 14, 2017

Owner

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

Owner

bhilburn commented Dec 14, 2017

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

@bhilburn bhilburn closed this Dec 14, 2017

@zhouchao941105

This comment has been minimized.

Show comment
Hide comment
@zhouchao941105

zhouchao941105 Sep 4, 2018

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?
2018-09-04 22 56 45

2018-09-04 22 57 08

zhouchao941105 commented Sep 4, 2018

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?
2018-09-04 22 56 45

2018-09-04 22 57 08

@luciferlu

This comment has been minimized.

Show comment
Hide comment
@luciferlu

luciferlu Sep 5, 2018

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

luciferlu commented Sep 5, 2018

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

@zhouchao941105

This comment has been minimized.

Show comment
Hide comment
@zhouchao941105

zhouchao941105 Sep 6, 2018

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

zhouchao941105 commented Sep 6, 2018

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

@bhilburn

This comment has been minimized.

Show comment
Hide comment
@bhilburn
Owner

bhilburn commented Sep 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@nomaed

nomaed Sep 15, 2018

For the DejaVu, use "DejaVuSansMono Nerd Font"

nomaed commented Sep 15, 2018

For the DejaVu, use "DejaVuSansMono Nerd Font"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment