React Fragments速记<> </>中断了VSCode语法突出显示

Question

此代码不会引发任何错误或警告，但是语法高亮显示处于关闭状态。我尝试了不同的主题，但是它们都有这个问题。有什么想法吗？

Answer 1

我以前没有遇到过，但是我会尝试一些事情：

1. 更新VSCode（左下方的设置按钮）
2. 尝试检查是否将Javascript设置为IDE的语言（右下工具栏）：

3。听起来很愚蠢，但对我来说，使用VSCode的Dark+ (default dark)主题就可以了，所以可以尝试

Answer 2

按照 Johannes 的建议，尝试删除扩展程序中的 dzannotti.vscode-babel-coloring。它是一个过时的扩展，不支持 JSX 片段语法。

Answer 3

是的，atom.io（与VSCode共享一些相关代码）也有类似的问题。我发现您可以通过使用React.Fragment而不是简写来轻松解决它（<>实际上是<React.Fragment>的简写）。为了方便起见，我声明：

const F = React.Fragment;

然后使用：

<F>
  <h1>Example title</h1>
  <p>Example body</p>
</F>