【VSCode】ターミナルで文字化けした時の対処法

VSCodeを使っていると、ターミナルで文字化けすることがあります。
対処法についてお伝えします。

まずは、文字化けの状況をお伝えします。

文字化けの例

例えば次の Node.jsコードを用意します。

console.log(  "文字化けテスト" );

ただ単に、コンソール出力しているだけですね。
pakage.jsonなど他のファイルはありません。

これを、Windows環境のVSCodeでターミナル（コマンドプロンプト）から実行します。
文字化けになります。

文字化けしませんでした…
VSCode外でコマンドプロンプトを起動して実行しても同じだった。
c言語のソースをシフトJISで保存してコンパイルすると、出力した文字が文字化けします。
内部的に何かやっているのでしょうね。
話が進まないので、ここで思考停止。

仕方がないので、test.jsの内容をtypeコマンドで表示してみる。

無事に？文字化けしました。

文字化けの理由

Windowsの内部コードはUTF-16ですが、コマンドプロンプトの画面出力上の文字エンコードがシフトJISになっているのが文字化けの原因です。

VSCodeは規定でUTF-8でファイルを保存します。
このファイルをコマンドプロンプトに表示すると、変換等は行われずにそのまま出力されます。
UTF-8とシフトJISの文字セット（番号と文字の組み合わせ）が異なるので、文字化けするのです。

アプリケーションからの出力については、プログラミング言語やコード設計によって結果が変わります。

文字化けの対処は、ターミナルの文字エンコードを表示する文字のエンコードに合わせます。
ファイルのエンコードが UTF-8 なら、ターミナルのエンコードも UTF-8 にするということです。

ひな型の作成

設定は setting.json で行うのですが、ひな型があったほうが楽なので、次の手順でひな型を作成しましょう。

1. VSCodeの左下の歯車アイコンをクリック
2. 表示されたメニューから「設定」を選択
3. 設定パネルの検索欄に「terminal.integrated.profiles」と入力

   Linux、Osx、Windowsのプロファイル設定項目が表示されます。

   

   ※プロジェクトごとに設定を変更したいときは、検索欄の下の「ワークスペース」を選択してください。

4. 目的のＯＳの settings.json で編集をクリック

   setting.jsonが表示され、ひな型が挿入されます。

setting.json の編集

使用しているターミナルプログラムの、エンコードを変更する方法を調べます。
その方法に合わせて、"arg"プロパティで引数を指定します。

Windowsは、次の設定で UTF-8 に変更できます。

    "terminal.integrated.profiles.windows": {

        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell",
            "args": ["-NoExit","-Command","$PSDefaultParameterValues['*:Encoding'] = 'utf8'"]
        },
        "Command Prompt": {
            "path": [
                    "${env:windir}\\Sysnative\\cmd.exe",
                    "${env:windir}\\System32\\cmd.exe"
            ],
            "args": ["/K","chcp 65001"],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "source": "Git Bash"
        }
    },

上のコードで使用している起動オプションの補足説明です。

■PowerShellの起動オプション

-NoExit : コマンド実行後PowerShellを終了しない
-Command : 後に続くコマンドを実行する
$PSDefaultParameterValues['*:Encoding'] = 'utf8' : エンコードをUTF-8にセット

■Command Promptの起動オプション

/K : 後に続くコマンドを実行する。Command Promptは終了しない。
chcp 65001 : エンコードをUTF-8にセット

ここまでの操作で文字化けを解消することができるのですが、タスクやデバッグなどを実行すると次のようなエラーが表示されることがあります。

エラー例

実行するタスク: echo aaa

パラメーターの書式が違います - /d

実行するタスク: echo aaa

発生場所 行:1 文字:50
+ $PSDefaultParameterValues['*:Encoding'] = 'utf8' -Command echo aaa
+                                                  ~~~~~~~~
式またはステートメントのトークン '-Command' を使用できません。
発生場所 行:1 文字:59
+ $PSDefaultParameterValues['*:Encoding'] = 'utf8' -Command echo aaa
+                                                           ~~~~
式またはステートメントのトークン 'echo' を使用できません。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : UnexpectedToken

terminal.integrated.profiles.windowsで指定した引数と、tasks.jsonで指定した引数をつなぎ合わせてターミナルプログラムを実行してるようですね。

起動オプションの指定順がおかしいとか、同じオプションを複数回指定していたりとかで、パラメーター不正になっています。

対処法

設定値 terminal.integrated.automationProfile を使用すると、タスクやデバッグなどで使用するターミナルを指定できます。
ここで、ターミナル起動時のオプションをなにも指定しないように設定します。

    "terminal.integrated.automationProfile.windows": {
 
            "path": "${env:windir}\\System32\\cmd.exe",
            "args": [],
            "icon": "terminal-cmd"

    },

種類別に記述するのではなくて、起動するプログラムを直接指定する形式ですね。
ひな型で表示されたものを、そのままコピペすればＯＫです。

ただし"path"プロパティは文字列で指定するので、ひな型が配列のときは変更しましょう。
また"source"は使用できません。
実行ファイルのパスを調べて"path"を使用します。

tasks.jsonの記述

エンコードを変更しないように修正したので、タスク実行時に文字化けする可能性があります。
対処法として二つ挙げてみます。

二つのコマンドを連結して実行

次のように文字エンコード変更コマンドと表示コマンドを連結します。
Windowsのコマンドプロンプトは「&」で連結できます。

    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "chcp 65001&type test.txt"
        }
    ]

連結の方法は、ターミナル毎に異なるので調べてください。

上のタスクを実行してみます。

文字化けします。

「なんでだ？」と思いつつ、chcp 65001を取り除いて、typeコマンドのみにすると文字化けしませんでした。

よくわからないので C言語でUTF-8でコンソール出力するプログラムを作成して実行すると、文字化けしませんでした。
コマンドプロンプトのtypeコマンドが特殊なことをしているようですね。

パイプでエンコードプログラムに渡す

文字エンコードを変換するプログラムを自作したりネットで探したりして、コマンドの実行結果をパイプでエンコード変換する方法もあります。
プログラムの勉強をしている人は、自作してみるのもいいかもしれません。

ただし、Node.jsなどの一部の言語は UTF-8 でしか出力できません。
任意のエンコードで出力できる言語を選択する必要があります。

めんどくさい…

settings.json のターミナルに関する項目を変更したら、VSCodeを再起動することをおススメします。

VSCodeはタスクを実行すると、開いているターミナルがそのまま使用されます。
一度閉じればいいような気がするのですが、settings.jsonの変更内容の一部が反映されていないことがあります。

何度変更しても上手く動作してくれなくて悩んでいたところ、一度再起動してみたら動作したということが多々あります。
逆に、再起動したらエラーが出たこともあります。

ムダな時間を使った気分ですね。
settings.json のターミナルに関する項目を変更したら、VSCodeを再起動しましょう。