Microsoft 的 Monaco 编辑器中的 JSX 支持答案

【问题标题】：JSX Support in Microsoft's Monaco editorMicrosoft 的 Monaco 编辑器中的 JSX 支持
【发布时间】：2016-11-14 10:26:56
【问题描述】：

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

【问题讨论】：

标签： jsx monaco-editor

【解决方案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/

享受

【讨论】：

这也适用于 react-monaco-editor 吗？ github.com/react-monaco-editor/react-monaco-editor
我不熟悉那个库，但只要它允许你获取它应该的 monaco 实例。
嘿，我正在尝试理解您的说明，但在第 3 步遇到问题：将 JSX 定义添加为 monaco 模型。您使用 jsx_alone_core_d_ts 但如果您使用的是 react，您可以将其与 React 放在该文件的末尾。我不确定你在这里的意思。如果我给你发邮件可以吗？

【解决方案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。

以前的答案

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

虽然可以。这个tool 可以正常工作。在他们的 repo 中，他们添加了“着色”。

整个想法是为 Monaco 提供一个JSX tokenizer，可以像在他们的自定义标记器example 中一样插入它。

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

我的看起来像这样：

【讨论】：