VS Codeで改行コードを可視化する方法｜LFやCRLFを一目で確認

「VS Codeでコードを書いていて、改行コードがLFなのかCRLFなのか分からない」
「チーム開発で改行コードが混在してGitで問題が起きている」
「行末に改行マークを表示して、空白文字も見えるようにしたい」

そんな悩みを抱えたことはありませんか？

改行コードの違いは見た目では分からないため、WindowsとmacOS・Linuxが混在する開発環境では、知らず知らずのうちに問題を引き起こすことがあります。特にGitでのマージ時に予想外のコンフリクトが発生したり、ファイル全体が変更されたように見えたりする原因になります。

VS Codeには、改行コードの種類（LF / CRLF）を確認する方法と行末の改行や空白文字を可視化する方法の両方が用意されています。

この記事では、それらの方法を詳しく解説し、チーム開発で改行コードを統一するベストプラクティスもご紹介します。

改行コードの基礎知識
改行コード（LF / CRLF）の種類を確認する方法
1. ステータスバーで確認
2. 改行コードの変更方法
行末の改行マークを可視化する方法
改行コードを統一するベストプラクティス
トラブルシューティング
1. よくある問題と解決法
2. 拡張機能による強化
実際の開発での活用例
1. コードレビューでの活用
2. チーム開発での統一
まとめ

改行コードの基礎知識

改行コードとは

改行コードとは、テキストファイルで「行の終わり」を示すために使われる制御文字のことです。見た目は同じでも、OSによって異なる文字が使われています。

主な改行コードの種類

LF（Line Feed）

文字コード：\n（0x0A）
使用OS：Linux、macOS、Unix系
特徴：現在最も広く使われている標準的な改行コード

CRLF（Carriage Return + Line Feed）

文字コード：\r\n（0x0D 0x0A）
使用OS：Windows
特徴：キャリッジリターンとラインフィードの組み合わせ

CR（Carriage Return）

文字コード：\r（0x0D）
使用OS：古いMac OS（OS 9以前）
特徴：現在はほとんど使われない

改行コード混在による問題

Git での問題

ファイル全体が変更されたように見える
意図しないマージコンフリクトの発生
差分表示が正しく動作しない

実行環境での問題

シェルスクリプトが正しく動作しない
一部のツールでエラーが発生
文字化けや表示崩れ

改行コード（LF / CRLF）の種類を確認する方法

ステータスバーで確認

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

表示される内容

LF：Unix系（Linux、macOS）の改行コード
CRLF：Windows の改行コード
Mixed：複数の改行コードが混在している状態

ステータスバーが表示されない場合

もしステータスバーが見えない場合は：

メニューバーの「表示」→「アピアランス」→「ステータスバー」をクリック
またはCtrl + Shift + Pでコマンドパレットを開き、「Toggle Status Bar Visibility」を実行

改行コードの変更方法

ステータスバーから変更

ステータスバーのLFやCRLFをクリック
「行末文字の選択」メニューが表示される
変更したい改行コードを選択

選択可能なオプション

LF：Linux/macOS用（推奨）
CRLF：Windows用
Auto：ファイルの内容から自動判定

コマンドパレットから変更

Ctrl + Shift + P（MacはCmd + Shift + P）
「Change End of Line Sequence」と入力
目的の改行コードを選択

行末の改行マークを可視化する方法

設定ファイルでの設定

VS Codeの設定ファイル（settings.json）に以下を追加すると、空白文字や改行コードが可視化されます：

{
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true
}

設定項目の詳細

editor.renderWhitespace

"none"：空白文字を表示しない（デフォルト）
"boundary"：単語の境界のスペースのみ表示
"selection"：選択範囲内の空白文字のみ表示
"trailing"：行末の不要な空白のみ表示
"all"：すべての空白文字を表示

editor.renderControlCharacters

true：制御文字（改行、タブなど）を記号で表示
false：制御文字を表示しない（デフォルト）

GUI設定での変更方法

空白文字の表示設定

Ctrl + ,（MacはCmd + ,）で設定を開く
検索欄に「whitespace」と入力
「Editor: Render Whitespace」を設定

制御文字の表示設定

設定画面で「control characters」と検索
「Editor: Render Control Characters」にチェックを入れる

表示される記号の種類

空白文字

スペース：·（中点）
タブ：→（右矢印）
全角スペース：□（四角）

改行コード

