🚺

【Visual Studio Code】HTMLファイルの文字化け解消方法について（備忘録）

に公開
HTML
VS Code
初心者
メモ
tech

１．はじめに

HTMLファイルの <head> 部分に以下の様に記述しましたが、日本語の文字化けが解消されませんでした。

sample_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
sample_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <!--HTML5より前の文字コードの指定方法 -->
    <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
</head>

※使用エディタは、Visual Studio Code（バージョン：1.103.0） です。

２．対策

①．Visual Studio Code の設定を開きます。
②．Visual Studio Code の右上の [設定(UI)を開く] ボタンを押下します。
※赤の下線を引いているアイコンを押下します。

③．settings.json のプログラムを以下の通りに修正すると、文字化けが解消されました。

settings.json
{
    //　文字コード指定
    "files.encoding": "utf-8",
    // 自動的に文字コードを判定
    "files.autoGuessEncoding": true,
    // ステータスバーに現在の文字コードを表示
    "workbench.statusBar.visible": true,
    // コピペ時に自動で整形されるのを防止
    "editor.formatOnPaste": true
}

３．参考

・VS Codeで開いたファイルの文字化けを解消する
・Visual Studio Code ペースト時自動フォーマットを止める
・【VSCode】文字化け対策:文字エンコーディングを自動判定してファイルを開く

Discussion