VSCode（Visual Studio Code）では、現在開いているファイルがどの文字コードとして扱われているかを簡単に確認できます。
日本語のファイルでは、UTF-8やShift JISなどの違いによって文字化けが起こることがあります。
そのため、Web制作やプログラミングで日本語を扱う場合は、VSCodeで文字コードを確認する方法を覚えておくと便利です。
ここでは、VSCodeで文字コードを確認する方法から、文字化けした場合の対処方法、文字コードをUTF-8へ変更する方法まで詳しく解説します。
VSCodeで文字コードを確認する基本的な方法
画面右下のステータスバーを確認する
VSCodeで現在の文字コードを確認する最も簡単な方法は、画面下部にあるステータスバーを見ることです。
ファイルを開くと、画面右下付近に次のような表示があります。
UTF-8
ファイルや設定によっては、次のような文字コードが表示されることもあります。
UTF-8 with BOM
Shift JIS
この表示を見ることで、現在VSCodeがそのファイルをどのエンコーディングとして扱っているかを確認できます。
ただし、注意したいのは、ステータスバーの表示が必ずしも「元ファイルの文字コードを100％確実に判定した結果」とは限らないことです。
特にBOMなどの明確な識別情報がないファイルでは、VSCodeが設定やファイル内容をもとに文字コードを推測している場合があります。
そのため、文字化けしている場合は、表示されている文字コードだけで判断せず、別のエンコーディングで開き直して確認することが重要です。
VSCodeで文字コードを変更して開き直す方法
「エンコード付きで再度開く」を使用する
文字化けしている場合は、文字コードを指定してファイルを開き直すことができます。
まず、VSCodeの画面右下に表示されている「UTF-8」などの文字コード部分をクリックします。
その後、
エンコード付きで再度開く
を選択します。
英語表示では、
Reopen with Encoding
と表示されます。
続いて、使用したい文字コードを選択します。
たとえば、古い日本語ファイルで文字化けしている場合は、Shift JIS系のエンコーディングとして開き直すことで正常に表示されることがあります。
「エンコード付きで再度開く」はファイルを書き換えない
「エンコード付きで再度開く」は、ファイルそのものを変更する機能ではありません。
あくまで、
VSCodeがどの文字コードとしてファイルを読み込むか
を変更する機能です。
そのため、文字化けの原因を調べる場合は、まず「エンコード付きで再度開く」を使用するのがおすすめです。
正しい文字コードを確認する前に保存してしまうと、ファイルの内容が意図せず変更される可能性があります。
VSCodeで文字コードを変更して保存する方法
「エンコード付きで保存」を使用する
VSCodeでは、現在のファイルを別の文字コードへ変換して保存することもできます。
画面右下に表示されている文字コードをクリックし、
エンコード付きで保存
を選択します。
英語表示では、
Save with Encoding
と表示されます。
その後、保存したい文字コードを選択します。
たとえば、Shift JISのファイルをUTF-8へ変換する場合は、
Shift JIS
↓
UTF-8
のように変更できます。
正しい文字コードで開いてから保存する
文字コードを変換するときに重要なのは、最初に正しいエンコーディングでファイルを開いておくことです。
たとえば、本来Shift JISで保存されているファイルをUTF-8として誤って読み込み、文字化けしている状態でそのまま保存すると、文字情報が壊れる可能性があります。
そのため、
正しい文字コードで開く
↓
文字化けしていないことを確認する
↓
別の文字コードで保存する
という順番で操作するのが安全です。
「再度開く」と「保存」の違い
「再度開く」は読み込み方法を変更する
「エンコード付きで再度開く」は、ファイルをどの文字コードとして読み込むかを変更する機能です。
元のファイルそのものは書き換えません。
文字化けの確認や、本来の文字コードを探すときに使用します。
「保存」は実際のファイルを変換する
「エンコード付きで保存」は、実際のファイルを別の文字コードで保存する機能です。
たとえば、
Shift JIS
↓
UTF-8
のようにファイルそのものを変換できます。
文字コードを変更する目的がない場合は、誤って「エンコード付きで保存」を選ばないよう注意しましょう。
VSCodeのデフォルト文字コードを確認する方法
設定画面から「Files: Encoding」を確認する
VSCodeでは、ファイルを開くときに使用するデフォルトの文字コードを設定できます。
設定画面を開くには、WindowsやLinuxでは、
Ctrl + ,
Macでは、
Command + ,
を使用します。
設定画面の検索欄に、
files.encoding
と入力すると、
Files: Encoding
という設定項目が表示されます。
通常のWeb制作では、特別な理由がなければUTF-8を使用することが一般的です。
settings.jsonで文字コードを指定する方法
UTF-8をデフォルトに設定する
VSCodeのsettings.jsonから文字コードを指定することもできます。
UTF-8を使用する場合は、次のように記述します。
{
"files.encoding": "utf8"
}
これにより、VSCodeのデフォルトエンコーディングとしてUTF-8を使用できます。
UTF-8 BOM付きで保存する
UTF-8 BOM付きを使用したい場合は、次のように指定できます。
{
"files.encoding": "utf8bom"
}
ただし、通常のWeb制作ではBOMなしのUTF-8が利用されることが多いため、特別な要件がなければutf8を使用すると管理しやすいでしょう。
VSCodeに文字コードを自動推測させる方法
files.autoGuessEncodingを有効にする
VSCodeには、ファイルの内容から文字コードを自動的に推測する機能があります。
設定画面で、
files.autoGuessEncoding
を検索し、有効にします。
settings.jsonでは次のように記述できます。
{
"files.autoGuessEncoding": true
}
この設定を有効にすると、VSCodeがファイル内容をもとにエンコーディングを推測します。
古いプロジェクトなどで、UTF-8やShift JIS系など複数の文字コードが混在している場合に便利です。
自動推測は100％正確ではない
文字コードの自動推測は便利ですが、必ず正しい結果になるとは限りません。
ファイル内容だけから文字コードを完全に特定できないケースがあるためです。
特に日本語ファイルでは、複数の文字コードで似たバイト列になる場合があります。
そのため、文字化けしている場合は自動推測だけに頼らず、「エンコード付きで再度開く」を使用して確認することが大切です。
参考サイト
自動推測する文字コードの候補を絞る方法
files.candidateGuessEncodingsを設定する
VSCodeでは、files.autoGuessEncodingを使用するときに、推測対象となる文字コードの候補を指定することもできます。
この設定には、
files.candidateGuessEncodings
を使用します。
自動推測の候補を限定することで、使用する文字コードがある程度決まっている環境では誤判定を減らせる場合があります。
また、候補の順番によって優先順位を指定できます。
ただし、通常のWeb制作でUTF-8を中心に使用している場合は、必ずしも設定する必要はありません。
UTF-8とUTF-8 BOM付きの違い
BOMとは何か
BOMとは「Byte Order Mark」の略で、ファイルの先頭に付与される識別用のデータです。
VSCodeでは、通常のUTF-8とUTF-8 BOM付きは別のエンコーディングとして扱われます。
ステータスバーにも、
UTF-8
または、
UTF-8 with BOM
のように表示されます。
Web制作ではUTF-8 BOMなしが使われることが多い
現在のWeb制作では、特別なシステム要件がなければUTF-8 BOMなしが広く利用されています。
HTMLやCSS、JavaScript、PHPなどをUTF-8に統一しておくと、文字コードによるトラブルを減らしやすくなります。
一方で、一部のWindows向けソフトウェアや既存システムでは、UTF-8 BOM付きが必要になる場合もあります。
そのため、既存システムを扱う場合は、現在使用されている文字コードを確認してから変更することが重要です。
HTMLファイルではmeta charsetも確認する
ファイルの文字コードとHTMLの指定を合わせる
HTMLファイルを扱う場合は、VSCode側のエンコーディングだけでなく、HTML内の文字コード指定も確認しましょう。
HTML5では、一般的に次のように記述します。
<meta charset="UTF-8">
実際のファイルをUTF-8で保存しているのであれば、HTML内でもUTF-8を指定することで整合性を保ちやすくなります。
たとえば、
実際のファイル：UTF-8
HTMLの指定：UTF-8
のように一致させます。
また、WebサーバーのHTTPレスポンスヘッダーでcharsetが指定されている場合もあるため、文字化けが解消しない場合はサーバー側の設定も確認するとよいでしょう。
PHPファイルではBOMに注意する
BOMが意図しない出力になる場合がある
PHPファイルでは、UTF-8 BOM付きで保存すると、BOMが意図しない出力として扱われる場合があります。
その結果、環境やコードによっては、
header()
によるHTTPヘッダー処理や、Cookie、セッションなどに影響する可能性があります。
そのため、PHPファイルについても、特別な理由がなければUTF-8 BOMなしで保存しておくとトラブルを避けやすくなります。
ただし、BOM付きだから必ず問題が発生するわけではありません。
利用しているPHP環境や出力バッファリングなどによって挙動は異なります。
VSCodeで文字化けしたときの対処方法
まず保存せずに文字コードを確認する
VSCodeで日本語が文字化けした場合は、いきなり保存しないことが重要です。
まず、画面右下の文字コード表示を確認します。
その後、
文字コード部分をクリック
↓
「エンコード付きで再度開く」を選択
↓
別の文字コードを選択する
↓
正常に表示されるか確認する
という手順で確認します。
日本語の古いファイルでは、Shift JIS系の文字コードが使用されている場合があります。
ただし、必ずShift JISとは限りません。
UTF-8やEUC-JP、UTF-16などが使用されている可能性もあるため、必要に応じて複数のエンコーディングを確認しましょう。
正しく表示されてから必要に応じてUTF-8へ変換する
正しい文字コードでファイルを開くことができたら、必要に応じてUTF-8へ変換します。
流れとしては、
正しい文字コードで開く
↓
日本語が正常に表示されていることを確認
↓
「エンコード付きで保存」を選択
↓
UTF-8を選ぶ
となります。
古いWebサイトなどではシステム全体がShift JIS系で構築されている場合もあるため、ファイル単体でUTF-8に変更する前に、プロジェクト全体の仕様を確認することも重要です。
コマンドパレットから文字コードを変更する方法
Encoding関連のコマンドを検索する
文字コードの変更は、VSCodeのコマンドパレットから行うこともできます。
WindowsやLinuxでは、
Ctrl + Shift + P
Macでは、
Command + Shift + P
を押してコマンドパレットを開きます。
検索欄に、
encoding
と入力すると、文字コードに関連するコマンドを探せます。
ステータスバーが非表示になっている場合や、キーボード操作を中心にVSCodeを使用している場合に便利です。
Web制作では文字コードをUTF-8に統一すると管理しやすい
プロジェクト内で文字コードを統一する
現在のWeb制作では、HTMLやCSS、JavaScriptなどのファイルをUTF-8に統一して管理するケースが一般的です。
たとえば、
HTML
CSS
JavaScript
PHP
JSON
XML
Markdown
などをUTF-8に統一しておくことで、ファイルごとの文字コードの違いによるトラブルを減らせます。
チーム開発では、.vscode/settings.jsonなどを利用してプロジェクト単位で、
{
"files.encoding": "utf8"
}
と設定しておく方法もあります。
ただし、既存のWebサイトや古い業務システムではShift JIS系やEUC-JPが使用されていることもあります。
既存システムのファイルを一部だけUTF-8へ変更すると、データベースやサーバー側の処理との間で問題が発生する可能性があるため注意が必要です。
まとめ
VSCodeで文字コードを確認するときは、まず画面右下のステータスバーを確認します。
UTF-8やShift JISなどの表示を見ることで、現在VSCodeがファイルをどのエンコーディングとして扱っているかを確認できます。
文字化けしている場合は、すぐに保存するのではなく、
エンコード付きで再度開く
を使用して正しい文字コードを確認することが大切です。
一方、
エンコード付きで保存
は、実際のファイルを別の文字コードへ変換する機能です。
この2つは役割が異なるため、使い分ける必要があります。
また、files.encodingを設定すればデフォルトの文字コードを指定でき、files.autoGuessEncodingを有効にすればVSCodeに文字コードを自動推測させることもできます。
通常のWeb制作ではUTF-8を基本にすると管理しやすいですが、既存システムではShift JIS系など別の文字コードが使われている場合もあります。
文字コードを変更する際は、現在のファイルやプロジェクト全体の仕様を確認したうえで作業することが重要です。
以上、VSCodeで文字コードを確認する方法についてでした。
最後までお読みいただき、ありがとうございました。
