Added JavaScript support with js2-mode

custom.el

@@ -11,7 +11,7 @@
  '(ecb-options-version "2.50")
  '(package-selected-packages
    (quote
-    (git-gutter-fringe yaml-mode whitespace-cleanup-mode web-mode vue-mode use-package undo-tree sublime-themes sml-modeline smartparens smart-mode-line-powerline-theme shrink-path sass-mode rainbow-mode py-autopep8 projectile pkgbuild-mode pip-requirements php-refactor-mode nlinum nginx-mode neotree markdown-mode log4j-mode less-css-mode ivy-rich highlight-indent-guides gitignore-mode gitconfig-mode gitattributes-mode git-timemachine flycheck emmet-mode elpy ecb dokuwiki-mode diminish crystal-mode counsel company-quickhelp company-php apache-mode anzu all-the-icons))))
+    (git-gutter-fringe yaml-mode whitespace-cleanup-mode web-mode vue-mode use-package undo-tree sublime-themes sml-modeline smartparens smart-mode-line-powerline-theme shrink-path sass-mode rjsx-mode rainbow-mode py-autopep8 projectile prettier-js pkgbuild-mode pip-requirements php-refactor-mode nlinum nginx-mode neotree markdown-mode log4j-mode less-css-mode json-mode js2-refactor ivy-rich ivy-hydra highlight-indent-guides gitignore-mode gitconfig-mode gitattributes-mode git-timemachine flycheck eslintd-fix emmet-mode elpy ecb dokuwiki-mode diminish crystal-mode counsel company-quickhelp company-php apache-mode anzu all-the-icons))))
 (custom-set-faces
  ;; custom-set-faces was added by Custom.
  ;; If you edit it by hand, you could mess it up, so be careful.

init.el

@@ -98,6 +98,7 @@
   (require 'init-ccc)
   (require 'init-crystal)
   (require 'init-html)
+  (require 'init-js-two)
   (require 'init-markdown)
   (require 'init-php)
   (require 'init-projectile)

modules/init-js-two.el

@@ -0,0 +1,148 @@
+;;; init-js-two.el --- .Emacs Configuration -*- lexical-binding: t -*-
+;;; Commentary:
+;;; JavaScript configuration - IDE
+
+;;; Code:
+
+;; js2-mode: enhanced JavaScript editing mode
+;; https://github.com/mooz/js2-mode
+(use-package js2-mode
+  :mode (("\\.js$" . js2-mode))
+  :hook ((js2-mode . (lambda ()
+                       (flycheck-mode)
+                       (company-mode))))
+  :config
+  ;; have 4 space indentation by default
+  (setq js-indent-level 4
+        js2-basic-offset 4
+        js-chain-indent 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")
+
+;; js2-refactor: refactoring options for emacs
+;; https://github.com/magnars/js2-refactor.el
+(use-package js2-refactor
+  :pin "MELPA"
+  :after js2-mode
+  :bind
+  (:map js2-mode-map
+        ("C-k" . js2r-kill)
+        ("C-c h r" . js2-refactor-hydra/body))
+  :hook ((js2-mode . js2-refactor-mode))
+  :config (js2r-add-keybindings-with-prefix "C-c C-r")
+
+  (defhydra js2-refactor-hydra (:color blue :hint nil)
+    "
+^Functions^                    ^Variables^               ^Buffer^                      ^sexp^               ^Debugging^
+------------------------------------------------------------------------------------------------------------------------------
+[_lp_] Localize Parameter      [_ev_] Extract variable   [_wi_] Wrap buffer in IIFE    [_k_]  js2 kill      [_lt_] log this
+[_ef_] Extract function        [_iv_] Inline variable    [_ig_] Inject global in IIFE  [_ss_] split string  [_dt_] debug this
+[_ip_] Introduce parameter     [_rv_] Rename variable    [_ee_] Expand node at point   [_sl_] forward slurp
+[_em_] Extract method          [_vt_] Var to this        [_cc_] Contract node at point [_ba_] forward barf
+[_ao_] Arguments to object     [_sv_] Split var decl.    [_uw_] unwrap
+[_tf_] Toggle fun exp and decl [_ag_] Add var to globals
+[_ta_] Toggle fun expr and =>  [_ti_] Ternary to if
+[_q_]  quit"
+    ("ee" js2r-expand-node-at-point)
+    ("cc" js2r-contract-node-at-point)
+    ("ef" js2r-extract-function)
+    ("em" js2r-extract-method)
+    ("tf" js2r-toggle-function-expression-and-declaration)
+    ("ta" js2r-toggle-arrow-function-and-expression)
+    ("ip" js2r-introduce-parameter)
+    ("lp" js2r-localize-parameter)
+    ("wi" js2r-wrap-buffer-in-iife)
+    ("ig" js2r-inject-global-in-iife)
+    ("ag" js2r-add-to-globals-annotation)
+    ("ev" js2r-extract-var)
+    ("iv" js2r-inline-var)
+    ("rv" js2r-rename-var)
+    ("vt" js2r-var-to-this)
+    ("ao" js2r-arguments-to-object)
+    ("ti" js2r-ternary-to-if)
+    ("sv" js2r-split-var-declaration)
+    ("ss" js2r-split-string)
+    ("uw" js2r-unwrap)
+    ("lt" js2r-log-this)
+    ("dt" js2r-debug-this)
+    ("sl" js2r-forward-slurp)
+    ("ba" js2r-forward-barf)
+    ("k" js2r-kill)
+    ("q" nil)))
+
+;; prettier-emacs: minor-mode to prettify javascript files on save
+;; https://github.com/prettier/prettier-emacs
+(use-package prettier-js
+  :hook ((js2-mode . prettier-js-mode)
+         (rjsx-mode . prettier-js-mode)))
+
+;; 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
+  :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))
+
+;; 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)
+;; End:
+;;; init-js-two.el ends here

modules/init-nlinum.el

@@ -23,6 +23,7 @@
   (elisp-mode    . linum-mode)
   (html-mode     . linum-mode)
   (js-mode       . linum-mode)
+  (js2-mode      . linum-mode)
   (less-mode     . linum-mode)
   (markdown-mode . linum-mode)
   (nginx-mode    . linum-mode)