VS Codeでファイルのエンコードを設定・確認する方法｜UTF-8, Shift-JIS, EUC-JPの変更

プログラミング・IT

「VS Codeでファイルを開いたら文字化けした」
「UTF-8じゃなくShift-JISで保存したい」

そんなときに必要なのがファイルのエンコード設定です。

VS Codeなら、簡単にファイルのエンコードを確認・変更できます。

この記事では、以下の内容について詳しく解説します：

  • 現在のエンコードを確認する方法
  • 文字化けファイルを正しく開く方法
  • 別のエンコードで保存する方法
  • デフォルトエンコードの設定
  • エンコード自動判定の設定
  • よくあるトラブルと解決方法
  • 一括変換の方法

日本語ファイルの取り扱いやレガシーシステムとの連携で、エンコード問題を完全解決しましょう！

スポンサーリンク

エンコード（文字コード）の基礎知識

主要なエンコード形式

UTF-8

  • 現代の標準エンコード
  • 多言語対応で世界中で使用
  • Web標準として広く採用
  • VS Codeのデフォルト

Shift-JIS（SJIS）

  • 日本のWindowsで標準的に使用
  • レガシーシステムでよく見られる
  • 一部の日本語文字で問題が発生する場合あり

EUC-JP

  • Unix/Linux系で日本語を扱う際の標準
  • サーバーでよく使用される
  • 現在はUTF-8への移行が進んでいる

UTF-16

  • Windows内部で使用
  • **BOM（Byte Order Mark）**付きの場合が多い
  • ファイルサイズが大きくなる

エンコード選択の指針

用途推奨エンコード理由
新規プロジェクトUTF-8現代標準、多言語対応
既存Windows環境Shift-JIS互換性維持
Linux サーバーUTF-8Unix系標準
レガシーシステム既存に合わせるデータ整合性

現在のエンコードを確認する方法

ステータスバーでの確認

VS Codeでファイルを開くと、右下のステータスバーに現在のエンコードが表示されます。

表示例

UTF-8

Shift-JIS

EUC-JP

より詳細な確認方法

コマンドパレットでの確認

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Change File Encoding」と入力
  3. 現在のエンコードと選択可能な一覧が表示される

ファイル情報の詳細表示

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Developer: Inspect Editor Tokens and Scopes」を選択
  3. ファイルの詳細情報が表示される

BOM（Byte Order Mark）の確認

UTF-8にはBOM付きとBOM無しがあります：

BOM付きUTF-8

UTF-8 with BOM

BOM無しUTF-8

UTF-8

文字化けファイルを正しく開く方法

手動でのエンコード指定

文字化けが発生した場合の対処手順：

ステップ1: エンコードメニューを開く

  1. ステータスバーの「UTF-8」などのエンコード表示をクリック
  2. 「Reopen with Encoding」（再オープンでエンコードを選択）をクリック

ステップ2: 適切なエンコードを選択

よく使われるエンコードを順番に試してみましょう：

日本語ファイルの場合

  1. Shift-JIS – Windows環境のファイル
  2. EUC-JP – Unix/Linux環境のファイル
  3. UTF-8 – 現代的なファイル
  4. UTF-16 – Windows内部形式

その他の言語の場合

  • Windows-1252 – 西欧言語
  • ISO-8859-1 – ラテン文字
  • GB2312 – 中国語簡体字
  • Big5 – 中国語繁体字

自動エンコード判定の設定

基本的な自動判定設定

{
  "files.autoGuessEncoding": true
}

より高度な自動判定

{
  "files.autoGuessEncoding": true,
  "files.encoding": "utf8",
  "files.associations": {
    "*.txt": "plaintext"
  }
}

エンコード判定の優先順位設定

{
  "files.encodingOrder": [
    "utf8",
    "shiftjis", 
    "eucjp",
    "utf16le",
    "utf16be"
  ]
}

保存時のエンコード変更

現在のファイルのエンコード変更

手順

  1. ステータスバーのエンコード表示をクリック
  2. 「Save with Encoding」（エンコードを指定して保存）を選択
  3. 希望するエンコードを選択（例：Shift-JIS）
  4. ファイルが指定したエンコードで保存される

よく使われる保存エンコード

UTF-8 BOM無し

UTF-8

UTF-8 BOM付き

UTF-8 with BOM

Shift-JIS

Shift-JIS

EUC-JP

EUC-JP

一時的なエンコード変更

ファイルを一時的に別のエンコードで表示したい場合：

  1. Ctrl + Shift + Pでコマンドパレット
  2. 「Change File Encoding」を選択
  3. 「Reopen with Encoding」
  4. 一時的に表示エンコードが変更される

デフォルトエンコードの設定

グローバル設定

新規ファイルのデフォルトエンコード

{
  "files.encoding": "utf8"
}

BOM設定の制御

{
  "files.encoding": "utf8bom"
}

エンコード別の詳細設定

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}

