gpt4 book ai didi

javascript - 如何使用 API 在 Monaco Editor 中格式化 JSON 代码?

转载 作者:行者123 更新时间:2023-12-05 00:31:15 24 4
gpt4 key购买 nike

我正在使用 Monaco Editor 又名 VS 代码 Web 项目中的引擎。

我正在使用它来允许用户编辑一些具有 JSON Schema 集的 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/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>


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

最佳答案

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 的额外参数

回答

使用制表符作为空格参数
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);

关于javascript - 如何使用 API 在 Monaco Editor 中格式化 JSON 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59939385/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com