Skip to content

Instantly share code, notes, and snippets.

@rstacruz
Last active November 11, 2020 09:00
Show Gist options
  • Save rstacruz/a2361d000a88e49472c4419116edaccf to your computer and use it in GitHub Desktop.
Save rstacruz/a2361d000a88e49472c4419116edaccf to your computer and use it in GitHub Desktop.
Prettier-eslint on Spacemacs

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.

@dantheobserver
Copy link

dantheobserver commented Feb 20, 2019

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

@groovy9
Copy link

groovy9 commented Feb 23, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment