improve javascript mode

custom.el

@@ -9,7 +9,7 @@
  '(anzu-replace-to-string-separator " => ")
  '(anzu-search-threshold 1000)
  '(package-selected-packages
-   '(tide dotenv-mode web-mode vue-mode company-php php-mode php-refactor-mode markdown-mode js2-refactor ivy-hydra hydra log4j-mode dashboard neotree highlight-indent-guides doom-modeline which-key doom-themes yaml-mode whitespace-cleanup-mode use-package undo-tree smartparens shrink-path sass-mode rjsx-mode rainbow-mode py-autopep8 projectile pkgbuild-mode pip-requirements nginx-mode lua-mode json-mode ivy-rich go-mode git-timemachine git-modes git-gutter-fringe flycheck eslintd-fix emmet-mode elpy editorconfig dokuwiki-mode dockerfile-mode diminish crystal-mode counsel company-quickhelp apache-mode anzu all-the-icons)))
+   '(git-gutter-fringe yaml-mode whitespace-cleanup-mode which-key web-mode vue-mode use-package undo-tree tide smartparens sass-mode rainbow-mode py-autopep8 projectile pkgbuild-mode pip-requirements php-refactor-mode nginx-mode neotree lua-mode lsp-ui log4j-mode json-mode js2-refactor ivy-rich ivy-hydra highlight-indent-guides go-mode git-timemachine git-modes eslintd-fix emmet-mode elpy editorconfig dotenv-mode doom-themes doom-modeline dokuwiki-mode dockerfile-mode diminish dashboard dap-mode crystal-mode counsel company-quickhelp company-php apache-mode anzu)))
 (custom-set-faces
  ;; custom-set-faces was added by Custom.
  ;; If you edit it by hand, you could mess it up, so be careful.

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)