有没有人用 spacemacs 搞react 开发环境?

我最近想用spacemacs 搞 react的开发环境,也是刚入门,直接打开了react-layer,按照readme操作了一遍

···

···

但是发现几个问题,

  1. 没有自动应用 react-mode
  2. eslint似乎没有生效
  3. 在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

格式化以后

另一个问题 ,使用 web mode的话 ,jsbeautify似乎没有生效。

格式化以后变成一坨了,但是没有高亮问题。

react mode 或 web mode 都可以 只要能正常格式化并保持高亮

同样遇到了该问题,貌似是按照web mode去格式化的,同求解决方案

1 个赞

按照官方文档,找到了解决方案,格式化是ok的,但是 spc m = 格式化后,还是会失去文件的高亮,重新应用下就好了。以下配置都是按照官方的配置,外加一点点别的配置。所以首先确定完全按照官方配置了。

我的配置如下:

  1. 在.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 重新上个色 :smile:

这就是我一开始提出的问题…

你好我想让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 有补全提示么?

我这就是没有补全提示, 缩进和高亮都挺正常.

image

这些的补全大多数都靠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。 :memo: 刚说完就发现缩进好像有点问题,看来要找个十全十美的,难呀。(lsp:听说你在呼唤我?) :memo: 是同名的两个closing tag会出问题,目测可以用忍字决 。