How to get two space indentation for JS/JSX?

Question

Expected behavior (demonstrated in vim): http://zc.d.pr/1a7b1/2p5XiuwX

I expect hitting Enter should indent the pointer at the correct level with two spaces in, matching the surrounding syntax, without reflowing/reformatting any previous lines.

Actual behavior, after manually switching to web-mode, since it still seems to default to javascript-mode: http://zc.d.pr/V73w/2yuh0MsX

---

Really struggling to figure this out (I'm a vim expat giving emacs a whirl). I found these two articles:

• http://codewinds.com/blog/2015-04-02-emacs-flycheck-eslint-jsx.html
• http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/

But still have had no luck. You can find my emacs config here: https://github.com/neezer/.emacs.d/blob/master/config.org#webmode (been tweaking the config so it doesn't match exactly what's in those articles).

Answer 1

While in web mode, check the variables you've set by using M-: web-mode-code-indent-offset. Is it 2 or 4?

Your config is:

(use-package web-mode
  :ensure t
  :config
    '(setq web-mode-code-indent-offset 2)
    '(setq web-mode-markup-indent-offset 2))

I believe you're not supposed to quote those. Try this instead:

(use-package web-mode
  :ensure t
  :config
    (progn
      (setq web-mode-code-indent-offset 2)
      (setq web-mode-markup-indent-offset 2)))