Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
MacOS X + oh my zsh + powerline fonts + visual studio code terminal settings

MacOS X + oh my zsh + powerline fonts + visual studio code (vscode) terminal settings

Thank you everybody, Your comments makes it better

Install oh my zsh

http://ohmyz.sh/

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install powerline fonts

https://github.com/powerline/fonts

or Install Nerd Fonts. (If you don't use powerline fonts)

https://www.nerdfonts.com/font-downloads

recommend font: Hack Nerd Font https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Hack.zip

Change settings for vscode

How?

  1. open vscode
  2. open Command Pallete (Short Cut: F1)
  3. type settings and Select Preferences: Open Settings (JSON)
  4. Add or Edit below settings to Settings JSON file
  5. Save.
  6. That's all

ps. This JSON type is JSON with Comments, so you can use comment syntax in it.

"terminal.integrated.fontFamily": "Source Code Pro for Powerline",
"terminal.integrated.shell.osx": "/bin/zsh"

// @Drakal added
// I'd also consider adjusting line height if icons are cut off on top too or things look super cramped.
// "terminal.integrated.lineHeight": 1.3

// @ChongTang, @ramonsantos added
// @gaochundong said it works like a charm.
// "terminal.integrated.fontFamily": "Hack Nerd Font"

// @dalekurt added (belows which gives me the the fonts for the terminal and the icons from Nerd Font.)
// "terminal.integrated.fontFamily": "'Source Code Pro for Powerline', 'Hack Nerd Font'

// @nickhingston , @olivebay added for powerlevel10k
// I use powerline10k - which uses https://github.com/romkatv/powerlevel10k/#recommended-meslo-nerd-font-patched-for-powerlevel10k
// so this worked for me:
// "terminal.integrated.fontFamily": "MesloLGS NF" 

// @kaustuv added
// after the changing the font, still had some issues with the glyph spacing in the integrated terminal - fixed it with 
// @ar2zee : fixed the problem for me.
// "terminal.integrated.rendererType": "canvas"

Change Theme for Mac OSX Terminal to agnoster

  1. Add DEFAULT_USER=whoami in ~/.zshrc
  2. Change Theme to agnoster in ~/.zshrc
  3. Restart Terminal or source ~/.zshrc

Download agnoster theme and set up

  1. Download https://github.com/mbadolato/iTerm2-Color-Schemes/zipball/master

  2. Unzip

  3. Open Mac Terminal

  4. CMD + , open settings

  5. on Left Sidebar, Click Config Icon and Select Import...

  6. Choose Terminal Schema: UnzipPath/terminal/*.terminal

  7. I recommend Solarized Dark.terminal

  8. then, make it default (select imported schema and click "Default" button below)

  9. That'all. if you restart terminal, you can see great agnoster theme with oh my zsh.

@ChongTang

This comment has been minimized.

Copy link

@ChongTang ChongTang commented Apr 10, 2019

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

@vishwa-amit

This comment has been minimized.

Copy link

@vishwa-amit vishwa-amit commented May 3, 2019

Awesome, Worked for me

@rediphone

This comment has been minimized.

Copy link

@rediphone rediphone commented Jun 11, 2019

<3

@rmcsharry

This comment has been minimized.

Copy link

@rmcsharry rmcsharry commented Jun 29, 2019

YOU sir, are a hero for saving this πŸ₯‡

@ramonsantos

This comment has been minimized.

Copy link

@ramonsantos ramonsantos commented Jul 9, 2019

"terminal.integrated.fontFamily": "Hack Nerd Font"

This solved my problem. Thanks!

@dalekurt

This comment has been minimized.

Copy link

@dalekurt dalekurt commented Jul 20, 2019

I'm using this "terminal.integrated.fontFamily": "'Source Code Pro for Powerline', 'Hack Nerd Font'", which gives me the the fonts for the terminal and the icons from Nerd Font.

@lhdgriver

This comment has been minimized.

Copy link

@lhdgriver lhdgriver commented Aug 14, 2019

Awesome, Worked for me

@Mightynumnums

This comment has been minimized.

Copy link

@Mightynumnums Mightynumnums commented Aug 14, 2019

Thank you! Worked like a charm!

@kaustuv

This comment has been minimized.

Copy link

@kaustuv kaustuv commented Aug 17, 2019

after the changing the font, still had some issues with the glyph spacing in the integrated terminal - fixed it with "terminal.integrated.rendererType": "canvas"

@artixzenevich

This comment has been minimized.

Copy link

@artixzenevich artixzenevich commented Sep 19, 2019

Thanks!!!

@kisakyegordon

This comment has been minimized.

Copy link

@kisakyegordon kisakyegordon commented Oct 19, 2019

πŸ‘ŒπŸΎ

@gaochundong

This comment has been minimized.

Copy link

@gaochundong gaochundong commented Oct 23, 2019

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

@darlingof02

This comment has been minimized.

Copy link

@darlingof02 darlingof02 commented Nov 3, 2019

Thanks a lot!!!

@olivebay

This comment has been minimized.

Copy link

@olivebay olivebay commented Nov 9, 2019

I am using Meslo LG S for Powerline

@ar2zee

This comment has been minimized.

Copy link

@ar2zee ar2zee commented Nov 20, 2019

"terminal.integrated.rendererType": "canvas" fixed the problem for me.
Thank you.

@Drakal

This comment has been minimized.

Copy link

@Drakal Drakal commented Dec 6, 2019

I'd also consider adjusting line height if icons are cut off on top too or things look super cramped.
"terminal.integrated.lineHeight": 1.3

@nickhingston

This comment has been minimized.

Copy link

@nickhingston nickhingston commented Jan 13, 2020

I use powerline10k - which uses https://github.com/romkatv/powerlevel10k/#recommended-meslo-nerd-font-patched-for-powerlevel10k
so this worked for me:

"terminal.integrated.fontFamily": "MesloLGS NF" 
@aendre

This comment has been minimized.

Copy link

@aendre aendre commented Jan 31, 2020

Thanks! The font is finally working well!

@smlombardi

This comment has been minimized.

Copy link

@smlombardi smlombardi commented Feb 21, 2020

The new JetBrains Mono also works: https://www.jetbrains.com/lp/mono/

@deexiao

This comment has been minimized.

Copy link

@deexiao deexiao commented Feb 24, 2020

thanks!!

@samerlol

This comment has been minimized.

Copy link

@samerlol samerlol commented Feb 29, 2020

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

You are genius...

@piyushgupta009

This comment has been minimized.

Copy link

@piyushgupta009 piyushgupta009 commented Mar 2, 2020

thanks !

@ddavidebor

This comment has been minimized.

Copy link

@ddavidebor ddavidebor commented Mar 3, 2020

"terminal.integrated.fontFamily": "MesloLGS NF"

Thanks, this works wonders!

@kureharyosuke

This comment has been minimized.

Copy link

@kureharyosuke kureharyosuke commented Mar 9, 2020

당신이 μžλž‘μŠ€λŸ½μŠ΅λ‹ˆλ‹€.

@MikeyBeez

This comment has been minimized.

Copy link

@MikeyBeez MikeyBeez commented Mar 28, 2020

My blurred prompt ends look strange. I can see large pixels.

@480

This comment has been minimized.

Copy link
Owner Author

@480 480 commented Apr 9, 2020

My blurred prompt ends look strange. I can see large pixels.

@MikeyBeez
You have to install Powerline fonts and Setting Theme agnoster in ~/.zshrc
See This Link for help : https://github.com/agnoster/agnoster-zsh-theme

@kureharyosuke

This comment has been minimized.

Copy link

@kureharyosuke kureharyosuke commented Apr 9, 2020

@480

This comment has been minimized.

Copy link
Owner Author

@480 480 commented Apr 9, 2020

@kureharyosuke Thanks.

@pawlean

This comment has been minimized.

Copy link

@pawlean pawlean commented Apr 12, 2020

Thanks so much - finally fixed the issue I've been having on my VS Code πŸ‘

@MikeyBeez

This comment has been minimized.

Copy link

@MikeyBeez MikeyBeez commented Apr 14, 2020

Thank you!

@douglasresende

This comment has been minimized.

Copy link

@douglasresende douglasresende commented Apr 17, 2020

    "terminal.integrated.shell.osx": "/bin/zsh",
    "terminal.integrated.fontFamily": "'SourceCodePro+Powerline+Awesome Regular'",
    "terminal.integrated.rendererType": "canvas",
    "terminal.integrated.fontSize": 12,
    "terminal.integrated.lineHeight": 1.1
@JordanBelmont

This comment has been minimized.

Copy link

@JordanBelmont JordanBelmont commented Apr 24, 2020

Hey all,
Still struggling with this one. For some reason, the right-pointing triangle at the end of the prompt bar (U+E0B0) is too small compared to the rest of the bar, leaving a gap beneath it.
I'm using powerlevel10k and tried the "MesloLGS NF" font, but no dice.
I've also played around with the fontSize, lineHeight, added rendererType and tried other fonts - nothing seems to work.
I don't have powerline fonts as I'm using Nerd Fonts instead, and I don't have iTerm2, just oh-my-zsh (Mac).

I've also seen this mentioned a little on the official 10k github page, but it's a bit vague on how to fix it.

Any help with this would be much appreciated, thanks!

@sonoroot

This comment has been minimized.

Copy link

@sonoroot sonoroot commented May 13, 2020

Epic

@gabubellon

This comment has been minimized.

Copy link

@gabubellon gabubellon commented May 13, 2020

Tks !!!

@ilanh

This comment has been minimized.

Copy link

@ilanh ilanh commented Jun 4, 2020

Thanks for sharing, you made my vscode complete now. πŸ‘

@GalphaXie

This comment has been minimized.

Copy link

@GalphaXie GalphaXie commented Jun 13, 2020

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

It's helpful for me, thx

@mariotip

This comment has been minimized.

Copy link

@mariotip mariotip commented Jun 22, 2020

'Hack Nerd Font'
image

@AnmolMago

This comment has been minimized.

Copy link

@AnmolMago AnmolMago commented Jun 29, 2020

canvas did not work for me as it did for the others above.

"terminal.integrated.rendererType": "dom"

fixed the issue with glyphs not rendering properly for me.

If anything I recommend just iterating through the values ("auto", "canvas", "dom", "experimentalWebgl") to see what works best for you

@jl88s

This comment has been minimized.

Copy link

@jl88s jl88s commented Jun 30, 2020

Thank you for doing this, it worked as advertised!

*If you're not sure where to place the code; it should be copied and pasted inside the curly braces.

@thoratica

This comment has been minimized.

Copy link

@thoratica thoratica commented Jul 3, 2020

"terminal.integrated.rendererType": "canvas" fixed the problem for me.
Thank you.

Works great!

@dongrerohan421

This comment has been minimized.

Copy link

@dongrerohan421 dongrerohan421 commented Aug 2, 2020

"terminal.integrated.fontFamily": "MesloLGS NF"

Works great!

@MarslMarcello

This comment has been minimized.

Copy link

@MarslMarcello MarslMarcello commented Aug 4, 2020

Nice! Thanks for the tip and help. It works great now. πŸ‘Œβ€οΈπŸ€“
image

@venkyjsdev

This comment has been minimized.

Copy link

@venkyjsdev venkyjsdev commented Aug 11, 2020

I am using Meslo LG S for Powerline

thanks, mate .. works great!

@pgalilea

This comment has been minimized.

Copy link

@pgalilea pgalilea commented Sep 1, 2020

"terminal.integrated.fontFamily": "MesloLGS NF"

For powerline10k the above line with

"terminal.integrated.rendererType": "canvas"

worked like a charm!!!

@MyKEms

This comment has been minimized.

Copy link

@MyKEms MyKEms commented Sep 8, 2020

I use powerline10k - which uses https://github.com/romkatv/powerlevel10k/#recommended-meslo-nerd-font-patched-for-powerlevel10k
so this worked for me:

"terminal.integrated.fontFamily": "MesloLGS NF" 

πŸ™ Works as expected

@rschristian

This comment has been minimized.

Copy link

@rschristian rschristian commented Sep 23, 2020

Any chance anyone might now what creates this small gap between the chevron-like symbol and the previous block? It's like a 1 pixel gap. Not the worst, but looks a bit odd, especially with the red-on-black with an error.

I only have the following setting set and I have gone through all rendererType options with no effect.

"terminal.integrated.fontFamily": "SF Mono Powerline",
"terminal.integrated.shell.osx": "/bin/zsh",

temp

@Burnett2k

This comment has been minimized.

Copy link

@Burnett2k Burnett2k commented Sep 29, 2020

When I used rendererType of canvas, my prompt had an annoying line at the bottom. It looks slightly better using dom, but it still looks incorrect. I'm using Powerlevel10k.

image

@rschristian

This comment has been minimized.

Copy link

@rschristian rschristian commented Sep 29, 2020

When I used rendererType of canvas, my prompt had an annoying line at the bottom. It looks slightly better using dom, but it still looks incorrect. I'm using Powerlevel10k.

image

I believe that's a font size / line height issue. Play around with it a bit

@roshanCN

This comment has been minimized.

Copy link

@roshanCN roshanCN commented Oct 11, 2020

Thanks! this worked for me

@YUN-RU-TSENG

This comment has been minimized.

Copy link

@YUN-RU-TSENG YUN-RU-TSENG commented Oct 23, 2020

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

it works, thx.

@zwsnail

This comment has been minimized.

Copy link

@zwsnail zwsnail commented Oct 29, 2020

+1 πŸ‘

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

image

@russell-shizhen

This comment has been minimized.

Copy link

@russell-shizhen russell-shizhen commented Nov 24, 2020

Powerline10k

"terminal.integrated.fontFamily": "MesloLGS NF"

Works for me.

@ramnathkini87

This comment has been minimized.

Copy link

@ramnathkini87 ramnathkini87 commented Nov 24, 2020

Works on PowerLevel10K, Thank you!

"terminal.integrated.fontFamily": "MesloLGS NF"

@boabdilperez

This comment has been minimized.

Copy link

@boabdilperez boabdilperez commented Dec 11, 2020

Thank all y'all! I've been trying to figure this out!

@itsajay2195

This comment has been minimized.

Copy link

@itsajay2195 itsajay2195 commented Dec 30, 2020

"terminal.integrated.fontFamily": "'SourceCodePro+Powerline+Awesome Regular'",
"terminal.integrated.rendererType": "canvas",
"terminal.integrated.fontSize": 12,
"terminal.integrated.lineHeight": 1.1

-> works like a charm!

@jmichaliga

This comment has been minimized.

Copy link

@jmichaliga jmichaliga commented Dec 31, 2020

"terminal.integrated.fontFamily": "JetBrains Mono",
"editor.fontFamily": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",

for those with the JetBrains typeface installed ⚑

@2lach

This comment has been minimized.

Copy link

@2lach 2lach commented Jan 4, 2021

Here is a line which I use to automate the setup of nerd fonts

example with Hack-Regular it will download and setup the nerd font on a MacOS system

test ! -f ~/Library/Fonts/Hack-Regular.ttf && curl https://raw.githubusercontent.com/powerline/fonts/master/Hack/Hack-Regular.ttf > ~/Library/Fonts/Hack-Regular.ttf

what the line does:

If
   font exists
   exit
else
  download it from github (raw content url is used)
  add it to macOS fonts
@jimanjang

This comment has been minimized.

Copy link

@jimanjang jimanjang commented Jan 20, 2021

cool

@coding-jack

This comment has been minimized.

Copy link

@coding-jack coding-jack commented Jan 28, 2021

Friggin tight dood πŸ€™πŸΌ thx

@lanreogun

This comment has been minimized.

Copy link

@lanreogun lanreogun commented Jan 29, 2021

Awesome guide and THANK YOU!!

@cloudworkpro-dave

This comment has been minimized.

Copy link

@cloudworkpro-dave cloudworkpro-dave commented Feb 22, 2021

Awesome guide, thanks guys. For anyone interested, 'Overpass Mono' font I found to be awesome in the terminal

@rlam3

This comment has been minimized.

Copy link

@rlam3 rlam3 commented Feb 24, 2021

Thank you!

"terminal.integrated.fontFamily": "MesloLGS NF"

@umartinez22

This comment has been minimized.

Copy link

@umartinez22 umartinez22 commented Mar 28, 2021

Awesome, work fine.

@gcagle3

This comment has been minimized.

Copy link

@gcagle3 gcagle3 commented Apr 2, 2021

This is an awesome guide, thank you! Wanted to add that I like using the following font to match my iterm2 setup:

"terminal.integrated.fontFamily": "Inconsolata for Powerline",

@iynga

This comment has been minimized.

Copy link

@iynga iynga commented Apr 13, 2021

"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.integrated.fontFamily": "'SourceCodePro+Powerline+Awesome Regular'",
"terminal.integrated.rendererType": "canvas",
"terminal.integrated.fontSize": 12,
"terminal.integrated.lineHeight": 1.1

works like a charm!

@HackintoshwithUbuntu

This comment has been minimized.

Copy link

@HackintoshwithUbuntu HackintoshwithUbuntu commented Apr 13, 2021

"terminal.integrated.rendererType": "canvas"
works with powerline10k and "terminal.integrated.fontFamily": "MesloLGS NF"

@flakrat

This comment has been minimized.

Copy link

@flakrat flakrat commented May 26, 2021

Thanks so much to all for posting these. Prompt now looks great with

{
    "terminal.integrated.fontFamily": "Hack Nerd Font",
    "terminal.integrated.automationShell.osx": "/usr/local/bin/zsh",
@Sharkrit

This comment has been minimized.

Copy link

@Sharkrit Sharkrit commented May 31, 2021

"terminal.integrated.fontFamily": "Hack Nerd Font" works like a charm.

Same here ^_^

@iammeizu

This comment has been minimized.

Copy link

@iammeizu iammeizu commented Jul 6, 2021

work for me!

@luamintw

This comment has been minimized.

Copy link

@luamintw luamintw commented Jul 27, 2021

emm.. Setting the font to "MesloLGS NF" works for me rather than "Hack Nerd Font"

Visual Studio Code: Open File β†’ Preferences β†’ Settings, enter terminal.integrated.fontFamily in the search box and set the value to MesloLGS NF.

@Orrimp

This comment has been minimized.

Copy link

@Orrimp Orrimp commented Sep 8, 2021

"terminal.integrated.fontFamily": "'Source Code Pro for Powerline', 'Hack Nerd Font'"

Worked for me to display symbols (git)

@tzaffi

This comment has been minimized.

Copy link

@tzaffi tzaffi commented Nov 18, 2021

"terminal.integrated.fontFamily": "MesloLGS NF"

That's all I needed to add with powerline!

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