「Pug（旧Jade）の//コメントの色が変わらない理由と対処法【VS Code】」

はじめに

Pug（旧Jade）というテンプレートエンジンを使って開発している中で、気になっていたのが「コメントの色が文字列と同じで見づらい」ということでした。

今回その原因と対処法がわかったので、備忘録も兼ねてまとめておきます。

解決方法

VS Code のコマンドパレット（Ctrl+Shift+P）からPreferences: Open Settings (JSON)　を開き、以下を追記します。

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "string.comment.buffered.block.pug",
                "settings": {
                    "foreground": "#6A9955",  // 好きな色に変更OK
                    "fontStyle": ""           // 斜体にしたい場合は "italic" を追加
                }
            }
        ]
    }

コメントの色が緑色になりました。

解説

通常、コメントは commentスコープとして認識されるため、VS Codeのテーマやカスタマイズ設定で色を変更できます。

しかし、Pugで // を使って書くコメントは、HTMLに変換されるため、VS Code 上では「コメント」ではなく、文字列（string）扱いになっています。
そのため、コメントが文字列と同じ色になっていました。

そのため環境設定のファイルを直接変更して、テキストの色を変更させる必要がありました。

おわりに

このコメントの色の件、実は結構前から気になってはいたものの、設定方法が分からず、検索してもなかなか情報が出てこなかったので放置していました。

でも今は気になったことをAIに聞けば、こういった細かいモヤモヤもすぐに解消できる時代になりました。
このように VS Code の細かい設定もすぐにわかるのは本当にありがたいです。

ちょっとした引っかかりでも、気になったら遠慮なく調べて解決していきたいですね。