ワークスペース固有の設定

プロジェクト単位でエンコードを統一する場合：

.vscode/settings.jsonでの設定

{
  "files.encoding": "shiftjis",
  "files.autoGuessEncoding": false,
  "files.eol": "\r\n"
}

言語別・ファイル別の設定

特定のファイル形式でのエンコード指定

{
  "files.encoding": "utf8",
  "[plaintext]": {
    "files.encoding": "shiftjis"
  },
  "[csv]": {
    "files.encoding": "shiftjis"
  },
  "[log]": {
    "files.encoding": "utf8"
  }
}

ファイル名パターンでの指定

{
  "files.associations": {
    "*.sjis.txt": "plaintext",
    "*.utf8.txt": "plaintext"
  },
  "files.encoding": "utf8"
}

エンコード自動判定の設定

基本的な自動判定

自動判定を有効にする

{
  "files.autoGuessEncoding": true
}

より精密な自動判定設定

判定対象ファイルの制限

{
  "files.autoGuessEncoding": true,
  "files.maxMemoryForLargeFilesMB": 4096,
  "files.encoding": "utf8"
}

判定精度の向上

{
  "files.autoGuessEncoding": true,
  "files.encodingOrder": [
    "utf8",
    "utf8bom", 
    "utf16le",
    "utf16be",
    "shiftjis",
    "eucjp",
    "gbk",
    "big5"
  ]
}

パフォーマンスとのバランス

大きなファイルでの自動判定は処理が重くなる場合があります：

{
  "files.autoGuessEncoding": true,
  "files.largeFileOptimizations": true,
  "files.maxMemoryForLargeFilesMB": 2048
}

よくあるエンコード問題とトラブルシューティング

文字化けパターン別の対処法

日本語が「?」や「�」になる

原因: エンコードの不一致 解決法:

  1. Shift-JISで再オープンを試す
  2. EUC-JPで再オープンを試す
  3. UTF-8 BOM付きで試す

英数字は正常だが日本語だけ化ける

原因: ASCII互換エンコードの問題 解決法:

{
  "files.autoGuessEncoding": true,
  "files.encodingOrder": ["shiftjis", "eucjp", "utf8"]
}

改行コードも含めて全体が崩れる

原因: UTF-16などの2バイト系エンコード 解決法: UTF-16LE または UTF-16BE で再オープン

BOM関連の問題

BOMが原因のトラブル

XMLやHTMLでのBOM問題

{
  "files.encoding": "utf8",
  "[xml]": {
    "files.encoding": "utf8"  // BOM無しを強制
  },
  "[html]": {
    "files.encoding": "utf8"
  }
}

CSV ファイルでのExcel互換性

{
  "[csv]": {
    "files.encoding": "utf8bom"  // Excel用にBOM付き
  }
}

ファイルサイズが大きい場合

大容量ファイルの最適化

{
  "files.largeFileOptimizations": true,
  "files.maxMemoryForLargeFilesMB": 4096,
  "files.autoGuessEncoding": false  // 大きなファイルでは無効化
}

ネットワークドライブでの問題

遠隔ファイルアクセス時の設定

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "files.autoGuessEncoding": false
}

エンコード一括変換の方法

VS Code拡張機能による変換

ConvertToUTF8 拡張機能

  1. 「ConvertToUTF8」拡張機能をインストール
  2. ファイルを開くと自動的にUTF-8に変換される
  3. 元のエンコードを保持したまま編集可能

Encoding Converter 拡張機能

  1. 「Encoding Converter」をインストール
  2. 複数ファイルを選択
  3. 右クリック → 「Convert Encoding」
  4. 一括変換実行

PowerShellスクリプトによる一括変換

Shift-JIS からUTF-8への変換スクリプト

# 複数ファイルを一括でUTF-8に変換
Get-ChildItem -Path "." -Filter "*.txt" | ForEach-Object {
    $content = Get-Content $_.FullName -Encoding SJIS
    $utf8Path = $_.FullName
    $content | Out-File -FilePath $utf8Path -Encoding UTF8 -Force
    Write-Host "Converted: $($_.Name)"
}

より高度な変換スクリプト

# エンコード検出と変換を自動化
param(
    [string]$SourcePath = ".",
    [string]$FilePattern = "*.txt",
    [string]$TargetEncoding = "UTF8"
)

Add-Type -AssemblyName "System.Text.Encoding"

Get-ChildItem -Path $SourcePath -Filter $FilePattern -Recurse | ForEach-Object {
    try {
        # 元のエンコードを検出
        $bytes = [System.IO.File]::ReadAllBytes($_.FullName)
        $encoding = [System.Text.Encoding]::GetEncoding("Shift_JIS")
        
        if ($bytes.Length -gt 3 -and $bytes[0] -eq 0xEF -and $bytes[1] -eq 0xBB -and $bytes[2] -eq 0xBF) {
            Write-Host "Already UTF-8 BOM: $($_.Name)"
            return
        }
        
        # 内容を読み取り
        $content = $encoding.GetString($bytes)
        
        # UTF-8で保存
        [System.IO.File]::WriteAllText($_.FullName, $content, [System.Text.Encoding]::UTF8)
        Write-Host "Converted: $($_.Name) -> UTF-8"
    }
    catch {
        Write-Warning "Failed to convert: $($_.Name) - $_"
    }
}

