Quick Tip: Modern Arrows in your Editor
Tags: javascript, csharp, typescript
Published: 2019-11-13 01:52:38

---
title: Quick Tip: Modern Arrows in your Editor
published: true
date: 2019-11-13 01:36:06 UTC
tags: javascript, csharp, meta, typescript
cover_image: https://i0.wp.com/killalldefects.com/wp-content/uploads/2019/11/image-40.png?fit=768%2C352&ssl=1
canonical_url: https://killalldefects.com/2019/11/12/quick-tip-modern-arrows-in-your-editor/
---

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:

```cs
    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):

![](https://i0.wp.com/killalldefects.com/wp-content/uploads/2019/11/image-40.png?fit=770%2C353&ssl=1)

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:

![](https://i1.wp.com/killalldefects.com/wp-content/uploads/2019/11/image-42.png?w=770&ssl=1)

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](https://github.com/tonsky/FiraCode/tree/master/distr/ttf). 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.

![](https://i2.wp.com/killalldefects.com/wp-content/uploads/2019/11/image-44.png?w=770&ssl=1)

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](https://killalldefects.com/2019/11/12/quick-tip-modern-arrows-in-your-editor/) appeared first on [Kill All Defects](https://killalldefects.com).