I have (somewhat) successfully installed and configured web-mode.

But one thing doesn't work /w (react.js) JSX: I'm doing a project that requires the files to have the suffix '.js' and I'm trying to override the built-in js-mode assigned to them. I have gotten to having web-mode loaded for them (mode part of modeline says (Web ARev yas Trim)), but tag coloring and indentation doesn't work for .js suffixed files, but does for .jsx suffixed ones.

My web-mode loading and configuration currently looks like this:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode)) ;; Override?
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))

(defun my-web-mode-hook ()
  "web-mode settings"
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2))
(add-hook 'web-mode-hook  'my-web-mode-hook)

Anything obviously wrong? (Perhaps naively) it looks to me like the js-mode major mode is loaded first, and only afterwards web-mode, which doesn't manage to "take over" the buffer completely.

I guess I could look at the system sources and erase all configuration of js-mode from there, but that sounds too heavy-handed in my ears, so I'd prefer to avoid that, and I'm not even sure my theory about loading order is correct.

Emacs 24.5.1 on OS X installed via Homebrew.

1 Answer 1


you can use this

(setq web-mode-content-types-alist '(("jsx" . "/some/react/path/.*\\.js[x]?\\'")))


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.