Enable unicode support in vscode terminal

TLDR;
Jump to solution or keep reading to find out why Tech support always asks you to try turning it off and on again 😉.

If you think the heading is not exactly correct, you are right but it's intentional. Let me explain 🤓.

Today I woke up with a strong feeling about being tired of looking at question marks inside my vscode integrated terminal.

Here is what it looked like 🥺,

And it didn't make sense because the same thing had icons inside iterm itself. So I knew that this is something to do with vscode. Obviously, I started my search with the problem I could identify, ie. vscode terminal in not behaving properly.

After searching, going through forums, stackoverflow, github issues I could not figure out what was wrong.
I may be tried a dozen different settings but nothing worked.

So I did what any rational person who cares about this and is free all day would do😉.

Reset everything and re-configure it

Now, this is very easy and well developed strategy of fixing things, which I learned over the years.

The only important thing I want you to remember if you are ever in a problem you don't understand let alone know how to solve it, you start by defining boundaries in your *closed* system and keep expanding them, while attempting easiest and non-destructive approach first.

First Try
In this situation, first step would be closing the terminal and starting it again, then doing same with vscode.

Did that and nothing happened😐, since I had already tweaked with settings, the next step was to reconfigure the powerlevel 10k theme.
(ps. if you can't even see the theme working, maybe first make that working)

Second Try
I copied the original file

cp ~/.p10k.zsh ~/.p10k.zsh.bkp
p10k configure

Going through the steps it asked me if I can see a lock,I said no hoping that it will do something about it 🤞🏻 but it just ignored the steps about icons and moved on 🥺. So it configured everything and now I just removed those icons from my iterm2 as well 🤦🏻‍♂️.

Third Try
Reading more about the problem, I thought maybe let's reinstall the p10k but wait going through the github page I see they mention the recommended font setting for vscode. I checked and I already had those font installed, then I checked the settings of my editor.

oh, I was using Fira Code as my editor font, I changed it to recommended one

 "MesloLGS NF",

and restarted everything.

It works 🎉🎉

But now I had another problem, I don't want that font, I want Fira Code.

Since, this post is about process of solving a problem and not the actual solution, let's take a minute to review.

Now, we have few things clear.

1. The problem is definitely related to fonts.
2. p10k and vscode are probably okay.
3. There is a working solution available, we just need to find a similar but acceptable one.

Ok, let's work on number 3.

Understanding your tools properly

The first thought came to me was, if vscode is made to be super configurable there must be some way to use different fonts.

and there was, I quickly found that we can use a seperate font for terminal, let's try that.

"editor.fontFamily": "Fira Code",
"terminal.integrated.fontFamily": "MesloLGS NF",

And, close and restart everything, just to be on safe side. Checking it again and it worked.

Now we have recommended fonts inside terminal like it's supposed to and we have our favourite font inside the editor. (technically, whole thing is a editor but you know what I mean).

The Aftermath
Just because you fixed the immediate problem doesn't mean you are done.
You need to check what was affected by your solution. Now that can only be done if you understand the solution exactly. In this case, we do, so let's guess what could be affected.

We changed the font on integrated terminal, which is inside vscode. The settings are also inside vscode. Since all changes are there probably nothing that comes from outside is broken.

Also, we have a quick and non-destructive way to easily rollback if something do happen.

Let's give a quick check to iterm2 itself, and it seems to work exactly as expected.

Seems like everything is fine. Let's close this adventure and celebrate that we solved the problem. 🥳 🕺🏻.

I hope you enjoyed reading this post, while the problem was trivial I wanted to take my time and show you problem solving. It is very common approach, almost like an instinct, with some practice you can easily apply this to programming, os install, fixing you car, or almost anything else.

Also, now you know, why it support asks you,

Hey reader, I am a software engineer who loves learning new stuff and writing about it. I am currently learning AWS, NextJs, Typescript, Tailwind while building a product DynoList in public. You can follow the journey from day 1.

Or follow me on twitter and you will know whenever I add something interesting here or there 😁

Have a great day ahead.