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”操作。