Emacs and JavaScript in 2017

About an year ago, when it became clear that sooner or later I'll have to write ES6 code, I decided to give js2-mode another look (wow, how time flies!)

Steve Yegge no longer seems to maintain this majestic creation, but as it often happens in the open-source world, quality code finds new home and maintainers. The official fork today is located at https://github.com/mooz/js2-mode, and it's what you get if you install it from Melpa. However, I live on my own fork where I fix bugs as I find them. Eventually, my fixes get merged into the official repo.

On top of js2-mode, Magnar Sveen of emacsrocks.com fame wrote js2-refactor, a collection of tools for working on JavaScript code. It brings new powers at your fingertips — for example, you can select a piece of code and turn it into a function; it figures out what are the variables needed by that piece of code, and turns them into arguments of the new function; and replaces that piece of code with a call to the new function, which is inserted just outside the current function. All that happens in a split second — an operation that would take many seconds to do manually. If you edit JavaScript, and use Emacs, make sure to check js2-refactor.

Before switching to js2-mode + js2-refactor, I had some utilities for editing JS that worked with an external parser (based on UglifyJS). I have ported these tools on top of js2-mode and js2-refactor, so we don't need to call an external parser, and we get support for ES6. I wanted to briefly cover it in this post, and perhaps if more people are interested I will submit a pull request to js2-refactor.

js2r-highlights.el

These tools live in my fork of js2-refactor, on branch highlights. It could have been a separated package (maybe it will, someday), but it was more convenient for me to work on the same codebase as js2-refactor, as I found several bugs (fixes already merged into the official repo).

If you load js2-refactor from that branch, the following utilities are available:

Keybindings

No keybindings are defined by default. My own preference is opinionated and based on years of usage and muscle memory — here's what I use, in my own Emacs config:

(define-key js2-refactor-mode-map (kbd "M-?") 'js2r-highlight-thing-at-point)
(define-key js2-refactor-mode-map (kbd "C-c f") 'js2r-highlight-free-vars)
(define-key js2-refactor-mode-map (kbd "C-c C-f") 'js2r-highlight-free-vars)
(define-key js2-refactor-mode-map (kbd "C-c C-x") 'js2r-highlight-exits)

However, when highlights are on, a minor mode will be active which does define a bunch of key bindings:

(,(kbd "C-<down>") . js2r-highlight-move-next)
(,(kbd "C-<up>") . js2r-highlight-move-prev)
(,(kbd "C-<return>") . js2r-highlight-rename)
(,(kbd "<escape>") . js2r-highlight-forgetit)
(,(kbd "C-g") . js2r-highlight-forgetit)

So, you can use Ctrl-Up and Ctrl-Down to jump to the previous or next highlighted area, Ctrl-Enter to rename variables (note this only makes sense if the mode was entered with js2r-highlight-thing-at-point), and Ctrl-G or Esc to quit this minor mode and remove the highlights.

Conclusion

Emacs rocks. Steve rocks. Magnar rocks. Mooz rocks. And if you find my little highlights mode useful, means I rock a little too, so please drop me a line. ;-)

Footnotes
1. Subject for another post: rant against objects and methods, praise functions and downward funargs.
One comment. ONE! Gimme some more!

Add your comment

# anonymous
2018-02-02 13:48
Wow, I've been using js2-mode with tern, which is nice, but has an external dependency. I love the idea of highlighting free variables, can't believe no editor does that today! This looks amazing, I'm giving it a try. :)
Dec
10
2017

Emacs and JavaScript in 2017

  • Published: 2017-12-10
  • Modified: 2018-05-28 02:12
  • By: Mishoo
  • Tags: javascript, emacs, es6, js2-mode
  • Comments: 1 (add)