SpaceMacs For Modern JavaScript Development

In an effort to challenge myself a bit, I've decided to take a look at using SpaceMacs as my daily text editor. In a world where VSCode currently reigns supreme, it seems almost crazy to think that a decades-old editor could stand up to the challenge of today's development toolset. VSCode has outstanding support for almost anything you can imagine, so popular tools like TypeScript, ESLint, and Prettier are almost guaranteed to work out of the box. I was determined to see if I could make SpaceMacs even half as pleasant to develop in as VSCode, hoping I could experience the joys of modal editing without giving up too much of the tooling I'd come to know and love.

SpaceMacs is a distribution of Emacs designed to be more vim-like in operation. Emacs isn't a modal editor by default, so SpaceMacs takes great care to adopt modality from Vim. This just means that you're always in a particular "mode" of editing and can switch between different modes using key commands. Emacs is also highly configurable, so SpaceMacs uses a crowdsourced approach to configuration so that sane defaults and keybindings come out of the box. Installing SpaceMacs is straight-forward, but below I'll be detailing how to set it up to be a first-class JavaScript development environment.

Starting With JavaScript

SpaceMacs doesn't support JavaScript (or anything really) out of the box. Adding support for a language is usually done by adding what's called a "layer" to your installation, so the first thing will be to install the JavaScript layer. If you just open up a file with a .js extension, SpaceMacs will prompt you to install the layer. You can also add it to the ~/.spacemacs config manually in the dotspacemacs-configuration-layers section. Here's what that section looks like by default:

   dotspacemacs-configuration-layers
   '(
     ;; ----------------------------------------------------------------
     ;; Example of useful layers you may want to use right away.
     ;; Uncomment some layer names and press <SPC f e R> (Vim style) or
     ;; <M-m f e R> (Emacs style) to install them.
     ;; ----------------------------------------------------------------
     helm
     ;; auto-completion
     ;; better-defaults
     emacs-lisp
     ;; git
     ;; markdown
     ;; org
     ;; (shell :variables
     ;;        shell-default-height 30
     ;;        shell-default-position 'bottom)
     ;; spell-checking
     ;; syntax-checking
     ;; version-control
     )

Don't let the common lisp style scare you! The layers with ;; are commented out, but as you can see SpaceMacs uses the helm and emacs-lisp layers by default. Adding javascript to the list will instruct SpaceMacs to install the JavaScript layer on the next startup. The JavaScript layer can also make use of the auto-completion, and syntax-checking layers so it's good to uncomment and enable those as well. Minus the comments, here's the updated config:

   dotspacemacs-configuration-layers
   '(
     javascript
     helm
     auto-completion
     emacs-lisp
     syntax-checking
     )

After restarting SpaceMacs, there should be syntax highlighting, auto-completion, and syntax-checking enabled for JavaScript files.

Upgrading to TypeScript

Adding TypeScript support is simple thanks to the excellent Tide plugin, which can be added and configured via the TypeScript layer. Opening a .ts file will cause SpaceMacs to prompt you to install the layer. Just say yes and let it go to work! There should now be proper TypeScript support along with helpful output

One problem, there's still no support for .tsx files. In order to get that working, the html layer needs to be enabled in the  ~/.spacemacs file.

   dotspacemacs-configuration-layers
   '(
     html
     javascript
     helm
     auto-completion
     emacs-lisp
     syntax-checking
     )

After another restart, .tsx files should also have appropriate highlighting, autocomplete, and type checking.

Getting Pretty

The final piece of the puzzle will be to get prettier integration. Prettier is a nice JavaScript formatter that really stays out of the way and lets you focus on writing code, not adding spaces and formatting brackets. First it must be installed as a global package for the SpaceMacs plugin to work.

npm install -g prettier

The Prettier SpaceMacs plugin can then be installed through the MELPA package manager, and only requires a few commands to get started.

M-x package-install [RET] prettier-js [RET]

In order to get Prettier to format on save, a few configurations need to be added to the ~/.spacemacs file in the user configuration function

(defun dotspacemacs/user-config ()
  (add-hook 'js2-mode-hook 'prettier-js-mode)
  (add-hook 'web-mode-hook 'prettier-js-mode)
  )

Finally, one more restart, and SpaceMacs is configured to handle some serious JavaScript development. Of course, there are a million ways to configure SpaceMacs and Emacs so I'd encourage adventurous readers to expand upon this to their heart's content. This is only scratching the surface of how enjoyable JavaScript development can be in a 30 year old editor with a vibrant community.

Show Comments