Microsoft 的 Monaco 编辑器中的 JSX 支持

Question

Monaco 编辑器是否支持 JSX 语法高亮？我找不到任何与此相关的参考。

Answer 1

monaco-editor 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/

享受

Answer 2

TL; DR：不。

荷兰；公关：

到目前为止（v0.20.0），它不支持 JSX 高亮或注释，它只支持语法识别。

更新

我的项目中有一个自定义的 JSX 突出显示和评论，现在可以作为 npm 包使用：monaco-jsx-highlighter，所以我采用 Monaco 的突出显示：

并像这样自定义它：

您可以现场试用：https : //codesandbox.io/s/monaco-editor-react-6o4u4?file=/ src/ index.js。

以前的回答

这里已经完成了一些工作，但不是官方的，仅与语法有关。

不过，这是可以做到的。这个工具可以工作。在他们的回购中，他们为它添加了“着色”。

整个想法是为Monaco提供一个JSX 分词器，可以像在他们的自定义分词器示例中一样插入它。

CodeSandbox 有办法做到这一点。他们添加了一个自定义语法工作器，将即将成为编辑器的装饰发送到编辑器。我做的一样，但我用jscodeshift得到AST（当时findJSXElements），最后创建内嵌装饰上的内容变化。

我的看起来像这样：