jsx - Microsoft 的 Monaco 编辑器中的 JSX 支持

Question

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

Answer 1

monaco-editor 100% 支持 JSX 语法类型检查。这不是语法高亮，但它可以通过使用 TypeScript 编译器的 worker 解析 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），最后在内容更改上创建内联装饰。

我的看起来像这样：