怎么在vue3中使用 beautify 扩展 美化 json 、xml 代码

[itwmike]

如题在使用时报错，下面是我的代码示例：

npm i ace-builds

index.vue

import ace from 'ace-builds';
import 'ace-builds/src-noconflict/theme-monokai'; // 默认设置的主题
import 'ace-builds/src-noconflict/mode-xml'; // 默认设置的语言模式
import 'ace-builds/src-noconflict/mode-json'; // 默认设置的语言模式
import 'ace-builds/src-noconflict/ext-language_tools';

const nodeTemplate = ref();
const nodeTemplateEditor = ref<ace.Ace.Editor>();

nodeTemplateEditor.value = ace.edit(nodeTemplate.value!, {
fontSize: 16,
useWorker: false,
showInvisibles: true, // 显示回车
showPrintMargin: false, // 不显示打印分割线
tabSize: 4,
useSoftTabs: true,
theme: 'ace/theme/monokai', // 默认设置的主题
mode: 'ace/mode/json', // 默认设置的语言模式
value: formState.nodeTemplate,
});

//格式化代码
const beautify = ace.require('ace/ext/beautify');
beautify.beautify(nodeTemplateEditor.value!.getSession()); // 此处报错 Cannot read properties of undefined (reading 'beautify')

[itwmike]

已解决