VS Codeで現在のファイルの改行コード（LF / CRLF）を確認するだけなら、ウィンドウ右下のステータスバーに「LF」「CRLF」と表示されているので拡張機能は不要です。ただしステータスバーの表示はファイル単位のため、行ごとの改行コードや混在を確認したい場合は拡張機能「code-eol」を使います。この記事では両方の方法を解説します。
拡張機能なしで改行コードを確認する（ステータスバー）
VS Codeはファイルを開いた時点で、そのファイルの改行コードをウィンドウ右下に表示しています。「LF」ならLine Feed（UnixやmacOS系）、「CRLF」ならCarriage Return + Line Feed（Windows系）です。
この表示部分をクリックすると「行末シーケンスの選択」が開き、その場でLFとCRLFを切り替えられます。コマンドパレット（Windows: Ctrl + Shift + P／Mac: Command + Shift + P）から「Change End of Line Sequence」を実行しても同じです。改行コードの変更方法はVS Codeで改行コードを変更する方法まとめで詳しく解説しています。
ただしこの表示でわかるのはファイル全体に対する1つの値だけです。1つのファイル内でLFとCRLFが混在している場合、ステータスバーだけでは混在に気づけません。行ごとに目で確認したい場合は、次に紹介する「code-eol」を使います。
code-eolとは
「code-eol」は、VSCodeの拡張機能で、AtomやNotepad++のように行末（End of Line, EOL）を表示する機能を提供します。さらに、特定の種類の行末を避けたい場合には、エラーカラーで表示するオプションもあります。
code-eolのインストール方法
VSCodeの拡張機能は、VSCodeのエディタ内から直接インストールすることができます。以下に、具体的な手順を示します。
- VSCodeを開き、左側のアクティビティバーにある「Extensions」（四角が重なっているアイコン）をクリックします。
- 検索ボックスに「code-eol」と入力し、検索結果に表示された「code-eol」をクリックします。
- 「Install」ボタンをクリックしてインストールします。
これで、「code-eol」のインストールは完了です。
code-eolの使い方
「code-eol」をインストールしたら、次にその使い方を学びましょう。基本的には、拡張機能をインストールしただけで自動的に機能します。ただし、VSCodeの設定で「renderWhitespace」が有効になっていることを確認してください。これはコマンドパレットの「Toggle Render Whitespace」コマンドで切り替えることができます。スペースを表示したくない場合は、「Toggle Render Whitespace」の代わりに「Toggle (Show/Hide) Line Endings」コマンドを使用します。
改行コードの文字色は薄くて見にくいので下記の方法で色を変えてみることをお勧めます。
code-eolのカスタマイズ方法
「code-eol」は、色や透明度、各種行末に使用する文字など、多くの設定をカスタマイズすることができます。以下に、設定例を示します。
"code-eol.style": {
"color" : "#2a3f47",
"opacity" : 1.0
},
"code-eol.toggleWithWhiteSpace": true,
"code-eol.newlineCharacter":"¬",
"code-eol.returnCharacter" :"⇠",
"code-eol.crlfCharacter" :"↵",
"code-eol.newlineCharacterStyle" : {
"color": "#2a3f47",
"opacity": 0.9
},
"code-eol.returnCharacterStyle" : {
"color": "#2a3f47",
"opacity": 0.9
},
"code-eol.crlfCharacterStyle" : {
"color": "#2a3f47",
"opacity": 0.9
}関連動画
まとめ
以上が、「code-eol」の基本的な使い方とカスタマイズ方法となります。この拡張機能を活用することで、改行コードの違いによる問題を早期に発見し、解決することが可能となります。
