Add Javascript config

config.org

@@ -366,6 +366,76 @@ needs to be set up to install them if they aren't already.
      (use-package yaml-mode)
    #+end_src
 
+** Javascript
+   The first bit of this setup (=js2-mode=, =js2-refactor= and
+   =xref-js2=) is essentially copied from [[https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html][this Emacs cafe post]].
+
+   First of all we want to grab =js2-mode= and enable it for
+   javascript buffers. It extends the default =js-mode= and builds an
+   AST which can be used by other packages.
+
+   #+begin_src emacs-lisp
+     (use-package js2-mode)
+     (add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
+   #+end_src
+
+
+*** Refactoring
+    =js2-refactor= provides refactoring tools based of said AST, so
+    enable that and its keybindings:
+
+    #+begin_src emacs-lisp
+      (use-package js2-refactor)
+      (add-hook 'js2-mode-hook #'js2-refactor-mode)
+      (js2r-add-keybindings-with-prefix "C-c C-r")
+    #+end_src
+
+    It provides a kill function with nice semantics for Javascript --
+    we definitely want that instead of the generic kill.
+
+    #+begin_src emacs-lisp
+      (define-key js2-mode-map (kbd "C-k") #'js2r-kill)
+    #+end_src
+
+*** Find references / jump to definition
+    Then we get to =xref-js2=, which adds stuff for jumping to
+    references and definitions (uses the =ag= tool, so that must be
+    installed in the environment):
+
+    #+begin_src emacs-lisp
+      (use-package xref-js2)
+    #+end_src
+
+    =js-mode= binds =M-.=, which conflicts with =xref-js2= so we need to unbind that:
+
+    #+begin_src emacs-lisp
+      (define-key js-mode-map (kbd "M-.") nil)
+    #+end_src
+
+    And hook it up to =js2-mode=:
+
+    #+begin_src emacs-lisp
+      (add-hook 'js2-mode-hook (lambda ()
+        (add-hook 'xref-backend-functions #'xref-js2-xref-backend nil t)))
+    #+end_src
+
+*** Using local tools from NPM
+    To use tools locally by NPM, there is =add-node-modules-path=:
+
+    #+begin_src emacs-lisp
+      (use-package add-node-modules-path)
+      (eval-after-load 'js2-mode
+        '(add-hook 'js2-mode-hook #'add-node-modules-path))
+    #+end_src
+
+*** Autoformatting
+    [[https://prettier.io/][Prettier]] seems low-effort to set up :D
+
+    #+begin_src emacs-lisp
+      (use-package prettier-js)
+      (add-hook 'js2-mode-hook 'prettier-js-mode)
+    #+end_src
+
 * Desktop
 ** EXWM
    One must fulfil the meme of doing everything with Emacs... still