Categories: Portfolio, Software Development

Emacs Mode for Flow Type Annotations and React JSX syntax

Emacs Flow JSX: 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.

Here are some examples over the years of tools I’ve built with Emacs Lisp to help me in my daily work:

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.

Categories: Software Development

Emacs angularjs-mode v1.0 release!

I’ve finally had some time to upgrade Emacs angularjs-mode with some expandable code snippets (thanks to YA Snippets) and added auto-complete mode dictionaries.

What I’ve found a pain when coding AngularJS is that you really need your environment setup well for it before you can get a lot done with it. Having angularjs’s javascript files installed, a basic index.html, a Gruntfile, a Karma and Protractor configuration saves a lot of time. But even with a basic project structure, you still need to be faster when writing new controllers, directives and services. Auto-complete-mode and snippets can help with that.

All of the top-level definitions in the AngularJS API are included in the auto-complete dictionaries. The dictionary for angular-html-mode contains all the common directives.

Use Emacs angularjs-mode for faster angularjs coding! Now with 100% more auto-complete and snippets!

org-doing

org-doing

Inspired by the doing command line app for logging progress on to-do items and tasks, I decided this would be a neat feature to add to Emacs. The org-doing add-on lets you track what you are doing now, what you want to do later, and anything you have made progress on or completed.

It is an add-on for Emacs that hooks into org-mode. This means that, with timestamps, you can create an org-mode agenda-view that displays the tasks you have done in the last day and the tasks you have remaining to do. From there, you can add more notes or clock in the time or do whatever else you can do with org-mode.

The idea is to keep a worklog and notes for each task as you are completing them or making progress on them with just a few keyboard shortcuts.

Feel free to check out the code or the site.

Categories: Software Development

Dimming JavaScript curly braces and brackets in Emacs

When coding in Lisp or Scheme, some Emacs users prefer to have the parenthesis/brackets dimmed. The reason for this is that it makes it easier to see the things that matter like variable names.


If you are looking for a JavaScript mode for Emacs, please check out the following projects:


I’ve been coding more JavaScript lately and wondered if this would work for JS and indeed it does. While it doesn’t turn JS into CoffeeScript and you still have to type in in the brackets and curly braces and semi-colons, it does let you adjust the colour of them and let’s you dim them so that you can see the important parts.

Download parenface.el and then paste in the following snippet and you’re good to go. Don’t forget to customize the paren-face colour by doing this: M-x customize-group faces

https://gist.github.com/omouse/9394679

Here’s a before and after shot (I’m using snow3 as the paren-face colour, the default provided by parenface.el is DimGray):

before and after enabling parenface for js-mode
before and after enabling parenface for js-mode

I’m not sure how useful it is to hide the ‘var’ and ‘function’ keywords. The cool thing is that all you have to do is alter the regex to suit your preferences.

If you like these kinds of snippets, check out Emacs-SOS, a StackOverflow search for emacs.

StackOverflow Search (SOS) mode for Emacs

Emacs Stack overflow: StackOverflow Search (SOS) mode for Emacs

I was reading about a PhD student who created a plugin for an IDE that integrates searching for questions & answers on a knowledge base that included an easy way to insert code snippets from the answers in their own source code.

I use stackoverflow as often as I can and try to contribute answers but sometimes I have questions of my own so it would be nice if there were a quick, integrated way of using StackOverflow from within Emacs.

Type in M-x sos and then type in your search and the results are listed using org-mode. Eventually I want to be able to ask questions from within emacs and allow question buffers to be opened that are refreshed once in a while to see if there’s an answer yet.

Emacs Stack overflow SOS mode
Emacs StackOverflow SOS Mode

Update July 2017: Extending Emacs and creating plugins for it to increase productivity is something I enjoy doing because the pay-off can be immense over time. I’ve done this for running PHPUnit unit tests from within Emacs, highlighting AngularJS JavaScript code with Emacs, and highlighting Flow type annotations with React.js’s JSX syntax.

Categories: Software Development

some code for running PHPunit in Emacs

I’m working on a legacy PHP app for a client and up until today I was running unit tests in a terminal window. But my natural working enviornment is Emacs so why not write something that will execute the unit tests and display the results in an Emacs buffer?

The following is the result; it’s fairly short but oh so useful.

[gist 8981483]

The client’s PHP app has been around for 2 years and I was the first one to write any sort of unit tests and to get the unit test infrastructure working. The difference in code quality is huge. There’s nothing like a legacy app with lots of bugs to show you just how important unit testing and regression testing are to maintaining a sane code base!

Click here to read my book review of PHPUnit Essentials.

For all projects where I use Emacs (I do use other IDEs like Intellij and Eclipse), I always try to write functionality in Emacs that improves my productivity. This is just one example. Another example is running the linting tools and deploying code to a remote server.