我最近想用spacemacs 搞 react的开发环境，也是刚入门，直接打开了react-layer，按照readme操作了一遍
···
···
但是发现几个问题，
- 没有自动应用 react-mode
- eslint似乎没有生效
- 在react-mode 下 格式化，jsx并没有格式化，并且所有高亮都消失，需要重新应用 react-mode
求道友解密。
1.指定按文件后缀使用major-mode
auto-mode-alist (append
'(
("\\.vue\\'" . web-mode)
)
auto-mode-alist)
2.eslint好像是在每个项目下都要有.eslintrc.json，不然会报错找不到配置
3.没懂你的描述
3，在react-mode 下 编辑js文件，使用 SPC m = 进行格式化，js部分正常格式化，jsx部分没有格式化，并且完成后，变成了类似普通文本文档一样，所有的高亮关键字全部变成白色，需要再次手动 SPC SPC react-mode 应用react-mode 才恢复。
- 自己设置一下
.jsbeautify文件 -
.jsx后缀的文件全改成.js，当然相应的 webpack 里设置一下 loader，然后再用, m =试试。
还是没有描述清楚吗。。 SPC m = 可以正常格式化，但是格式化一完成，整个文本就变成普通文本了，没有高亮显示了，需要重新应用 SPC SPC react-mode
react mode 或 web mode 都可以 只要能正常格式化并保持高亮
同样遇到了该问题，貌似是按照web mode去格式化的，同求解决方案
1 个赞
按照官方文档，找到了解决方案，格式化是ok的，但是 spc m = 格式化后，还是会失去文件的高亮，重新应用下就好了。以下配置都是按照官方的配置，外加一点点别的配置。所以首先确定完全按照官方配置了。
我的配置如下：
-
在.spacemacs文件的 user-init() 里面添加下（请忽略org的配置）：
(setq-default
;; Reactjs Ident Config (with-eval-after-load 'web-mode (add-to-list 'web-mode-indentation-params '("lineup-args" . nil)) (add-to-list 'web-mode-indentation-params '("lineup-concats" . nil)) (add-to-list 'web-mode-indentation-params '("lineup-calls" . nil))) (with-eval-after-load 'org ;; here goes your Org config :) ) )
2.然后在user-config()里，加上这个缩进设置，我设置都是2字符：
;; reactjs ident config
(setq-default
;; js2-mode
js2-basic-offset 2
;; web-mode
css-indent-offset 2
web-mode-markup-indent-offset 2
web-mode-css-indent-offset 2
web-mode-code-indent-offset 2
web-mode-attr-indent-offset 2)
3.另外还需要两个校验配置，一个是.eslintrc, 这是我们工程的配置:
{ “extends”: “eslint-config-airbnb”, “parser”: “babel-eslint”, “rules”: { “spaced-comment”: [0], “no-unused-vars”: [0], “no-empty”: [0], “react/wrap-multilines”: [0], “react/no-multi-comp”: [0], “no-constant-condition”: [0], “react/jsx-no-bind”: [0], “react/prop-types”: [0], “arrow-body-style”: [0], “react/prefer-stateless-function”: [0], “semi”: [0] }, “ecmaFeatures”: { “experimentalObjectRestSpread”: true } }
另一个 .jsbeautifyrc :
{ "indent_size": 2, "indent_char": " ", "eol": "\n", "indent_level": 0, "indent_with_tabs": false, "preserve_newlines": true, "max_preserve_newlines": 2, "jslint_happy": false, "space_after_anon_function": false, "brace_style": "collapse", "keep_array_indentation": false, "keep_function_indentation": false, "space_before_conditional": true, "break_chained_methods": true, "eval_code": false, "unescape_strings": false, "wrap_line_length": 80, "wrap_attributes": "auto", "wrap_attributes_indent_size": 2, "e4x": true, "end_with_newline": true }
4.还有一个是html补全的配置，默认在react mode下html无法自动补全。 在layer的配置中，开启补全的时候，加下参数：
(auto-completion :variables spacemacs-default-company-backends '(company-files company-capf)) ;; enable html autocomplete
然后就基本完美了
补全失去高亮后，spc spc 选择 react mode 重新上个色 
这就是我一开始提出的问题…
你好我想让vue 打开 为web mode 没有生效 我写把 你1的代码写在了user-config里面？请问为什么？
没写全，这是一句setq里面的。。
(setq
auto-mode-alist (append
'(("\\.zsh\\'" . shell-script-mode)
("\\.xtpl\\'" . web-mode)
("\\.vue\\'" . web-mode)
("\\.blade.php\\'" . web-mode)
)
auto-mode-alist)
)
问题已经解决了 谢谢 还想问一下 你也是web开发 你的配置是怎样的 有git 地址 我想fork研究一下
很乱，也没注释，你酌量食用。。
1 个赞
谢谢 大兄弟:grin:
兄弟, 你开启 react-mode 之后, 写 react 有补全提示么?
我这就是没有补全提示, 缩进和高亮都挺正常.
这些的补全大多数都靠yasnippets了，我把网上一些editor的snippets整合了一下，在我的仓库https://github.com/ztlevi/spacemacs-config/tree/master/snippets/react-mode。
其他函数变量什么的补全就配etags, ctags吧。
我也来玩react了……我去看了一下最新的develop branch，react-mode是继承web-mode的，web-mode有少量比较难受的地方，比如一块代码贴过来没有高亮，要在它们中间改几个字才有。而js2-mode还有不怎么用但是用起来非常爽的js2-refactor-mode，所以我选js2-mode。
js2现在自带js2-jsx-mode，大致能用，不过高亮不大对劲，估计碰到少数特殊语法会有问题，没关系，有继承自js2-jsx-mode的rjsx-mode，解决了高亮，有没有其他问题不清楚，我还没怎么写jsx。 
刚说完就发现缩进好像有点问题，看来要找个十全十美的，难呀。(lsp:听说你在呼唤我？) 是同名的两个closing tag会出问题，目测可以用忍字决 。