【小ネタ】VSCodeの拡張機能で tab を強調表示してみた

概要

インデント tab 嫌いマンなので拡張機能を使って赤く強調表示してみました。

拡張機能のインストール

拡張機能から Whitespace+ で検索してください。

設定ファイルを変更

Ctr+Shift+P でファイル検索モードに切り替え、Whitespace+ Config と入力してEnter。

以下の記述が tab についてです。

"name": "tab",
"enabled": true,
"pattern": "\\t",
"style": {
    "borderWidth": "1px",
    "borderRadius": "2px",
    "borderStyle": "solid",
    "light": {
        "backgroundColor": "rgba(170, 53, 53, 0.3)",
        "borderColor": "rgba(170, 53, 53, 0.4)"
    },
    "dark": {
        "backgroundColor": "rgba(223, 20, 20, 0.3)",
        "borderColor": "rgba(255, 97, 97, 0.4)"
    }
}

コピペで使えるように全文載せておきます。

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": true,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(1, 1, 1, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(30, 30, 30, 0.3)",
                "borderColor": "rgba(30, 30, 30, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": true,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 20, 20, 0.3)",
                "borderColor": "rgba(255, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": true,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(40, 40, 40, 0.4)"
            },
            "dark": {
                "borderColor": "rgba(40, 40, 40, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(40, 40, 40, 0.3)",
                "borderColor": "rgba(40, 40, 40, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(40, 40, 40, 0.3)",
                "borderColor": "rgba(40, 40, 40, 0.4)"
            }
        }
    }]
}

結果

tab を赤く強調表示できました。2度とtabを書くことはなくなります。

補足

半角スペースの表示は下記のファイルに追記
C:\Users{user}\AppData\Roaming\Code\User\settings.json

{
    "editor.renderWhitespace": "all"
}