LF：¬（ノット記号）
CRLF：¬（ノット記号、ただし前にCRマークが付く場合もある）

一時的な表示切り替え

ショートカットでの切り替え

デフォルトではショートカットが設定されていませんが、以下の手順で設定できます：

Ctrl + K, Ctrl + Sでキーボードショートカット設定を開く
「toggle whitespace」で検索
「Toggle Render Whitespace」にショートカットを割り当て

コマンドパレットでの切り替え

Ctrl + Shift + P
「Toggle Render Whitespace」と入力して実行

改行コードを統一するベストプラクティス

プロジェクト全体での統一

.editorconfigファイルの使用

プロジェクトルートに.editorconfigファイルを作成して、チーム全体で設定を統一できます：

# .editorconfig
root = true

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

[*.{js,ts,json}]
indent_style = space
indent_size = 2

[*.{py,rb}]
indent_style = space
indent_size = 4

[*.go]
indent_style = tab

主要な設定項目

end_of_line：改行コードの指定（lf、crlf、cr）
insert_final_newline：ファイル末尾に改行を追加
trim_trailing_whitespace：行末の不要な空白を削除

Gitでの改行コード管理

.gitattributesファイル

プロジェクトルートに.gitattributesファイルを作成：

# .gitattributes
* text=auto eol=lf

# 特定のファイルタイプの設定
*.js text eol=lf
*.ts text eol=lf
*.json text eol=lf
*.md text eol=lf

# バイナリファイルの設定
*.png binary
*.jpg binary
*.gif binary

Git設定の調整

# 改行コードの自動変換を有効化
git config --global core.autocrlf input  # Mac/Linux
git config --global core.autocrlf true   # Windows

# 改行コードの警告を有効化
git config --global core.safecrlf warn

VS Code ワークスペース設定

プロジェクト固有の設定は.vscode/settings.jsonに記述：

{
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "editor.renderWhitespace": "boundary"
}

トラブルシューティング

よくある問題と解決法

改行コードが混在している場合

症状： ステータスバーに「Mixed」と表示される 解決法：

Ctrl + Hで置換画面を開く
正規表現モードを有効にする（.*アイコン）
検索欄に\r\n、置換欄に\nを入力
「すべて置換」を実行

改行コードが勝手に変わってしまう

症状： 保存時に改行コードが自動で変換される 解決法：

設定で「files.eol」を確認
.editorconfigの設定をチェック
Git のcore.autocrlf設定を確認

空白文字の表示が邪魔

症状： 空白文字の可視化が見づらい 解決法：

editor.renderWhitespaceを"boundary"に変更
必要な時だけコマンドパレットで切り替え
カスタムショートカットを設定

拡張機能による強化

EditorConfig for VS Code

.editorconfigファイルの設定を自動で適用する拡張機能：

拡張機能ID：EditorConfig.EditorConfig
インストール後は自動でプロジェクト設定を読み込み

Trailing Spaces

行末の不要な空白をハイライト・削除する拡張機能：

拡張機能ID：shardulm94.trailing-spaces
行末の空白を赤くハイライト
コマンド一発で削除可能

実際の開発での活用例

コードレビューでの活用

改行コードや空白文字の可視化は、コードレビューの際に特に有効です：

レビュー前のチェック

{
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "files.trimTrailingWhitespace": true
}

不要な空白の検出

行末に残ったスペースやタブを発見
インデントの不統一を視覚的に確認
改行コードの混在を早期発見

チーム開発での統一

新規プロジェクトのセットアップ

.editorconfigで基本設定
.gitattributesでGit設定
.vscode/settings.jsonでVS Code設定
チーム内でのルール共有

既存プロジェクトの改善

現在の改行コード状況を調査
段階的な統一作業の計画
一括変換の実施
今後の混入防止策の導入

まとめ

VS Codeで改行コードを可視化・管理する方法をまとめると：

改行コードの確認と変更

目的	方法
改行コード確認	右下ステータスバーをチェック
改行コード変更	ステータスバーの「LF/CRLF」をクリック
一時的な確認	コマンドパレット → Change End of Line Sequence

空白文字・改行の可視化

設定項目	効果
`editor.renderWhitespace: "all"`	すべての空白文字を表示
`editor.renderControlCharacters: true`	改行コードなど制御文字を表示
`editor.renderWhitespace: "boundary"`	単語境界の空白のみ表示