19707ef86d321517e069f214b85ef6f478c1bb43 — Jesús 2 years ago 9c7add3
improve javascript mode
3 files changed, 37 insertions(+), 64 deletions(-)

M custom.el
M modules/init-ivy.el
M modules/init-js-two.el
M custom.el => custom.el +1 -1
@@ 9,7 9,7 @@
 '(anzu-replace-to-string-separator " => ")
 '(anzu-search-threshold 1000)
   '(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 was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.

M modules/init-ivy.el => modules/init-ivy.el +8 -0
@@ 29,6 29,14 @@
  (ivy-set-display-transformer 'ivy-switch-buffer

;; 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)

M modules/init-js-two.el => modules/init-js-two.el +28 -63
@@ 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 ()
  ;; have 4 space indentation by default
  (setq js-indent-level 2
        js2-basic-offset 2
        js-chain-indent t)

  :mode (("\\.js\\'" . js2-mode))
  (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")
  (setq js-indent-level 2)
  ;; patch in basic private field support
  (advice-add #'js2-identifier-start-p
              (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))
  (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
  (json-reformat:indent-width 2)
  (json-reformat:pretty-string? t)
  (js-indent-level 2)
  :mode "\\.js\\(?:on\\|[hl]int\\(rc\\)?\\)\\'"
  (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 ()
                       (js2-refactor-mode -1)))
  (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)