Microsoft的摩纳哥编辑器中的JSX支持

Question

Monaco editor是否支持JSX语法突出显示？我找不到任何与此相关的参考资料。

Answer 1

TL; DR：没有。

到目前为止（v0.10.1），它不支持JSX突出显示。

已经完成了一些工作here，但这不是官方的，只是关于语法。

但是可以做到。这tool有效。在他们的回购中，他们为它添加了“着色”。

整个想法是向摩纳哥提供一个JSX tokenizer，可以将其插入到自定义标记器example中。

<强>更新

CodeSandbox有办法it。他们添加了一个自定义语法工作器，可以将即将到来的装饰发送给编辑器。我执行了same，但我使用jscodeshift来获取AST（然后是findJSXElements），最后在内容更改时创建inline decorations。

我看起来像这样：

Answer 2

摩纳哥编辑器100％支持JSX语法类型检查。并不是语法高亮显示，而是可以通过使用TypeScript编译器的工作程序解析JSX并使用monaco.editor.deltaDecorations()将HTML类添加到JSX相关标记中并添加CSS使其着色来实现。

要进行类型检查，您需要使用TypeScript语言，配置TypeScript编译器选项并提供JSX类型（例如，React）。

对于这两件事，这是我写的一些说明：https://github.com/cancerberoSgx/jsx-alone/blob/master/jsx-explorer/HOWTO_JSX_MONACO.md

这是一个工作示例：https://cancerberosgx.github.io/jsx-alone/jsx-explorer/

享受