How to set this up?

[awitherow]

I am a total emacs noob and am attempting setup right now.

I have created ~/.emacs which contains

File Edit Options Buffers Tools Emacs-Lisp Help

;; Added by Package.el.  This must come before configurations of
;; installed packages.  Don't delete this line.  If you don't want it,
;; just comment it out by adding a semicolon to the start of the line.
;; You may delete these explanatory comments.
(package-initialize)

;; load packages
(add-to-list 'auto-mode-alist '("\\.jsx?\\'" . js2-jsx-mode))
(add-to-list 'load-path "~/.emacs.d/lisp/")

;; prettier config
(require 'prettier-js)

(setq prettier-js-args '(
  "--trailing-comma" "all"
  "--bracket-spacing" "false"
  ))

;; add hooks
(add-hook 'js2-mode-hook 'prettier-js-mode)

and my ~/.emacs.d/lisp/ directory contains

• prettier-js.el

But it does not do the auto saving when I do C-xs

I have quit and reloaded emacs as well.

Thanks!

[rcoedo]

Replace

(add-hook 'js2-mode-hook 'prettier-js-mode)

with

(add-hook 'js2-jsx-mode-hook 'prettier-js-mode)

Emacs has two different ways of changing its behavior: major modes and minor modes. There can only be one major mode active in one buffer, but there can be many minor modes.

With (add-to-list 'auto-mode-alist '("\\.jsx?\\'" . js2-jsx-mode)) you are telling emacs to load the major mode js2-jsx-mode, which is one of the many major modes used to edit javascript and jsx, whenever you open a buffer with a .js or .jsx file associated to it.

With (add-hook 'js2-jsx-mode-hook 'prettier-js-mode) you are saying: ok, I want to hook the minor mode prettier-js-mode, which is used to reformat your code on save, so it is loaded every time I load js2-jsx-mode.

In your code you were hooking prettier-js-mode to the major mode js2-mode instead, which is another major mode used to edit javascript files, so it wasn't being loaded.

For more info I recommend you this book. Emacs is a quite complex text editor (or IDE?) but once you figure it out, it really makes sense.

I hope this clear things out a bit.

Cheers! 🍻 😄

[awitherow]

Thanks for the succinct explanation!

It still does not be seeming to work unfortunately. I am pretty sure I do not even have any of the packages correctly installed. I am looking into this now and will keep here updated :) and check out the book!

[awitherow]

@rcoedo It was because I had not properly installed the js2 package!

I do not need the jsx mode hook either because I am just using .js files for my react-native views 👍 thanks a bunch for the help 🙇

[awitherow]

My final package looks as such

;; Added by Package.el.  This must come before configurations of
;; installed packages.  Don't delete this line.  If you don't want it,
;; just comment it out by adding a semicolon to the start of the line.
;; You may delete these explanatory comments.
(package-initialize)

;; load packages
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
(add-to-list 'load-path "~/.emacs.d/lisp/")

;; prettier config
(require 'prettier-js)

(setq prettier-js-args '(
  "--trailing-comma" "all"
  "--bracket-spacing" "false"
  ))

;; add hooks
(add-hook 'js2-mode-hook 'prettier-js-mode)

;; custom shit
(custom-set-variables
 ;; custom-set-variables was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 '(package-selected-packages (quote (js2-mode))))
(custom-set-faces
 ;; custom-set-faces was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 )

[rcoedo]

Sorry for the late response, I've been on vacation 😄

If you are having problems organising your packages take a look at cask as a package manager and req-package as a package loader.

If you need an example, here is my configuration using both tools 👍

[awitherow]

No worries, I got it working fine @rcoedo just was posting my example above to show how it was working.

I will check out the resources you sent too 👍 thanks!