Now that I have a job where I’m writing web components full time, I see the this keyword more than I ever have in my whole life. It’s not a problem, per se, but you can see how it’s a little repetitive. I started wondering what my options were to fix this minor annoyance and the ShopTalk Discord helped me find a simple way and an over-the-top way to fix my issue.

Simple way: Overriding VS Code theme color tokens

By default my Github Light theme makes this a bold dark blue color. I didn’t want to roll my own theme though to scratch this niche itch, so I dug in and found out you can override single tokens in VS Code. Handy. The documentation is a bit opaque but here’s what you need to do:

// settings.json
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "variable.language.this",
      "settings": {
        "foreground": "#b0b0b0"
      }
    }
  ]
},

Now my this looks like this…

It’s a calming sensation for me to have repetitive noise dimmed. I liked it so much I dimmed comments to match as well. I may even dim TypeScript because sometimes I wish I could hide the syntax, but keep the squiggles.

Over the top way: Replace this with a custom glyph

Changing colors is cool… but what if you could go one step further and replace this with an icon? What would an icon for this even look like?

I asked the ShopTalk Discord and got some interesting ideas like the “☝️” emoji, which I think is funny in an “I’m with stupid” t-shirt sort of way. Andrew Walpole took it to the next level and designed a custom glyph:

Alan Smith then figured out how to use Glyphs Mini to add a custom ligature to an open source coding font. Andrew riffed on Alan’s work and exported a custom version of Fira Code with his custom glyph as a ligature. The last step was to install the font update my VS Code settings:

  "editor.fontFamily": "'Fira Code Ligged', monospace",
  "editor.fontLigatures": true

Now my code looks incredibly futuristic…

Abusing typefaces to remove the repetitiveness of programming languages is fun. After seeing the icon in situ, the idea might be a smidge too wild for me due to reduced legibility. While I don’t use the custom glyph on the daily, this experiment does spark a deep desire in me to create a bunch of custom glyphs for common keywords so I can make JavaScript an entirely rune-based programming language.

Custom ligatures with CSS?

A wild idea, but it would be neat if you could create your own custom ligatures in CSS to avoid the need to re-bake custom fonts each time you have a niche typographic need. Here’s a pseudo-syntax of how that might work:

@font-face "Dave Hijinks" {
  match: "this.";
  replace: "☝️.";
}

@font-face "Cloud2Butts" {
  match: "cloud", "AI";
  replace: "butt", url(fart.svg);
}

body {
  font-face: "Dave Hijinks", "Cloud2Butt", sans-serif;
}

Anyways, it’s a thought. Not a serious proposal. This was a fun rabbit hole to travel down with some friends.