ビジュアルスタジオコードでファイルを開いたら日本語が文字化けしていた時の対処方法とは

ShiftJisのファイルをUTF-8で読み込んで文字化け VSCode

さて、今回は文字化けについてお伝えしていきますね。
この文字化けってのはエディターを使っている人なら、みんな一度は経験するのではないでしょうか。

技術職の人なら聞き覚えのある言葉ですがね。
それ以外の人は聞いた事すらなかったかもしれません。
全ての人が文字化けについて言葉も現象も知っているかといえばそうではないですよね。

まずは困っている今、文字化けをした時の対処方法をお伝えしながら文字化けする原因についても簡単にお伝えしていきますね。

あなたが今現在、文字化けに襲われていて「どうしよう!!」ってなっている状態ならばパニックにならずに
スグに下の【警告】に目を通してください。それまではファイルを保存したりしないで下さいね。

【警告】vscodeで文字化けを起こしているなら絶対に上書き保存はしない。

さて、突然なんですがここで最大級の警告です!!!
あなたがもし、今、日本語の文字化けを起こしている状態にあるなら、、、

「絶対に開いているファイルを上書き保存してはいけません!!!」

もし保存してしまうと、もう元には戻せない可能性もあります。
初心者さんには手が付けられないと思います。
だから、ホントに気を付けてくださいませ。

自動保存の設定をしている時にはもう既に戻せなくなっている事も考えられます。
バックアップが有れば良いのですが、無いと。。。
(TωT)書き直し~って事に。。。

何度もお伝えしますが、今開いている「文字が化けているファイル」は

絶対に!保存をしないで閉じましょう!

そうする事で元のファイルはありのままの状態を保てています。
保存をしなければまた元の開発環境に戻った時には正常に開いて編集も出来ますから安心安全です。

vscodeで日本語の文字化けを起こしている時の対処方法2つ

 

ShiftJisのファイルをUTF-8で読み込んで文字化け

それでは文字化けをしている時にはどう対処したらいいのかについてお伝えしていきます。
方法は2つあります。

vscodeに自動でファイルの形式を判別させて開く方法

vscodeで文字コードを付け直して扱うファイルを再度開く方法

です。

vscodeに自動でファイルの形式を判別させて開く方法

それではビジュアルスタジオコードの自動判別の方から説明していきますね。
以下の手順で設定します。
ほとんどの場合はこれで解決すると思いますが、ファイルの内容によっては
自動判別がうまくいかない場合ももちろんありますのでご了承くださいませ。

手順

  1. 上部メニュー「ファイル」を選ぶ
  2. メニューが出てきたら「ユーザー設定」を選ぶ
  3. サブメニューの「設定」を選ぶ

filesAUTOを検索ボックスに入れて出てきた画像

  1. 画面の上の方に検索ボックスが表示される。
  2. 「files:auto」と入力する。
  3. そうすると「files:Auto Guess Encording」が表示されてくる
  4. その中の”□”をクリックしてチェックマークを入れる。

自動判別の設定の完了

「files:Auto Guess Encording」の前に縦の線”|”が入っていれば設定は完了です。

再度同じファイルを開けば日本語になります。

自動判別の完了後にファイル読み込んだら日本語が復活

くれぐれも再度開く前には文字化けのファイルはセーブ(上書き保存)しないでくださいませ。
何度もしつこくってすみません。
せっかくの戻すチャンスを無くしますよ。

vscodeで文字コードを付け直して扱うファイルを再度開く方法

こちらは元のファイルがどんな文字コード(エンコード)になっているのかが分かっている場合の方法となります。
分かっていなくっても時間を掛ければ見つける事は出来ると思います。
これはダメだった。次のこれもダメだった。その次は「う~ん!上手くいった!」って感じに。(試行錯誤的な感じ
日本語が文字化けしているのは大体がShift-Jis形式のファイルを読み込んだ場合なのではないでしょうか。
vscodeは初期にはUTF-8の文字コード(エンコード)設定になっているので食い違ってしまっているのです。

ShiftJisのファイルをUTF-8で読み込んで文字化け

今回はとしてShift-Jisのファイルをvscodeの初期設定であるUTF-8で開いた時の事で説明いたします。

手順

画面のやや右下にUTF-8というのが見えると思います。
そこをクリックすると画面の上部に「エンコード付きで再度開く」というのが表示されます。

文字コードをクリックすると画面上部にメニューが開きます

それをクリックすると
メニューが表示されて文字コードを選べるようになります。

shiftjisを選んだ画像

該当する文字コード(エンコード)を選ぶと自動的に同じファイルが再度開かれます。
今回はShift-Jisのファイルを読み込むのでJapanese(Shift Jis)を選んでいます。
上の画像ではJapanese(Shift Jis)は先頭に表示されていますが、これは私が既に使った事がある為
あなたが初めてこの操作を行う時にはメニューの下の方にあると思います。
その時にはスクロールして見つけてくださいね
そして選ぶと以下の様に正常に表示されます。

エンコードを選んだ後に正常に日本語表示された画像

これで日本語の表示が正常になりました。

まとめ

いかがだったでしょうか?
今回は

vscodeで日本語が文字化けしていた時の対処方法2つについてお伝えしました。

やり方は簡単でしたね。

文字化けが起こった時に最も大切な事パニックに陥らない事です。
冷静な判断で対処すれば解決ができますので、落ち着いて作業をして頂けたらと思います。

誰にでも最初の出来事は在る!慣れれば平気!

ここまで読んで頂きまして誠に有難うございました。

嬉しい楽しいついてます。
感謝

泉水善光

↓↓↓↓↓↓ vscodeの日本語化について書いています。家でも作業したいならこれ必須な設定ですよね。 ↓↓↓↓↓↓

コメント

タイトルとURLをコピーしました