Monaco Editor 默认不支持 XML 语言吗？

Question

我正在尝试将 Monaco Editor 用于 XML 语言，但在呈现编辑器实例时 XML 字符串未格式化，而它在 JSON 上工作正常。

我也没有在编辑器的上下文菜单中找到“格式化文档”选项（如果它是用 XML 语言打开的）。 摩纳哥编辑器默认支持XML格式吗？

Answer 1

默认情况下，摩纳哥编辑器似乎不格式化 xml。 我的一位同事 - @thewahome不得不编写代码来格式化 xml。 如果您对如何格式化 xml 感兴趣，以下代码段将有所帮助。

function formatXml(xml: any) {
  const PADDING = ' '.repeat(2);
  const reg = /(>)(<)(\/*)/g;
  let pad = 0;

  xml = xml.replace(reg, '$1\r\n$2$3');

  return xml.split('\r\n').map((node: any, index: number) => {
    let indent = 0;
    if (node.match(/.+<\/\w[^>]*>$/)) {
      indent = 0;
    } else if (node.match(/^<\/\w/) && pad > 0) {
      pad -= 1;
    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
      indent = 1;
    } else {
      indent = 0;
    }

    pad += indent;

    return PADDING.repeat(pad - indent) + node;
  }).join('\r\n');
}

Answer 2

摩纳哥对XML的支持很奇怪。 据我所知，没有实现 XML 格式化程序。 但不要在客户端使用 XML 格式。 如果您编辑大文本，这可能是您应用程序的瓶颈。 仅在您的后端格式化一次 XML并发送已格式化的文件。 Monaco 可以配置为在您键入时遵循 XML 缩进。

您可以在Monaco editor playground中使用它。 （只需复制、粘贴、运行）：

monaco.editor.create(document.getElementById('container'), {
    value: "<group>\n<content>\n<value text=\"Press Ctrl + Shift + F\">\</value>\n</content>\n</group>",
    language: "xml",
    tabSize: 2,
    autoIndent: "full",
    detectIndentation: true,
    formatOnType: true,
    formatOnPaste: true,
});

monaco.languages.setLanguageConfiguration("xml", {
    "indentationRules": {
        "increaseIndentPattern": new RegExp("<(?!\\?|[^>]*\\/>)([-_.A-Za-z0-9]+)(?=\\s|>)\\b[^>]*>(?!.*<\\/\\1>)|<!--(?!.*-->)|\\{[^}\"']*$"),
        "decreaseIndentPattern": new RegExp("^\\s*(<\\/(?!html)[-_.A-Za-z0-9]+\\b[^>]*>|-->|})"),
    },
});

monaco.editor.addKeybindingRules([
    {
        // Reindent lines with Ctrl + Shift + F
        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
        command: "editor.action.reindentlines",
    },
]);

indentationRules借鉴了vscode HTML 扩展配置，并进行了简化。 更多信息请点击此处。

此配置还在上下文菜单中启用“Reindent lines”操作。