Syntax highlight is usually used to show you the language constructs. But in Typescript(and in many other languages, with some exceptions) the language constructs are immediately apparent, especially when you have more experience.
I hope after reading this article you will get a feeling of how powerful the proper code highlighting can be. It frees your mind from unnecessary details and focuses on the most important. The general principle is:
Turn off syntax highlight completely
Highlight what you care about the most
Dimm what you don’t care about
When you read code, you know where are the function arguments, and where are the variables, etc. So most of the time syntax highlight is just cluttering your mind without you even realising it.
So rather than using the syntax highlight as a tool to explain me my language construct, I use it to highlight important parts of the program, and dimm the unimportant ones.
Let me show.
await
await keyword shows me where the code will wait for execution. For me it’s important to see that. From the first glance I immediately get intuition of how the code will perform, where it can wait, or create too many promises, etc, etc.
await
is a language construct of course, but when it’s highlighted that way, and nothing else is highlighted, then it’s immediately apparent where the async blocks are in the code.
log()
Most of the time, when reading code, I’m not interested in log statements, so I configured VS code to dimm them. That way I’m not hesitating when I need to add more logs, since they will not clutter my mind when reading the code, but will still help with useful info when looking into log files.
assert()
I’m a heavy user of assertions. They help me check the expectations, that are hard to catch with type system, and in general my code is more robust with assertions(I guess I should write a post about them). But when reading code most of the time I’m not interested in assertions code as well. Though, I can still read it when I need.
Another real-world example:
PS. This can be used with any language of course.
PPS. All these example are of course my personal taste, you are free to configure code highlights the way you want.