如何使用 API 在 Monaco Editor 中格式化 JSON 代码？

Question

我正在使用 monaco 编辑器，也就是 Web 项目中的 VS Code 引擎。

我使用它来允许用户编辑一些 JSON 具有 JSON 模式集，以帮助提供一些自动完成。

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

所以这个

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

会变成这样

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

当前尝试

我尝试了以下方法，但在内容加载后使用超时 wait/guess 感觉很老套

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>

有没有人对此有更好的想法或解决方案？

Answer 1

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://whosebug.com/users/1378051/dalie 提醒我 JSON.stringify

的额外参数

回答

对 space 参数使用制表符
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);

Answer 2

我用这个函数来整理我的代码：

tidy() {
  this.monacoEditor.trigger('anyString', 'editor.action.formatDocument')
}

其中 monacoEditor 是 this.monacoEditor = monaco.editor.create(this.$el, { ...this.editorOptions })

的结果

如何使用 API 在 Monaco Editor 中格式化 JSON 代码？

How do I format JSON code in Monaco Editor with API?

javascript

json

monaco-editor

当前尝试

回答