How to Integrate prettier-js.el into spacemacs

Question

I'm trying to get prettier working in spacemacs.

I have (prettier-js :location (recipe :url "https://raw.githubusercontent.com/prettier/prettier/master/editors/emacs/prettier-js.el" :fetcher url)) which is somewhat working, but then in Messages I see

Contacting host: raw.githubusercontent.com:443
Wrote /Users/travis/.emacs.d/.cache/quelpa/build/prettier-js/prettier-js.el
File: /Users/travis/.emacs.d/.cache/quelpa/build/prettier-js/prettier-js.stamp
Error getting PACKAGE-DESC: (search-failed ;;; prettier-js.el ends here)
Cannot load prettier-js

I don't know enough emacs yet to know know what a PACKAGE-DESC does, or if I need it to get prettier to load.

I'm trying to do this in a private layer

The docs say:

Add this to your init

(require 'prettier-js)
(add-hook 'js-mode-hook
          (lambda ()
            (add-hook 'before-save-hook 'prettier-before-save)))

I think I should have something like:

(defun myJS/post-init-prettier-js ()
  "Initialize prettier-js"
  (use-package prettier-js)
  :defer t
  :init
  (progn
    (add-hook 'before-save-hook 'prettier-before-save)
    )
  )

in my layer

Answer 1

There are a few steps that we need to perform in order to activate prettier in Spacemacs:

---

1. Install prettier integration in Spacemacs:

• <SPC> <SPC> (press the spacebar key twice), this will trigger HELM allowing us to search for Emacs commands.

• After pressing <SPC> <SPC>, type package-install in the HELM buffer and press <RET> (the Return/Enter key).

• A list of packages will appear inside the HELM Package Install buffer, type prettier-js in it and press <RET>.

---

2. Install prettier in your system:

• The integration doesn't do anything without prettier itself.

• Assuming you already have node and npm installed, go to your terminal and type: npm install -g prettier and press enter.

---

3. (Optional) Setup automatic format on save:

• Open your .spacemacs config file by pressing <SPC> <f> <e> <d>.

• Find the dotspacemacs/user-config section of it and type the following snippet inside of it:

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

• Save the settings' change by pressing <SPC> <f> <s>

• Reload the saved settings by pressing <SPC> <f> <e> <R>

Answer 2

As of the commit 9d2a108 Spacemacs comes with a layer that adds support for Prettier. You can use it today if you're using the develop branch of Spacemacs or if you're reading this in the future and are using version 0.300 or something more recent.

To use it simply add prettier as a layer in the list of layers specified by dotspacemacs-configuration-layers. Additionally you should enable Prettier as a formatter for the layers for the languages in which you want to use Prettier. How to do this is documented in the specific layers. For JavaScript you should add the following to your dotspacemacs/user-init.

(setq javascript-fmt-tool 'prettier)

With the above configuration the JavaScript layer will user Prettier to format JavaScript files.

Answer 3

The prettier-js package is now on melpa to install it add prettier-js to dotspacemacs-additional-packages in your spacemacs file.