CODEWITHSUNDEEP
javascripttypescriptmonaco-editor
mezzopiano
mezzopiano

Reputation: 523

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

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!

Upvotes: 16

Views: 10469

Answers (4)

BlueManCZ
BlueManCZ

Reputation: 434

If you just need to set the tab width for the first time, you can do it in the constructor using the tabSize option:

monaco.editor.create(document.getElementById('container'), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: 'javascript',
    tabSize: 2,
});

Upvotes: 2

Steven Bell
Steven Bell

Reputation: 963

This will create two models that you can control independently

const markdownModel = monaco.editor.createModel("", "markdown");
const styleModel = monaco.editor.createModel("", "css");

You can now access the models using monaco.editor.getModels() which returns an array, so you could do monaco.editor.getModels()[0] to access your first model, or even easier is access each model by its variable name. Such as

markdownModel.updateOptions({ tabSize: 2 });
styleModel.updateOptions({ tabSize: 4 });

And as a bonus, you can create two seperate editors using the two seperate models by creating it and linking it to independent DOM elements.

monaco.editor.create(document.getElementById("markdown-editor"), {
  model: markdownModel,
  wordWrap: "wordWrapColumn",
  wordWrapColumn: 60,
  wordWrapMinified: true,
  wrappingIndent: "indent",
  lineNumbers: "off",
  scrollBeyondLastLine: false
});

monaco.editor.create(document.getElementById("style-editor"), {
  model: styleModel,
  wordWrap: "wordWrapColumn",
  wordWrapColumn: 80,
  wordWrapMinified: true,
  wrappingIndent: "indent",
});

Upvotes: 1

mezzopiano
mezzopiano

Reputation: 523

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.

Upvotes: 22

jdub
jdub

Reputation: 169

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 });

Upvotes: 3

Related Questions