如何使用API​​在Monaco Editor中格式化JSON代码? [英] How do I format JSON code in Monaco Editor with API?

问题描述

我正在与 monaco编辑器(也称为Web项目中的 VS Code 引擎)一起工作.

I am working with monaco editor aka the VS Code engine in a web project.

我正在使用它来允许用户编辑设置了JSON模式的JSON，以帮助实现一些自动补全功能.

I am using it to allow users to edit some JSON that has a JSON Schema set, to help give some auto-completion.

当他们保存更改并希望重新编辑他们的工作时，我重新加载到编辑器中的JSON将转换为字符串，但这会将代码呈现在一行上，我更希望JSON是更漂亮，就像用户右键单击并使用上下文菜单或键盘快捷键等中的格式文档"命令一样.

When they save their changes and wish to re-edit their work, the JSON that I load back into the editor is converted to a string but this renders the code out on a single line and I would much prefer the JSON to be prettier as if the user right clicks and uses the Format Document command from the context menu or keyboard shortcut etc..

所以

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

会成为这个

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

当前尝试

我尝试了以下方法，但是在内容加载后使用超时来等待/猜测感觉很麻烦

Current attempt

I have tried the following but it feels very hacky to use a timeout to wait/guess when the content has loaded

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>

请问有人对此有更好的主意或解决方案吗?

Does anyone have a better idea or solution to this please?

推荐答案

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>

感谢 https://stackoverflow.com/users/1378051/dalie 让我想起了有关JSON.stringify

Thanks to https://stackoverflow.com/users/1378051/dalie for reminding me about the extra arguments to JSON.stringify

对空格参数使用制表符
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Use the tab character for the space argument
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);

这篇关于如何使用API​​在Monaco Editor中格式化JSON代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！