Prettier-eslint on Spacemacs

README.md

Setting up automatic Eslint formatting on Spacemacs

Note: This assumes that your project already has a working eslint setup!

Step 1: add prettier-eslint_d

prettier-eslint_d is a "daemon" versions of prettier and eslint. They are faster frontends to prettier and eslint, great for editors. Add it to your project via Yarn:

# prettier-eslint_d are replacements for these packages; if you have them,
# remove them.
yarn remove prettier eslint prettier_d eslint_d prettier-eslint-cli

# Add prettier-eslint_d:
yarn add --dev prettier-eslint_d

Step 2: Enable node-add-modules-path in Spacemacs

In Spacemacs, edit your config (SPC f e d), and add javascript to your layers. Also set its variable node-add-modules-path to t.

dotspacemacs-configuration-layers
'(
  (javascript :variables
    node-add-modules-path t)
  ...
)

Step 3: add prettier-js to dotspacemacs additional packages

dotspacemacs-additional-packages '(
  prettier-js
)

Step 4: configure web-mode

Add these lines to your dotspacemacs/user-config. See prettier/prettier-emacs.

(defun dotspacemacs/user-config ()

  (eval-after-load 'web-mode
      '(progn
         (add-hook 'web-mode-hook #'add-node-modules-path)))

  (require 'prettier-js)
  (setq prettier-js-command "prettier-eslint_d")

Step 5: try it out!

Restart Emacs. Open a JavaScript file in that project. Format the file via SPC SPC prettier-js.

You can also enable prettier-js mode in a file using SPC SPC prettier-js-mode. This enables auto-formatting of files on save.

How would I go about running prettier every time the buffer changes (e.g. when leaving Evil insert mode), rather than upon saving?