How to set the correct indentation of indentation guides?

Question

Enabling indentation guides in Monaco is done by setting renderIndentGuides to true in Monaco.IEditorOptions. However this results in indentation guides that are not properly indented:

Language in the editor is set to "javascript" and tabstops are disabled (thus using the the default of 4 spaces for one indentation step). Which setting must be changed to make the indentation guides follow the set indentation width in the editor?

Answer 1

I cannot confirm that this solves the issue since I'm not able to fully reproduce it, but for those who land here looking for an advanced indentation configuration, here is my example configuration for XML language, containing multiple options you can play around with in Monaco editor playground. (just copy, paste, run):

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 are borrowed from vscode HTML extension configuration and simplified. More information about it here.