如何在摩纳哥编辑器实例中设置制表符宽度？

Question

我想在 monaco editor 的实例中 设置缩进宽度 （空格）。

到目前为止，我已经能够通过在初始化期间传入任何 IEditorOptions 来自定义许多选项。这些选项也可以稍后在编辑器实例上使用 updateOptions 方法自定义，如下例所示：

// 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,
})

但是，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).

你能帮我调整这个设置吗？我的猜测是我误解了（否则非常好）编辑器文档，所以任何帮助导航它都会非常有帮助。

一如既往，我们非常感谢任何想法和提示。 非常感谢您考虑这个问题！

Answer 1

我也不知道如何设置全局 tabSize 选项，但是我确实设法专门为 HTML[=17 设置了选项=]:

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

Answer 2

答案刚刚在相应的GitHub issue中讨论过。诀窍不是直接更新编辑器上的选项，而是更新底层模型。要扩展上面的片段：

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

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

这对我 (™) 在 Monaco Playground 中有效。

这一切都归功于摩纳哥开发者——我非常喜欢他们的编辑器，这进一步改进了它。

Answer 3

这将创建两个您可以独立控制的模型

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

您现在可以使用 monaco.editor.getModels() 访问模型 returns 一个数组，所以你可以 monaco.editor.getModels()[0] 访问您的第一个模型，或者更容易访问每个模型它的变量名。比如

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

作为奖励，您可以创建两个单独的编辑器通过创建模型并将其链接到独立模型来使用两个单独的模型 DOM 个元素。

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

如何在摩纳哥编辑器实例中设置制表符宽度？

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

javascript

typescript

monaco-editor