🧑🏻‍💻

VS Codeのターミナルで起きるフォントの文字化けを解消する方法

2022/03/04に公開

課題

Macではターミナルを使うときにiTermを使ってこんな感じで見やすくしている方も多いかと思います。

ところが、このスタイルを適用した状態でVS Codeのターミナルを開くと以下のように文字化けしてしまいます…

デフォルトのフォントだと対応していない記号があるせいで文字化けしてしまいます。
これを解決するにはどうすればいいのでしょう…?

解決策

この問題を解決する方法は至って単純なことで、iTermで使用しているフォントをVS Codeにも適用させればOKです。
適用するフォントを確認する方法は、iTermのPreferencesを開いたらProfiles → Textタブをクリックすると確認できます。

フォントを確認したら、VS Codeの設定画面を開いたら検索窓から terminal.integrated.fontFamilyと入力するとターミナルのフォントを設定する画面が表示されるので、iTermで確認したフォントを設定します。

設定内容は自動保存されるので、保存された瞬間ターミナルの文字化けが無事に解消されるはずです。
もし何も変化しなければ、VS Codeを再起動するとフォントの設定が反映されます。

まとめ

今回はiTermで設定したフォントをVS Codeに適用させる方法を紹介しました。
iTerm上で文字化けしていないことが前提になりますが、iTermで自分好みのスタイルを適用したら、VS Codeでもそれに合わせてフォントも適用すれば表示されるということです。
長く文字化けした状態でターミナルを使っていましが、こんな簡単なこともっと早くに気付けばよかったです…

参考

https://nishi3.hatenablog.com/entry/2019/09/30/232408

Discussion