Support searching node_modules/.bin

Adds a package that allows Emacs to searching through a projects
node_modules executables when resolving a binary like eslint, prettier
etc. This was being hacked together before by relying on explicit paths
to executables. This is a more durable solution.

Also includes some packages related to LSP for Javascript, which I
haven't been able to get working yet.

1 files changed, 44 insertions, 37 deletions

diff --git a/emacs.d/wpc/packages/wpc-javascript.el b/emacs.d/wpc/packages/wpc-javascript.el
index 5dcd5937b11d..431d318854a9 100644
--- a/emacs.d/wpc/packages/wpc-javascript.el
+++ b/emacs.d/wpc/packages/wpc-javascript.el
@@ -1,4 +1,4 @@
-;;; javascript.el --- My Javascript preferences -*- lexical-binding: t -*-
+;;; wpc-javascript.el --- My Javascript preferences -*- lexical-binding: t -*-
 ;; Author: William Carroll <wpcarro@gmail.com>
 
 ;;; Commentary:
@@ -6,11 +6,17 @@
 
 ;;; Code:
 
-;; Helper functions
-(defun wpc/indium-setup (url)
-  "Setup the indium environment using URL."
-  (indium-eval (format "window.dispatchEvent(new CustomEvent('patch', {detail: {url: %s}}" url)))
+;; Constants
+(defconst wpc/js-hooks
+  '(js-mode-hook js2-mode-hook rjsx-mode)
+  "All of the commonly used hooks for Javascript buffers.")
+
+(defconst wpc/frontend-hooks
+  (-insert-at 0 'css-mode-hook wpc/js-hooks)
+  "All of the commonly user hooks for frontend development.")
 
+
+;; Helper functions
 (defun wpc/insert-flow-annotation ()
   "Insert a flow type annotation to the beginning of a buffer."
   (interactive)
@@ -18,15 +24,15 @@
     (goto-char (point-min))
     (insert "// @flow\n")))
 
+;; frontend indentation settings
+(setq js-indent-level 2
+      css-indent-offset 2)
+
 ;; ;; javascript
 ;; (evil-leader/set-key-for-mode 'rjsx-mode "t" #'wpc/toggle-between-js-test-and-module)
 ;; (evil-leader/set-key-for-mode 'rjsx-mode "x" #'wpc/toggle-between-js-component-and-store)
 ;; (evil-leader/set-key-for-mode 'rjsx-mode "u" #'wpc/jump-to-parent-file)
 
-;; javascript setup
-(use-package indium
-  :hook (indium-update-script-source . wpc/indium-setup))
-
 ;; javascript text objects
 (quelpa '(evil-text-objects-javascript
           :fetcher github
@@ -40,35 +46,21 @@
   :config
   (evil-leader/set-key-for-mode 'rjsx-mode "F" #'wpc/insert-flow-annotation))
 
-(use-package company-flow
-  :after (company)
-  :hook (rjsx-mode . wpc/set-flow-executable)
-  :config
-  (add-to-list 'company-flow-modes 'rjsx-mode)
-  (add-to-list 'company-backends 'company-flow))
-
-(use-package flycheck-flow
-  :after (flycheck)
-  :config
-  (flycheck-add-mode 'javascript-flow 'rjsx-mode)
-  (flycheck-add-mode 'javascript-flow 'flow-minor-mode)
-  (flycheck-add-mode 'javascript-eslint 'flow-minor-mode)
-  (flycheck-add-next-checker 'javascript-flow 'javascript-eslint))
-
-;; front-end indentation
-(setq js-indent-level 2
-      css-indent-offset 2)
+;; Shouldn't need this once LSP is setup properly
+;; (use-package company-flow
+;;   :after (company)
+;;   :config
+;;   (add-to-list 'company-flow-modes 'rjsx-mode)
+;;   (add-to-list 'company-backends 'company-flow))
 
-;; eslint integration with flycheck
-(setq flycheck-javascript-eslint-executable "~/urbint/grid-front-end/node_modules/.bin/eslint")
-
-;; JS autoformatting
-(use-package prettier-js
-  :after (rjsx-mode)
-  :ghook ('(rjsx-mode-hook
-            js2-mode-hook
-            json-mode-hook
-            css-mode-hook)))
+;; Shouldn't need this once LSP is setup properly
+;; (use-package flycheck-flow
+;;   :after (flycheck)
+;;   :config
+;;   (flycheck-add-mode 'javascript-flow 'rjsx-mode)
+;;   (flycheck-add-mode 'javascript-flow 'flow-minor-mode)
+;;   (flycheck-add-mode 'javascript-eslint 'flow-minor-mode)
+;;   (flycheck-add-next-checker 'javascript-flow 'javascript-eslint))
 
 ;; JSX highlighting
 (use-package rjsx-mode
@@ -83,5 +75,20 @@
   (setq js2-mode-show-parse-errors nil
         js2-mode-show-strict-warnings nil))
 
+;; JS autoformatting
+(use-package prettier-js
+  :after (rjsx-mode)
+  :config
+  (general-add-hook wpc/frontend-hooks #'prettier-js-mode))
+
+(use-package add-node-modules-path
+  :config
+  (general-add-hook wpc/js-hooks #'add-node-modules-path))
+
+;; LSP support
+(use-package lsp-javascript-flow
+  :config
+  (general-add-hook wpc/js-hooks #'lsp-javascript-flow-enable))
+
 (provide 'wpc-javascript)
 ;;; wpc-javascript.el ends here