Skip to content

Instantly share code, notes, and snippets.



Last active Jan 2, 2019
What would you like to do?
JS support in Emacs
// 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": [
"rules": {
"prettier/prettier": [
;; JSON tree viewer
;; Smaller fixes to the js2-mode to make it work fine with tide-mode.
:delight "JS"
(setq js2-mode-show-strict-warnings nil)
(setq js2-mode-show-parse-errors nil)
:config (add-to-list 'auto-mode-alist '("\\.js\\'" .
;; A very fast JS linter and fixer.
;; npm install -g eslint_d
(use-package eslintd-fix
(tide-mode . eslintd-fix-mode))
;; Autofix missing imports.
(use-package import-js)
;; React
:delight "JSX"
:diminish js2-mode
;; 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
;; 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
(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)))
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": true,
"noEmit": true,
"checkJs": true,
"jsx": "react",
"lib": [ "dom", "es2017" ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.