Node.jsスクリプトによる変換

高機能な変換ツール

const fs = require('fs');
const path = require('path');
const iconv = require('iconv-lite');
const glob = require('glob');

// エンコード検出ライブラリ
const chardet = require('chardet');

async function convertFiles(pattern, targetEncoding = 'utf8') {
    const files = glob.sync(pattern);
    
    for (const file of files) {
        try {
            // ファイル読み込み
            const buffer = fs.readFileSync(file);
            
            // エンコード自動検出
            const detected = chardet.detect(buffer);
            console.log(`${file}: Detected encoding: ${detected}`);
            
            if (detected && detected.toLowerCase() !== targetEncoding) {
                // 元のエンコードでデコード
                const content = iconv.decode(buffer, detected);
                
                // 目標エンコードでエンコード
                const converted = iconv.encode(content, targetEncoding);
                
                // ファイル保存
                fs.writeFileSync(file, converted);
                console.log(`Converted: ${file} (${detected} -> ${targetEncoding})`);
            } else {
                console.log(`Skipped: ${file} (already ${targetEncoding})`);
            }
        } catch (error) {
            console.error(`Error processing ${file}:`, error.message);
        }
    }
}

// 使用例
convertFiles('**/*.txt', 'utf8');
convertFiles('**/*.csv', 'utf8');

実用的な設定例

Web開発者向け設定

モダンWeb開発の推奨設定

{
  "files.encoding": "utf8",
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "files.autoGuessEncoding": false,
  "[html]": {
    "files.encoding": "utf8"
  },
  "[css]": {
    "files.encoding": "utf8"  
  },
  "[javascript]": {
    "files.encoding": "utf8"
  },
  "[typescript]": {
    "files.encoding": "utf8"
  }
}

レガシーシステム連携

既存システムとの互換性重視設定

{
  "files.encoding": "shiftjis",
  "files.eol": "\r\n",
  "files.autoGuessEncoding": true,
  "files.encodingOrder": [
    "shiftjis",
    "eucjp", 
    "utf8",
    "utf16le"
  ],
  "[csv]": {
    "files.encoding": "shiftjis"
  },
  "[txt]": {
    "files.encoding": "shiftjis"
  }
}

多言語対応プロジェクト

国際化対応の設定

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true,
  "files.encodingOrder": [
    "utf8",
    "utf8bom",
    "utf16le",
    "utf16be",
    "shiftjis",
    "eucjp",
    "gbk",
    "big5",
    "latin1"
  ]
}

高度なエンコード管理

EditorConfigとの連携

.editorconfigでのエンコード指定

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.txt]
charset = shift_jis
end_of_line = crlf

[*.csv]
charset = shift_jis

[*.{js,ts,html,css}]
charset = utf-8

Git との連携

.gitattributesでのエンコード管理

# テキストファイルの改行コード統一
* text=auto

# 特定ファイルのエンコード指定
*.txt text eol=crlf
*.csv text eol=crlf
*.sh text eol=lf

# バイナリファイルの指定
*.png binary
*.jpg binary
*.pdf binary

Git設定でのエンコード制御

# Git設定でのエンコード指定
git config core.quotepath false
git config gui.encoding utf-8
git config i18n.logoutputencoding utf-8
git config i18n.commitencoding utf-8

パフォーマンスとセキュリティ

大容量ファイルでの最適化

メモリ使用量の制御

{
  "files.maxMemoryForLargeFilesMB": 2048,
  "files.largeFileOptimizations": true,
  "files.autoGuessEncoding": false
}

セキュリティ考慮

不正なエンコードからの保護

{
  "files.autoGuessEncoding": true,
  "files.encoding": "utf8",
  "security.workspace.trust.untrustedFiles": "prompt"
}

まとめ

VS Codeでファイルのエンコードを適切に管理する方法をまとめました：

基本的な操作

  • ステータスバーから簡単にエンコード確認・変更
  • 自動判定機能で文字化けを防止
  • デフォルト設定でプロジェクト全体を統一

高度な設定

  • 言語別・ファイル別の細かい制御
  • EditorConfig・Gitとの連携
  • 一括変換ツールでの効率的な移行

実用的な設定例

モダン開発環境

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true,
  "files.eol": "\n",
  "files.insertFinalNewline": true
}

レガシー対応環境

{
  "files.encoding": "shiftjis", 
  "files.autoGuessEncoding": true,
  "files.encodingOrder": ["shiftjis", "eucjp", "utf8"],
  "files.eol": "\r\n"
}

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

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