VS code で文字化けした時はエンコードの切り替え・自動判別をする事
VS codeでは基本的にUTF8でファイルを開くようになっています。
設定メニューからencodingで検索してエンコード種類を自動判別して開いたり、UTF8以外のエンコードに変更ができます。
ファイルが文字化けした場合エンコード付きで再度開くのはOKですが、エンコード付で保存はしない方が良いです。文字化けを元に戻せない場合があるので事前バックアップを取りましょう。
VS codeの基本エンコードはUTF8
Visual Studio Code（以下：VS code）では、ファイルのデフォルトの文字コード（エンコード）は「UTF8」になっています。
ですのでテキスト系ファイルを開く場合、UTF8で開く訳ですね。
今現在WEBページの基本的なエンコードは、やはりUTF8でしょう。
ですのでHTMLファイル（.html）やWordpressのテーマファイル（.php）は、VS codeで問題なく表示されます。
Shift_JISのページ
一昔前のWEBページのエンコードは「Shift_JIS」が多かったですよね。今はあまり使われませんが。
エンコードがShift_JISのHTMLファイルであっても、VS codeではUTF8で開きます。
当然文字コードが違うため、日本語表記の部分が文字化けを起こす訳ですね。
Shift_JISのページが文字化けした状態
文字化けさせない様にファイルを開く
VS codeではもちろんそういったShift_JISのファイルも、文字化けさせずに開く事ができます。
開く際のエンコードの種類を自動判別したり、変更する事ができるのですね。
本記事では、VS codeで開くファイルのエンコードを判別・変更する方法について紹介します。
別のエンコードファイルを開く場合
エンコードがUTF8以外のファイルを開く場合、まずはそのまま文字化けを覚悟で一度開きます。
その上で正しいエンコードを指定して、ファイルを開き直す事になります。
Shift_JISのHTMLファイルを開く
文字化けをさせて構わないので、Shift_JISのファイルを一旦そのまま開きましょう。
VS codeの画面右下に表示されている「UTF-8」と表示されている箇所をクリックします。
エンコード関連のアクション
画面上部に以下2つのアクションパネルの選択画面が表示されます。
・エンコード付きで再度開く
・エンコード付きで保存する
今回は上の「エンコード付きで再度開く」をクリックして下さい。
エンコードの候補一覧
エンコードの候補一覧が表示されます。
今回開いたファイルのエンコードはShift_JISですので、「Japanese(Shift_JIS)」をクリックします。
上部の検索ボックスに「sj」と2文字入れるだけで候補が探せます。
文字化けが解消された状態
これでShift_JISでファイルが切り替わるので、文字化けせずに表示されているはずです。
コマンドパレットからも操作可能
このエンコード変更操作は、コマンドパレットからも設定できます。
「表示」メニューから「コマンドパレット」をクリックして下さい。
コマンドパレットの検索ボックスに「エンコード」か「Encoding」と入力しましょう。
表示された「ファイルのエンコードの変更」をクリックする事で、同じ操作が可能です。
逆の操作をしたときは注意
今回は文字化けしたファイルを正常な状態に表示する事ができました。
逆に正常に表示されているファイルをあえて別のエンコードに変える事もできます。
そうするとファイルは当然文字化けしますよね。
上書き保存しない様に
単に文字コードを変えて開き直しているだけですが、上書き保存はしないで下さい。
ここで上書き保存してしまうと、次に開いた時に正常なエンコード表示なのに文字化けする部分が出てきます。
単に変更された状態を確認するだけで、保存はしない様にして下さい。
指定したエンコードでファイルを保存する場合
注意
ここで紹介する方法を自分のファイルで試す場合、必ず元データのバックアップを取ってからおこなって下さい。
ファイルを意図的に文字化けさせますし、さらにそのファイルは元に戻せません。
バックアップからいつでも復元できる様にしておきましょう。
UTF8をShift_JISで保存する
VS codeに限らず他のソフトもそうですが、基本的にファイルはその時ソフトが指定している文字コードで保存されます。
これをあえて別のエンコードで保存したい場合は、文字コードを指定して保存する事ができます。
本来あまりする必要は無いと思いますが、今回試しにやってみましょう。
UTF8のファイルを開く
お手元の既存ファイル（UTF8のファイルでOK）を開いてみて下さい。
先程同様に、画面右下の「UTF-8」と表示されている箇所をクリックして下さい。
エンコード関連のアクション
先程の様に、画面上部に2つのアクションパネルの選択画面が表示されます。
今回は下の「エンコード付きで保存」の方をクリックして下さい。
エンコードの候補一覧
エンコードの選択画面が表示されます。
あえてShift_JISで保存するので、「Japanese(Shift_JIS)」を探してクリックしましょう。
これで選択した文字コードでファイルが保存されます。
UTF8だったファイルをShift_JISで保存したので、日本語が文字化けしているのがわかりますね。
この時ファイルは別名保存されたりはせず、そのまま「上書き保存」されます。
文字化けが直らないケース
この時注意して欲しい事が主に2つあります。
Shift_JISで上書き保存しているはずですが、まず見た目には変化が無いはずです。
これはファイルが開いたままになっているためですね。
一度閉じて開き直すと文字化けする
一度ファイルを閉じて、再度開き直すと文字化けした事がわかるはずです。
Shift_JISで保存したファイルをUTF8で開いているのですから、当然そうなります。
元に戻せない場合がある
さらに厄介なのは、これを元に戻す事ができない場合がある事です。
ファイルによっては、先程と同じ方法で元のUTF8に変更して保存を掛けても、さらに文字化けが進みます。
「エンコード付きで再度開く」事はできますが、「エンコード付きで保存」ができない事が多いです。
ファイルは上書き保存しているため、実質ファイルを破損させてしまった事になるのです。
必ずバックアップを取っておいて欲しいと言ったのはこのためです。
文字化けするのは日本語
.phpや.jsなどで日本語文字が入っていない場合は、この方法で自由にエンコードを変えて保存できます。
再度開いたときに文字化けしたりはしないはずです。
文字化けは、日本語が入るHTMLファイル等でよく起きる現象です。
charsetによる指定
HTMLページの場合、日本語テキストがソース上にたくさん入っていますよね。
表記する日本語の文字コードを指定するため、ソース内に「charset="utf8"」のエンコード指定がしてあるのです。
utf8（charsetもutf8）で開いたファイルを、sjisで保存して文字化けした状態
中のcharsetの文字コードと整合性が取れないために、文字化けする訳ですね。
日本語が入ったファイルはエンコードを変更して保存はしない
ですので指定された種類以外で保存しても、文字化けするだけですから意味が無いといえます。
HTMLファイル等はエンコードを変更して保存するケースはほとんどないと思って下さい。
charsetがShift_JISのファイルならUTF8で保存したりせず、ファイルに合わせてShift_JISで開き直す様にしましょう。
Wordpressの場合
Wordpressのテーマファイルphp内にも、日本語表記が入る事が多いですよね。
.phpファイルのデフォルトはUTF8ですから、テーマファイルは全てUTF8で保存しておく必要があります。
編集の際は文字コードを変更したりせずに、そのままUTF8で使いましょう。
開く時にエンコードを自動判別する
ファイルを開く時に、自動でそのファイルのエンコードを判断して開く事ができます。
この自動判別を使えば、UTF8のファイルならUTF8、Shift_JISのファイルならShift_JISで開いてくれるようになります。
これなら昔のファイルでも問題はありませんね。
設定メニューを開く
VS code左袖端の歯車アイコンをクリックし、メニューから「設定」を押します。
encodingで検索
設定のタブが開きますので、上部の検索ボックスに「encoding」と入れましょう。
以下の2件がヒットするはずです
・Files:Auto Guess Encoding
・Files:Encoding
Files:Auto Guess Encoding
ここでFiles:Auto Guess Encodingの欄にチェックを入れましょう。
こうすればファイルのエンコードを自動判別し、最適なエンコード種類で開いてくれます。
最初からShift_JISで開けた状態
デフォルトのエンコーディングを変更する
デフォルトのエンコード種類はUTF8ですが、これも設定が変更できます。
まだ設定パネルが残っていればそれを確認しましょう。
閉じている場合は先程と同じように、歯車の設定メニューからもう一度「encoding」で検索して下さい。
Files:Encoding
先程と同じくヒットした2件のうち、Files:Encodingの欄が「UTF8」になっているはずです。
ここを違う種類のエンコードにすれば、それがデフォルトのエンコードになります。
両方設定をした場合
ここで「Files:Auto Guess Encoding」と「files：encoding」の両を方設定している場合はどうなるのでしょうか。
既存ファイルの場合は、エンコーディングの自動判別が行われて最適な種類で開かれます。
ファイルを新規作成する場合は、files.encodingで指定したエンコーディングが使用される訳ですね。
例えば、files.encoding項目の値に「Shift_JIS」や「eucjp」を指定しているとしましょう。
ここで改めてエンコードがUTF8のファイルを開くと、自動判別に失敗することがあるようです。
