VSCodeの空白・全角空白・タブ文字が見づらいのをなんとかする

概要

VSCodeの空白文字が見づらく、tabと空白が混ざったりとか行末空白とかに気づけない、という事が何度かあったので、なんとかなるようにしました

解決策概要

拡張機能の whitespace+ を使いました。

「ホワイトスペースを目立たせるやつ」なんですが、実態は「任意の正規表現にヒットした文字列に、任意の背景色をつける」でした。

解決策詳細

拡張機能インストールののち、コマンドパレットで >Whitespace+ Config すると、config.jsonが開きます。
それをこうしました。

config.json

{
	"mode": "all",
	"autoStart": true,
	"refreshRate": 100,
	"elements":
	[{
		"name": "タブ文字は目障りにならない程度に色付けする",
		"enabled": true,
		"pattern": "\\t",
		"style": {
			"dark": {
				"backgroundColor": "rgb(48, 48, 48)"
			}
		}
	},{
		"name": "タブ文字と空白が隣り合わせてるやつ絶対許さない",
		"enabled": "true",
		"pattern": "\\t | \\t",
		"style": {
			"dark": {
				"backgroundColor": "pink"
			}
		}
	},{
		"name": "全角空白はめっちゃ目立たせる",
		"enabled": "true",
		"pattern": "　",
		"style": {
			"dark": {
		 		"backgroundColor": "pink"
			}
		}
	},{
		"name": "行末に空白文字があるのはめっちゃ目立たせる",
		"enabled": "true",
		"pattern": "[^\\S\\r\\n]+$",　
		"style": {
			"dark": {
				"backgroundColor": "pink"
			}
		}
	}]
}

結果

ひとまず満足いく結果になりました。
連続スペースをタブと同様に扱ってもいいかもしれません。

設定ファイルの書式等

config.jsonの設定項目は、デフォルトではこんなかんじです。
ちょっと弄ってみるとけっこう柔軟に反応してくれたので、↑の設定は最小限まで絞り込みました。

config.json.default

{
        "name": "space", # 任意なので、項目の説明にしたらいいと思う
        "enabled": true, # カーソル位置によっては色を変えないという設定ができる。詳細は拡張機能のページに記載してる
        "pattern": "\\s", # 正規表現が使える
        "style": {
            "borderWidth": "1px", # 対象文字列の背景の枠線の太さ。いらないと思ったので削った。
            "borderRadius": "2px", # 対象文字列の背景の角の丸め。いらないと（ｒｙ
            "borderStyle": "solid", # 対象文字列の背景の線。いらｎ（ｒｙ
            "light": { # ライトモードのときの色設定。自分はダークモードでしか使ってないので削った。
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": { # ダークモードのときの色設定。
                "backgroundColor": "rgba(117, 141, 203, 0.3)", # 背景色。rgb形式でも色名でもOK。
                "borderColor": "rgba(117, 141, 203, 0.4)" # 線の色。いらないと思ったので（ｒｙ
            }
        }
    }

空白に限らず任意の正規表現を設定できるので、他の用途も何かあるかもしれません。
こんなかんじ