W.I.S. Laboratory
menu-bar

Visual Stdio Code


Visual Studio Codeで行末(改行)を可視化して「↲」や「↓」などにする

vscodeはすばらしいコーディングエディタなのだが、秀丸やMeryなどに慣れていると、行末の改行コードが可視化できないのが気になる。
これができないと、スペースだけの行や行末に入ってしまった無駄なスペースに気づきにくいのだ。
Ctrl + K → X のショートカットで行末スペースの一括削除ができるし、設定の「Trim Auto Whitespace」のチェックを入れておけば、自動挿入された行末スペースは自動的に削除してくれるものの、頻繁にCtrl + K→Xを闇打ちするのも面倒だし、自動削除設定はコード編集の仕方によって消えてくれないときがある。
「render whitespace」を「trailing」にすれば、行末のみのスペースが可視化されるのでマシにはなるが、もう少し気づきやすくしたい。
なんとかならないかと探してみると行末を可視化する拡張機能がいくつか見つかった。

  • line-endings(Stefan Neubert製)
  • code-eol 2022 (Line Endings)(Jeff Hykin製)
  • code-eol(sohamkamani製)
  • code-eol(jcmnunes製)
全部試してみたが、line-endingsはWindowsだと全行末にCR LFと大きく出るので圧迫感があるし、jcmnunes氏のcode-eolは1KBと小さいのは魅力的だが行最後の文字にカーソルを合わせると改行文字の右側にカーソルが立つので違和感が大きい。
結局、Jeff Hykin製のcode-eol2022とsohamkamani製のcode-eolが良かった。
code-eol2022は行末文字を変更できたりとカスタマイズ性が高いが、正直可視化できればそれでいいので、シンプルなsohamkamani氏のcode-eolで十分という感じがした。
ただデフォルトだと改行文字がちょっと自己主張しすぎなので、setting.jsonを書き換えて色に変えるといい感じになる。
以下インストールと設定手順。

  1. Ctrl + Shift + X を押して拡張機能を表示する
  2. 「code-eol」で検索する
  3. 「code-eol sohamkamani」の「インストール」をクリック
  4. 「インストールした「code-eol」の設定(ギアのアイコン)をクリック
  5. 「拡張機能の設定」をクリック
  6. 「setting.jsonで編集」をクリック
  7. 「"code-eol.color": ""」の中身を編集する
    例) "code-eol.color": "#555" など
  8. Ctrl + S を押してsetting.jsonを保存する

ちなみに改行コードによって行末文字が違い、CRLFだとWordのような「↲」になり、LFだと秀丸のような「↓」になる。
CRLFでも秀丸のような「↓」に統一したいときは、code-eol2022を使うしかない。(個人的には改行コード別に行末文字を分けたほうがトラブルを防げて良いとは思うが)
もちろん「↲」に統一することも可能だし、「◀」などにもできる。
少し設定手順が煩雑だが、以下のような感じ。

  1. Ctrl + Shift + X を押して拡張機能を表示する
  2. 「code-eol」で検索する
  3. 「code-eol 2022 (Line Endings)」の「インストール」をクリック
  4. 「インストールした「code-eol 2022 (Line Endings)」の設定(ギアのアイコン)をクリック
  5. 「拡張機能の設定」をクリック
  6. 「code-eol: Crlf Character」の「setting.jsonで編集」をクリック
  7. 「"code-eol.crlfCharacter": "",」以下を下のように編集する
  8. Ctrl + S を押してsetting.jsonを保存する

[ 戻る ]
saluteweb