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.

I've found that doing this causes various bugs, mainly blanking out entire files or only partially saving formatted files, so pieces of the code are gutted. I've noticed this may be due to the command passing the file in via the --stdin flag. When passing it entirely via a custom function, it works, though is slower, while piping it in via stdin to prettier-eslint_d, which seems to be what the prettier-js-command does, it causes these issues. I'm on OSX

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