Incomplete IndentGuides display

monaco-editor version: 0.19.0 Browser: Google OS: win10 Playground code that reproduces the issue:

I’m fine on the playground, but not in my vue project. Only the first column has IndentGuides.

There is really only one node in html.

import * as monaco from 'monaco-editor';

const arr = [
  {
    "value": "",
    "url": ""
  }
]

export default {
 mounted() {
    this.$nextTick(() => {
      this.editor = monaco.editor.create(this.$el, {
         value: JSON.stringify(arr, null, 2),
	 language: "json",
         theme: 'vs-dark',
      });
    });
  },
}

[pengxiaotian]

thank you very much.

[alexdima]

That has to do with indentation settings.

When creating the editor with the value [], the string [] has no indentation, so the editor cannot guess what your indentation is. It falls back to the default settings, tabSize: 4, insertSpaces: true. So an indent guide is rendered every 4 spaces.

You can define this explicitly via tabSize: 2, e.g.:

const arr = [
    {
        "value": "",
        "url": ""
    }
]

let editor = monaco.editor.create(document.getElementById("container"), {
    tabSize: 2,
    value: "[]",
    language: "json",
    theme: 'vs-dark',
});

editor.setValue(JSON.stringify(arr, null, 2));