VSCodeの文字化けにはいつくかの要因がある
VSCodeの文字化けには、エンコーディング設定や使っているフォントの問題など、いくつかの要因があります。
本記事では、VSCodeが文字化けしてしまう原因と対処法について詳しく解説します。
VSCodeが文字化けする原因と対処法
原因1：エンコーディング設定
ファイルが保存されているエンコーディングとVSCodeのエンコーディング設定が異なる場合、文字化けが発生します。
特に、UTF-8以外で保存されたテキストファイルをUTF-8として開くと文字化けすることがあります。
対処法：複数のエンコーダを試す
ファイルを開いた状態で、VSCodeの右下にある「UTF-8」などと表示されている部分をクリックします。
表示されたリストを順番に試していき、正しく表示されるものがあるか探します。
原因2：使用しているフォントの影響
VSCodeで使用しているフォントが特定の文字をサポートしていない場合、文字化けが発生することがあります。
対応したフォントを設定することで、文字化けが解決する可能性があります。
対処法：複数のフォントを設定する
画面左下にある「歯車」アイコンをクリックし、「設定」を選択します。
上部の検索ボックスに「Font Family」と入力し、検索結果から「Editor:Font Family」を探します。
「Editor:Font Family」にフォントを複数設定します。
複数のフォント名を指定する場合は、カンマ「,」で区切ります。またフォント名にスペース(空白)が含まれる場合は、シングルクオーテーション(‘)で囲みます。
設定画面を閉じて、正しく表示されているか確認してみましょう。
>> VSCode フォント設定｜おすすめのフォントやインストール方法
原因3：拡張機能の影響
特定のVSCode拡張機能がファイルの読み込みや表示に影響を与えることで文字化けを引き起こすことがあります。
拡張機能を無効にすることで問題が解消するか試してみましょう。
対処法：拡張機能を無効
画面左側にある「拡張機能」アイコンをクリックし、インストール済みの拡張機能を表示します。
インストール済みの拡張機能を1つずつ無効にし、文字化けが解消されているかを確認します。
原因4：PCのロケール設定
システムのロケール設定がファイルの内容と一致しない場合、VSCodeでの表示時に文字化けが発生することがあります。
主に多言語環境で発生しやすい問題です。
対処法：PCのロケール設定を確認
「コントロールパネル」を開きます。
コントロールパネルで「時計と地域」を選択します。
「地域」をクリックします。
「形式」タブで設定されている言語が「日本語」であることを確認します。
異なる形式になっている場合は、ドロップダウンメニューから「日本語（日本）」を選びます。
Macの場合は、「システム設定 > 一般 > 言語と地域」から確認できます。
対処法を試して文字化けを直そう！
今回は、VSCodeが文字化けする原因と対処法について解説しました。エンコーディングの不一致や対応していないフォント、拡張機能やロケール設定と初めは少し難しく感じてしまいますが、1つずつ確認することが大切です。あきらめずに解決していきましょう。
