Как мне отформатировать JSON код в Monaco Editor с помощью API? - PullRequest
Новая
       6

Как мне отформатировать JSON код в Monaco Editor с помощью API?

0 голосов
/ 28 января 2020

Я работаю с редактором Монако он же VS Code движок в веб-проекте.

Я использую его, чтобы позволить пользователям редактировать некоторые JSON с установленной схемой JSON, чтобы помочь автозаполнению.

Когда они сохраняют свои изменения, а sh для повторного редактирования своей работы, JSON, который я загружаю обратно в редактор преобразуется в строку, но это выводит код в одну строку, и я бы предпочел, чтобы JSON был красивее, как если бы пользователь щелкнул правой кнопкой мыши и использовал команду «Формат документа» из контекстного меню или сочетания клавиш и т. д. c ..

Итак, этот 

{ "enable": true, "description": "Something" }

стал бы таким 

{
    "enable": true,
    "description:" "Something"
}

Текущая попытка

Я пробовал следующее, но мне кажется, что он очень хакерский использовать тайм-аут, чтобы подождать / угадать, когда контент загрузится 

require(['vs/editor/editor.main'], function() {

  // JSON object we want to edit
  const jsonCode = [{
    "enabled": true,
    "description": "something"
  }];

  const modelUri = monaco.Uri.parse("json://grid/settings.json");
  const jsonModel = monaco.editor.createModel(JSON.stringify(jsonCode), "json", modelUri);

  const editor = monaco.editor.create(document.getElementById('container'), {
    model: jsonModel
  });

  // TODO: YUK see if we can remove timeout, as waiting for the model/content to be set is weird
  // Must be some nice native event?!
  // ALSO ITS SUPER JARRING WITH FLASH OF CHANGE
  setTimeout(function() {
    editor.getAction('editor.action.formatDocument').run();
  }, 100);

});
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.19.3/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.19.3/min/vs'
    }
  });
</script>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

У кого-нибудь есть идеи или решения для этого, пожалуйста?

1 Ответ

0 голосов
/ 29 января 2020 

require(['vs/editor/editor.main'], function() {

  // JSON object we want to edit
  const jsonCode = [{
    "enabled": true,
    "description": "something"
  }];

  const modelUri = monaco.Uri.parse("json://grid/settings.json");
  const jsonModel = monaco.editor.createModel(JSON.stringify(jsonCode, null, '\t'), "json", modelUri);

  const editor = monaco.editor.create(document.getElementById('container'), {
    model: jsonModel
  });
});
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.19.3/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.19.3/min/vs'
    }
  });
</script>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

Благодарю { ссылка } за напоминание о дополнительных аргументах JSON .stringify

Ответить

Используйте символ табуляции для аргумента пробела https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

const jsonModel = monaco.editor.createModel(JSON.stringify(jsonCode, null, '\t'), "json", modelUri);

...