loading...
Cover image for Quick Tip: Modern Arrows in your Editor

Quick Tip: Modern Arrows in your Editor

integerman profile image Matt Eland Originally published at killalldefects.com on ・2 min read

Let me show you a new trick I learned over the weekend. Languages like JavaScript, TypeScript, C#, and others offer similar syntax for their operators. With the use of font ligatures, you can represent these languages features in a mono-spaced, yet modern format intended for programmers.


Since a picture is worth at least 42 words, take a look at the following code:

    public double SquirrelPriority => GetGene(Genes.ActorGeneIndex.Squirrel);
    public double DoggoPriority => GetGene(Genes.ActorGeneIndex.Doggo);
    public double RabbitPriority => GetGene(Genes.ActorGeneIndex.Rabbit);
    public double AcornPriority => GetGene(Genes.ActorGeneIndex.Acorn);
    public double TreePriority => GetGene(Genes.ActorGeneIndex.Tree);
    public double RandomPriority => GetGene(Genes.ActorGeneIndex.Random);

Notice the use of the => operator for arrow functions? Now take a look at how this renders in my development environment (Visual Studio 2019):

See how the arrow functions now literally appear as arrows? This little bit of extra flair is a delighter that reinforces the use of these modern operators.

This isn’t just limited to arrow functions, however. Take a look at these other operators:

This is >=, <=, ++, ==, ===, !=, !==, .., ..., ||, >>, <<, |>, and <| respectively – it gets hard to tell on the pipe operators at the end.

What I love about this in particular is how the equality statements render. In JavaScript in particular, this helps you quickly spot the difference between == and === which can be the difference between spotting a bug and missing it.


So, how do you get started with this?

First, install the Fira Code font by downloading and installing a font from its GitHub repository. You should be fine to only install the regular variant, but you could install the others if you wanted.

Next, open your favorite editor’s font dialog and change your font to Fira Code.

Finally, close the editor and restart it. This will ensure that the ligatures I described above are enabled. This may not be necessary in all development environments, but it is in Visual Studio.


And that’s it! You should be good to go.

Hopefully this modern take on our language features delights you as much as it does me. Personally, the added degree of polish makes me feel just a bit more awesome and capable.

Let me know what you think or what other techniques you use to stay awesome and productive in your editor of choice.

The post Quick Tip: Modern Arrows in your Editor appeared first on Kill All Defects.

Discussion

pic
Editor guide
Collapse
mateiadrielrafael profile image
Matei Adriel

How do u edit those? Like, how do for example delete the first half of <=? If it looks like i char can u put ur cursor between them?

Collapse
moopet profile image
Ben Sinclair

In most editors you can't - you have to put your cursor at the start and delete-forward or at the end and delete backwards. Good luck if you use a Mac.

There are some tools, like there's a Vim plugin that separates out ligatures when you focus them iirc, but that's just as messy and makes things jump around.

Collapse
nstubbe profile image
Niels Stubbe

They're still separate characters and act like it. Only difference is how it looks.

Collapse
donnisnoni profile image
Don Alfons Nisnoni

Like this ?? BTW I'm using Operator Mono Lig

Collapse
integerman profile image
Collapse
integerman profile image
Matt Eland Author

To anyone using VS Code, you have to also enable ligatures. Take a look at github.com/tonsky/FiraCode/wiki/VS... for more details.