# Configuring Emacs for react, es6, and flow

For a while, `JSX` and new es6 syntax had flaky support in emacs, but there's been huge work on a lot of packages. Using emacs for JavaScript with React, ES6, and Flow (or Typescript, etc) is really easy and powerful in Emacs these days.

## Set up [`web-mode`](web-mode.org/)

`web-mode` provides most of the underlying functionality, so a huge shout-out to the maintainer(s) there.

Install web-mode:
```kbd
M-x package-install RET web-mode RET
```

Enable web-mode in your emacs configuration:
```lisp
(add-to-list 'auto-mode-alist '("\\.jsx?$" . web-mode)) ;; auto-enable for .js/.jsx files
```

web-mode support Flow types out-of-the-box, so no additional configuration is required.

### JSX syntax highlighting

To enable JSX syntax highlighting in `.js`/`.jsx` files, add this to your emacs configuration:

```lisp
(setq web-mode-content-types-alist '(("jsx" . "\\.js[x]?\\'")))
```

### Indentation and other settings

Configure indentation and any other preferences in the `web-mode-init-hook`:

```lisp
(defun web-mode-init-hook ()
  "Hooks for Web mode.  Adjust indent."
  (setq web-mode-markup-indent-offset 4))
  
(add-hook 'web-mode-hook  'web-mode-init-hook)
```

## Live `eslint` errors

`flycheck` can be used to show `eslint` errors in the current buffer.

Install `flycheck-mode`:
```kbd
M-x package-install RET flycheck-mode RET`
```

Disable the default jslint:
```lisp
(setq-default flycheck-disabled-checkers
              (append flycheck-disabled-checkers
                      '(javascript-jshint json-jsonlist)))
```

**Using a global `eslint`**

Enable eslint checker when web-mode is activated:
```lisp
;; Enable eslint checker for web-mode
(flycheck-add-mode 'javascript-eslint 'web-mode)
;; Enable flycheck globally
(add-hook 'after-init-hook #'global-flycheck-mode)
```

#### Using a local `eslint` from node_modules

To use a `eslint` and configuration from the project's local node_modules, use the following:

Install add-node-modules-path:
```
M-x package-install RET add-node-modules-path RET
```

```lisp
(add-hook 'flycheck-mode-hook 'add-node-modules-path)
```

## Prettier.js automatic formatting

You can enable prettier.js to automatically format your files every time you save:

Install pretter-js-mode:
```kbd
M-x package-install RET prettier-js-mode RET
```

Install the add-node-modules-path so you don't need a global prettier:
```
M-x package-install RET add-node-modules-path RET
```

Enable prettier-js-mode for files in a project with prettier (this will use the projects `.prettierrc`):
```lisp
(defun web-mode-init-prettier-hook ()
  (add-node-modules-path)
  (prettier-js-mode))

(add-hook 'web-mode-hook  'web-mode-init-hook)
```

## Emmet HTML tag expansion

If you like emmett mode from other editors, you can use it in emacs too:

Install emmit-mode:
```kbd
M-x package-install RET emmet-mode RET
```

Enable emmet-mode with web-mode:
```lisp
(add-hook 'web-mode-hook  'emmet-mode)
```

---

And that's it, now Emacs is set up to edit all your JS/ES6/React/Flow or whatever files!

:: Cody Reichert