Emacs Mode for Flow Type Annotations and React JSX syntax

2 min read

While I have been focusing on writing more about existing tools and how to use them, like Elm for frontend web development and Perl 6 just for fun, I still find a need to create new tools and update my own toolkit.

I’m working on a React project and it uses fancy new ES6 syntax in JavaScript and it also uses the Flow type checker. The first thing I noticed in Emacs, my text editor, was that the syntax highlighting was broken in strange ways whenever I opened up a JavaScript file that had type annotations or JSX in it. I asked on reddit for a solution to this problem and people pointed me to existing modes that kinda sorta did what I want.

So I decided to try and create a new syntax highlighting mode from scratch. This allows me to use the mode as a base for more interesting functionality; especially when I need to customize things for the React project I’m working on.

You can check it out here: https://github.com/omouse/emacs-flow-jsx

The #1 Reason to Use Emacs

This is the main reason I use Emacs. It lets me create new tools and update my tools to match the projects that I’m working on. I’ve done this over the years and it’s always been the one thing that keeps me coming back to Emacs. I have tried other IDEs and text editors and they do have their own conveniences but they just don’t have the power that Emacs has. Being able to define your own functions to automate repetitive tasks is great. Being able to define your own functions that turn a complex task into a simple task is even better.

Some other examples of functions I’ve written in Emacs Lisp to make it easier to work on a project:

  • Functions for jumping to the definition of a function or class
  • A function for opening the test/spec file of a class
  • Some functions to run a whole test suite on a virtual machine through SSH, and to run particular tests from the point I’m at in a file

All of these were customized for each project because each project has its own standards. Jumping to the definition of a class that’s written by your co-workers is different from jumping to the definition of a class that you’ve downloaded as part of another package (for example, searching through “lib/” rather than “node_modules/”).

If you decide to pick up Emacs and learn to use it, you’re going to be extra productive over the years, any initial hurdles you encounter will be worthwhile because your peak productivity will be higher than others in the long-term and that’s the #1 reason I keep using Emacs.

Comments are Closed