JS support in Emacs

eslint.json

// Part of package.json with eslint configuration I use.
// You'll need eslint-plugin-prettier in your dev dependencies
// and probably a bunch of other things. Eslint will complain.
// Just install what it asks for.

  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "error"
      ]
    }
  },

js.el

;; JSON tree viewer
(use-package
  json-navigator)

;; Smaller fixes to the js2-mode to make it work fine with tide-mode.
(use-package
  js2-mode
  :delight "JS"
  :init
  (setq js2-mode-show-strict-warnings nil)
  (setq js2-mode-show-parse-errors nil)
  :config (add-to-list 'auto-mode-alist '("\\.js\\'" .
                                           js2-mode)))

;; A very fast JS linter and fixer.
;; npm install -g eslint_d
(use-package eslintd-fix
  :hook
  (tide-mode . eslintd-fix-mode))

;; Autofix missing imports.
(use-package import-js)

;; React
(use-package
  rjsx-mode
  :delight "JSX"
  :diminish js2-mode
  :config
 ;; Try to detect React files by react and recompose imports.
  (add-to-list 'magic-mode-alist '("\\'recompose" . rjsx-mode))
  (add-to-list 'magic-mode-alist '("\\'react" . rjsx-mode))
 ;; Detect React files by extension.
  (add-to-list 'auto-mode-alist '("\\.jsx\\'" . rjsx-mode)))

;; Hide unneeded mode icon
(use-package js
  :diminish)

;; Setup Tide mode for JS and Typescript. 
;; To make it work you'll need jsconfig.js or tsconfig.js
;; in your project's root folder.
;; Includes:
;; - types and structures inference
;; - jump to (M-.) and back (M-,)
;; - show references (M-x tide-references)
;; And a lot of other goodies https://github.com/ananthakumaran/tide
(use-package tide
  :ensure t
  :after (typescript-mode company)
  :hook ((typescript-mode . tide-setup)
          (typescript-mode . tide-hl-identifier-mode)
          (js2-mode . tide-setup)
          (rjsx-mode . tide-setup)))

jsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "checkJs": true,
    "jsx": "react",
    "lib": [ "dom", "es2017" ]
  }
}