如何使用API 在摩纳哥编辑器中格式化JSON代码?

问题描述 投票:0回答:1

我正在使用monaco编辑器,又名Web项目中的[[VS Code引擎。

我正在使用它来允许用户编辑一些具有JSON模式集的JSON,以帮助实现一些自动完成功能。

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

所以这个

{ "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/[email protected]/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
    }
  });
</script>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
有人对此有更好的主意或解决方案吗?
javascript json monaco-editor
1个回答
0
投票

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/[email protected]/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
    }
  });
</script>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
感谢https://stackoverflow.com/users/1378051/dalie提醒我有关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);

© www.soinside.com 2019 - 2024. All rights reserved.