如何在Monaco编辑器实例中设置选项卡宽度？

Question

我想在一个 monaco 编辑器 的实例中设置缩进宽度（以空格为单位）。

迄今为止，我已经能够通过在初始化期间传递任何 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 设置在此接口中未定义，而是在单独的FormattingOptions 接口中，在那里我无法找到绑定（代码搜索仅找到接口定义）。

你能帮我调整这个设置吗？ 我猜想我可能误解了（否则很好的）编辑器文档，因此任何帮助都将非常有用。

一如既往，非常感谢您考虑这个问题！

- mezzopiano

Answer 1

这个答案在相应的GitHub问题中刚刚被讨论过。诀窍是不要直接在编辑器上更新选项，而是在基础模型上更新选项。扩展上面的片段：

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

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

这对我来说在 Monaco Playground 上可行 (™)。

所有的功劳都归于 Monaco 开发人员 — 我非常喜欢他们的编辑器，而这使它变得更好了。

- mezzopiano

---

不再工作，出现 TypeError: Cannot read property 'toString' of undefined 错误。 - Nick

编辑队列已满，但将ID“editor”替换为“container”，它应该可以工作。 - BlueManCZ

Answer 2

我还没有找到如何设置全局的tabSize选项，但是我成功地为HTML设置了这个选项：

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

- jdub

Answer 3

如果您只需要首次设置选项卡宽度，则可以在构造函数中使用 tabSize 选项进行设置：

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

- BlueManCZ

Answer 4

这将创建两个模型，您可以独立控制它们。

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

现在您可以使用monaco.editor.getModels()访问模型，它返回一个数组，因此您可以通过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",
});

- Steven Bell