How to set this up?
awitherow opened this issue · comments
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!
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! 🍻 😄
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!
@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 🙇
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.
)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 👍
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!