How to dim semicolons in editor or IDE

[Waldenesque]

I'm posting here as a convenient reference in case this is useful to others like myself, who dislike semicolons yet may be using them anyway.

(Originally I had a background explanation here, but I don't suppose it matters, so I removed it.)

Credit where credit's due: this is stolen from the following Medium article:

Dimming or hiding semicolons in VSCode

I'm reproducing this here for two reasons. It's convenient to have this on GitHub rather than Medium. Also, there was a small but significant mistake in the article which I'll correct here. However, thanks to the author of the article!

Note: I tested it at one point, and it is possible to do something similar in JetBrains products as well. However I'll leave that for someone else to document if they like, and just focus on VS Code here.

You'll need to find VS Code's settings.json file. There are probably OVER NINE THOUSAND articles on the Intarwebz telling you how to do that, so I'll skip it here.

Update: VS Code version 1.75 just released for January 2023 includes a new "Profiles" feature. It's not fully documented yet and it'll probably take a few months for docs and articles to appear, and I'm not planning to elaborate here as profiles are a more general feature and I'm only focusing on semicolon config. Just keep in mind that if you create multiple profiles in VS Code, you'll have multiple settings.json files, so make sure you edit the one for whichever profile you want to use.

Here's an example of a fresh settings.json with only a couple of changes:

{
    "workbench.colorTheme": "Default Dark+",
    "extensions.autoUpdate": "onlyEnabledExtensions"
}

Paste in the text that follows. Note that it's easier if you paste it at the top of the file, so you don't have to worry about JSON being fiddly about trailing commas, you can just let VS Code worry about that for you.

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "source.js punctuation.terminator",
                    "source.js.jsx punctuation.terminator",
                    "source.ts punctuation.terminator",
                    "source.tsx punctuation.terminator"
                ],
                "settings": {
                    "foreground": "#FFFFFF30"
                }
            }
        ]
    },

The original Medium article has one line as "source.jsx" which is incorrect, it should be "source.js.jsx."

Here's the resulting settings.json file you should end up with:

{
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "source.js punctuation.terminator",
                    "source.js.jsx punctuation.terminator",
                    "source.ts punctuation.terminator",
                    "source.tsx punctuation.terminator"
                ],
                "settings": {
                    "foreground": "#FFFFFF30"
                }
            }
        ]
    },
    "workbench.colorTheme": "Default Dark+",
    "extensions.autoUpdate": "onlyEnabledExtensions"
}

Of course yours will be different if you've chosen a different color theme or made other configuration changes to VS Code, but you get the idea.

Note that "#FFFFFF30" specifies the color of the semicolons. In VS Code the color works in two parts. The "FFFFFF" part is the color, in this case white. The "30" part is a transparency value. The combined result "#FFFFFF30" is intended to be used with dark color themes that have a dark background color. Effectively what it does is lighten the background color by applying a partial white overlay. This is a nice way to do it because it blends fairly nicely with any dark background color.

If you use a light color theme, then you'll want to do the opposite, and apply a partial black overlay to your light background color, by changing the "FFFFFF" for white to "000000" for black.

So for dark color themes you'll have this in settings.json:

                "settings": {
                    "foreground": "#FFFFFF30"
                }

For light color themes, just change it to this instead:

                "settings": {
                    "foreground": "#00000030"
                }

Optionally if you like, you can try adjusting the "30" part for a different transparency value, to make the semicolons lighter or darker. However, I tried playing around with this, and I found the "30" value chosen by the original author of the Medium article to be the best "middle ground compromise."

A key point to keep in mind is that VS Code does not distinguish between semicolons (at least for JavaScript at present). In other words, dimming semicolons will also apply to semicolons within lines of code like this:

for (let i = 0; i < path.length; i++) {

So you likely won't want to dim them too much. The "30" value is quite nice.

If you also use Dart, you can add one additional line to settings.json:

                "scope": [
                    "source.dart punctuation.terminator",
                    "source.js punctuation.terminator",
                    "source.js.jsx punctuation.terminator",
                    "source.ts punctuation.terminator",
                    "source.tsx punctuation.terminator"
                ],

Personally, I find this mostly resolves the "visual clutter" problem of mandatory semicolons. It softens them enough that it's merely a minor annoyance easy enough to ignore rather than a major annoyance constantly crying out for attention. It makes it a mild enough nuisance that I intend to just go with the default of mandatory semicolons.

Thanks again to the original author of the Medium article.

If other people want to document how to do this for JetBrains, Neovim and other editors and IDEs, they can add a comment with the appropriate instructions. It could be convenient to have this in one place. I linked to this from the Dart issue on optional semicolons (dart-lang/language#69), as Dart developers may be relatively more familiar with JetBrains products and could provide instructions covering Dart, JavaScript and TypeScript.

If you do add such a comment, please try to make your instructions fairly "newbie friendly." Aside from new people entering the field, even if you're a veteran coder you still become a partial newbie whenever you switch to some major new tool. So it's helpful for everybody if your instructions don't assume much prior expertise. Also try to cover both dark and light themes if possible. Thanks.