Chad Stovern

Javascript Support in Emacs

Two hills I'm prepared to die on are the superiority of modal editing and the near limitless power and customization of Emacs.

While vscode, atom, etc are nice and have decent communities building plugins around them, I'll be configuring emacs to take me on my journey to learn javascript.

There is a built in javascript mode with very basic functionality but we want better highlighting and parsing plus syntax checking. This is where js2-mode comes in: http://elpa.gnu.org/packages/js2-mode.html

I'm going to make two assumptions here:

  1. You already have flycheck installed or will go read about it and set it up yourself.
  2. You are using use-package to manage your package installs and configuration like me, or know how to adapt my examples for your own preferred method.

This snippet will get js2-mode installed and set as the default mode for all .js files you edit. It is also setting some indentation preferences and disabling some built in syntax checking options (we'll be leveraging flycheck and jshint).

;; a better javascript mode
(use-package js2-mode
  :mode "\\.js\\'"
  :config
  (setq js2-mode-show-parse-errors nil
        js2-mode-show-strict-warnings nil
        js2-basic-offset 2
        js-indent-level 2)
  (electric-pair-mode 1))

Now we can install jshint for linting / syntax checking purposes.

npm install -g jshint

Followed by creating a global .jshintrc file in our home directory. See a full set of options here: https://github.com/jshint/jshint/blob/master/examples/.jshintrc

{
  "asi"       : true,
  "esversion" : 6
}

We're now ready to start hacking around with javascript code with full syntax checking and highligting.

Better code auto-completion would be nice, but we'll tackle that next time. B-)


Using Paredit With Javascript Modes

I'm a huge fan of Emacs and a huge fan of programming using Clojure. I've been trying to avoid Javascript, but it's reach is everywhere and learning it will definitely help my day job efforts helping teams create cloud native applications.

One hurdle I faced in setting up Emacs for Javascript development was paredit inserting a space before opening parens in Javascript and JSON modes; leaving me with things like console.log ("foo") rather than console.log("foo") as I merily typed along.

Even though non-lisps don't lend themselves to structural editing the way lisps do, I still like being able to wrap and manipulate parens, braces, quotations, etc with paredit—so I did not want to disable paredit in these modes.

Here is the quick fix I am using from my emacs configuration:

;; prevent paredit from adding a space before opening paren in certain modes
(defun cs/mode-space-delimiter-p (endp delimiter)
  "Don't insert a space before delimiters in certain modes"
  (or
   (bound-and-true-p js2-mode)
   (bound-and-true-p js-mode)
   (bound-and-true-p javascript-mode)))
(add-to-list 'paredit-space-for-delimiter-predicates #'cs/mode-space-delimiter-p))

Happy hacking; and until next time…

“If you think paredit is not for you then you need to become the kind of person that paredit is for.”


Emacs is a Way of Life

Emacs is an operating system.

Emacs has a never-ending learning curve.

Emacs is a way of life.

All of these things are both a joke and largely true. As a die hard Vim fan, I never thought I'd fall into such enthusiastic use of Emacs, yet I have and don't want to look back.

I started down this path because of my interest in learning Common Lisp and then Clojure. The Emacs tooling for lisps is superb and once I learned you could configure text editing in Emacs to behave identically to Vim, I set out on my spirit quest.

With multiple years under my belt using, configuring, and solving my problems with Emacs, I'd like to start sharing some of these tips, tricks, and use cases. In the meantime I invite anyone to skim through my living literate config below.

Chad's Literate Emacs Configuration

Happy hacking!

Learning Curve for Emacs


Clojure in Atom

Since I just recently made a getting started with Clojure in Sublime Text video, I decided to also make a video showing how to get started with Clojure in Github's Atom. I hope you enjoy it as well.

Clojure in Atom