improve javascript mode

modules/init-ivy.el

@@ -29,6 +29,14 @@
   (ivy-set-display-transformer 'ivy-switch-buffer
                                'ivy-rich-switch-buffer-transformer))
 
+;; hydra
+(use-package hydra
+  :pin "MELPA"
+  :config (hydra-add-font-lock))
+
+(use-package ivy-hydra
+  :pin "MELPA")
+
 (use-package swiper
   :after ivy
   :bind (("C-s" . swiper)

modules/init-js-two.el

@@ -7,34 +7,28 @@
 ;; js2-mode: enhanced JavaScript editing mode
 ;; https://github.com/mooz/js2-mode
 (use-package js2-mode
-  :mode (("\\.js$" . js2-mode))
+  :ensure t
+  :defer 20
   :hook ((js2-mode . (lambda ()
                        (flycheck-mode)
                        (company-mode))))
-  :config
-  ;; have 4 space indentation by default
-  (setq js-indent-level 2
-        js2-basic-offset 2
-        js-chain-indent t)
-
+  :mode (("\\.js\\'" . js2-mode))
+  :custom
+  (js2-include-node-externs t)
+  (js2-global-externs '("customElements"))
+  (js2-highlight-level 3)
+  (js2r-prefer-let-over-var t)
+  (js2r-prefered-quote-type 2)
+  (js-indent-align-list-continuation t)
+  (global-auto-highlight-symbol-mode t)
   ;; use eslint_d insetad of eslint for faster linting
-  (setq flycheck-javascript-eslint-executable "eslint_d")
-
-  ;; Try to highlight most ECMA built-ins
-  (setq js2-highlight-level 3)
-
-  ;; turn off all warnings in js2-mode
-  (setq js2-mode-show-parse-errors t)
-  (setq js2-mode-show-strict-warnings nil)
-  (setq js2-strict-missing-semi-warning nil))
-
-;; hydra
-(use-package hydra
-  :pin "MELPA"
-  :config (hydra-add-font-lock))
-
-(use-package ivy-hydra
-  :pin "MELPA")
+  (flycheck-javascript-eslint-executable "eslint_d")
+  :config
+  (setq js-indent-level 2)
+  ;; patch in basic private field support
+  (advice-add #'js2-identifier-start-p
+              :after-until
+              (lambda (c) (eq c ?#))))
 
 ;; js2-refactor: refactoring options for emacs
 ;; https://github.com/magnars/js2-refactor.el
@@ -87,54 +81,25 @@
     ("k" js2r-kill)
     ("q" nil)))
 
-;; json-snatcher: get the path of any JSON element easily
-;; https://github.com/Sterlingg/json-snatcher
-(use-package json-snatcher
-  :hook ((json-mode . js-mode-bindings))
-  :config
-  (defun js-mode-bindings ()
-    "Sets a hotkey for using the json-snatcher plugin"
-    (when (string-match  "\\.json$" (buffer-name))
-      (local-set-key (kbd "C-c C-g") 'jsons-print-path))))
-
 ;; json-mode: Major mode for editing JSON files with emacs
 ;; https://github.com/joshwnj/json-mode
 (use-package json-mode
+  :ensure t
+  :defer 20
+  :custom
+  (json-reformat:indent-width 2)
+  (json-reformat:pretty-string? t)
+  (js-indent-level 2)
   :mode "\\.js\\(?:on\\|[hl]int\\(rc\\)?\\)\\'"
-  :config
-  (add-hook 'json-mode-hook #'prettier-js-mode)
-  (setq json-reformat:indent-width 2)
-  (setq json-reformat:pretty-string? t)
-  (setq js-indent-level 2))
+  :hook (json-mode-hook . prettier-js-mode)
+  :bind (:package json-mode-map
+         :map json-mode-map
+         ("C-c <tab>" . json-mode-beautify)))
 
 ;; eslintd-fix: Emacs minor-mode to automatically fix javascript with eslint_d.
 ;; https://github.com/aaronjensen/eslintd-fix/tree/master
 (use-package eslintd-fix)
 
-;; rjsx-mode: A React JSX major mode for Emacs
-;; https://github.com/felipeochoa/rjsx-mode
-(use-package rjsx-mode
-  :after js2-mode
-  :mode (("\\.jsx$" . rjsx-mode)
-         ("components/.+\\.js$" . rjsx-mode))
-  :hook (rjsx-mode . (lambda ()
-                       (flycheck-mode)
-                       (company-mode)
-                       (js2-refactor-mode -1)))
-  :init
-  (defun +javascript-jsx-file-p ()
-    "Detect React or preact imports early in the file."
-    (and buffer-file-name
-         (string= (file-name-extension buffer-file-name) "js")
-         (re-search-forward "\\(^\\s-*import +React\\|\\( from \\|require(\\)[\"']p?react\\)"
-                            magic-mode-regexp-match-limit t)
-         (progn (goto-char (match-beginning 1))
-                (not (when (and (require 'smartparens nil t)
-                                (fboundp  sp-point-in-string-or-comment))
-                       )))))
-  (add-to-list 'magic-mode-alist '(+javascript-jsx-file-p . rjsx-mode))
-  :config (unbind-key "C-c C-l" rjsx-mode-map))
-
 (provide 'init-js-two)
 ;; Local Variables:
 ;; byte-compile-warnings: (not free-vars)