How can I set the tab width in a monaco editor instance?

Question

I would like to set the indentation width (in spaces) in an instance of the monaco editor.

So far, I've been able to customize many options by passing in any of the IEditorOptions during initialization. These options can also be customized later using the updateOptions method on an editor instance, as visible in the following example:

// Many settings can be applied at initialization
var editor = monaco.editor.create(
  document.getElementById("editor"), {
    language: "html",
    value: "<p>Hello World!</p>",
});

// ... they can also be changed later ...
editor.updateOptions({
  lineNumbers: true,
})

// ... however, tabSize is not among the settings that can be modified --
// the following has no effect:
editor.updateOptions({
  tabSize: 2,
})

However, the tabSize setting is not defined in this interface, but rather a seperate FormattingOptions interface, for which I haven't been able to find a binding (a code search finds only the interface definition).

Can you help me adjust this setting? My guess is that I'm misunderstanding the (otherwise excellent) editor documentation, so any help in navigating it would be extremely helpful.

As always, any ideas and hints are hugely appreciated. Thank you very much for considering this question!

Answer 1

The answer has just been discussed in a corresponding GitHub issue. The trick is not to update the options on the editor directly, but on the underlying model. To extend the snipped above:

const editor = monaco.editor.create(
  document.getElementById("editor"), {
    language: "html",
    value: "<p>Hello World!</p>",
});

editor.getModel().updateOptions({ tabSize: 2 })

This works for me (™) in the Monaco Playground.

All credit for this goes to the monaco devs — I absolutely love their editor, and this improves it even further.

Answer 2

I haven't been able to figure out how to set a global tabSize option either, however I did manage to set the option specifically for HTML:

editor.languages.html.htmlDefaults.setOptions({ tabSize: 2 });