Emacs - Highlight $FlowFixMe comments in JavaScript

Learn how to setup conditional highlighting for Emacs by writing emacs-lisp to highlight $FlowFixMe

thumbnail for Emacs - Highlight $FlowFixMe comments in JavaScript

I've been working with Flow a lot since joining Webflow and one of the things that I constantly miss is the // $FlowFixMe comments. I decided to highlight // $FlowFixMe comments in red so they stood out.

Emacs makes it trivial to add configuration to highlight specific lines based on certain criteria. In init.el or any file that you load configuration through, you can add the following:

  (defface flow-fix-me-comment '((t (:foreground "#ff0000"))) "Red")

   'js-mode '(("// $FlowFixMe" 0 'flow-fix-me-comment t)))

Breaking it down:

  • defface allows us to declare a customizable FACE (you can think of FACE as a style). We're naming it flow-fix-me-comment
  • font-lock-add-keywords allows us to highlight a mode based on a specific keyword.
  • 'js-mode is the mode we want to highlight on.
  • "// $FlowFixMe" is the term we want to use as the criteria for highlighting.
  • If the term matches the line, apply the flow-fix-me-comment FACE.

Make sure to eval-buffer on the snippet, reload your config or restart Emacs to see the changes take place.

The end result will look like this:

Use Emacs to highlight $FlowFixMe in Javascript

If you're using Emacs to develop for JavaScript and using Flow in your projects, this is a great way to make sure you don't get burnt by any $FlowFixMe comments during development!

Was this page helpful?

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.