javascript - 显示 Monaco Editor 中错误的快速修复

Question

我正在尝试使用 Monaco 作为自定义语言的编辑器。

我使用此代码来显示 playground 中的示例错误(省略部分内容):

const editor = monaco.editor.create(<omitted>);
const model = editor.getModel();
model.onDidChangeContent(event => {
   const value = model.getValue();
   const errors = GetErrors(value); // Implementation of GetErrors() not shown here

    monaco.editor.setModelMarkers(model, "Example", errors);
});

这会在编辑器中产生所需的错误:

如何为该错误显示快速修复？(而不是“没有可用的快速修复”)

我查看了 monaco.languages.registerCodeActionProvider()，但我不知道它与错误检测代码有何联系。

更一般地说，我一直在努力寻找与 Monaco 一起实现 Quick Fix 的示例。

Answer 1

我使用代码操作提供程序使其正常工作。

关键是在 provideCodeActions() 中使用 context.markers 来获取我在其他地方引发的错误(通过 setModelMarkers())。

monaco.languages.registerCodeActionProvider("myLanguage", {
    provideCodeActions: (
        model /**ITextModel*/,
        range /**Range*/,
        context /**CodeActionContext*/,
        token /**CancellationToken*/
    ) => {

        const actions = context.markers.map(error => {
            return {
                title: `Example quick fix`,
                diagnostics: [error],
                kind: "quickfix",
                edit: {
                    edits: [
                        {
                            resource: model.uri,
                            edits: [
                                {
                                    range: error,
                                    text: "This text replaces the text with the error"
                                }
                            ]
                        }
                    ]
                },
                isPreferred: true
            };
        });
        return {
            actions: actions,
            dispose: () => {}
        }
    }
});

仍然想知道我是否缺少摩纳哥的明显文档来源或示例。我使用 https://microsoft.github.io/monaco-editor/api/index.html 将其拼凑在一起和 monaco.d.ts但这需要大量的尝试和错误。