操场上的代码操作和快速修复的工作示例

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

我正在寻找可在操场上使用的快速修复代码操作示例。我在playground中尝试了这段代码,但它不起作用。

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.editor.create(document.getElementById("container"), {
    value: "const foo = 1;",
    language: "mySpecialLanguage",
    lightbulb: { enabled: false },
});

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(1,1,1,5),
            contents: [
                { value: "Let's correct it" }
            ]
        };
    }
});

monaco.languages.registerCodeActionProvider('javascript', {
    provideCodeActions(model, range, context, token) {
        return Promise.resolve({
            actions: [{
                title: "Testing",
                diagnostics: [{
                    code: "0",
                    endColumn: 5,
                    endLineNumber: 1,
                    message: "message",
                    severity: 8,
                    startColumn: 1,
                    startLineNumber: 1,
                }],
                edit: {
                    edits: [{
                        edit: { 
                            range: new monaco.Range(1, 1, 1, 5), 
                            text: `text` },
                        resource: model.uri,
                    }],
                },
                kind: "quickfix",
                title: "title"
            }],
            dispose: () => { },
        })
    }
});

我期望的是,我们可以将鼠标悬停在

const foo = 1
上,然后我们会看到
Let's correct it
,在其下方我们可以看到
Quick Fix
,我们可以在其上单击进行修复。

有谁知道为什么代码不起作用?

monaco-editor
2个回答
2
投票

更新答案 - 适用于摩纳哥 0.34.0 及更高版本

自 Monaco 0.34.0 起,下面的原始解决方案需要稍微调整才能工作。包含

edit
range
属性的
text
对象需要重命名为
textEdit
,如下所示:

edit: {
    edits: [
        {
            resource: model.uri,
            textEdit: {
                range: error,
                text: "replacement text" // text to replace with
            }
        }
    ]
},

原始答案 - 适用于摩纳哥 0.33.X 及以下版本

我不确定为什么您发布的代码不起作用,但如果您将以下代码复制并粘贴到 Monaco Playground 中,它将显示一个名为

My quickfix
的快速修复程序,并将突出显示为错误的文本替换为这句话
replacement text

monaco.languages.register({ id: 'myLanguage' });

monaco.editor.onDidCreateModel(function(model) {
    function validate() {
      var textToValidate = model.getValue();
      
      var markers = [{
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: 1,
        startColumn: 3,
        endLineNumber: 1,
        endColumn: 5,
        message: 'Lets correct it'
      }];
      monaco.editor.setModelMarkers(model, 'myLanguage', markers);
    }

    var handle = null;
    model.onDidChangeContent(() => {
      // debounce
      clearTimeout(handle);
      handle = setTimeout(() => validate(), 500);
    });
    validate();
});

monaco.languages.registerCodeActionProvider("myLanguage", {
    provideCodeActions: (model, range, context, token) => {
        const actions = context.markers.map(error => {
            return {
                title: `My quickfix`, // Name of quickfix
                diagnostics: [error],
                kind: "quickfix",
                edit: {
                    edits: [
                        {
                            resource: model.uri,
                            edit: {
                                range: error,
                                text: "replacement text" // text to replace with
                            }
                        }
                    ]
                },
                isPreferred: true
            };
        });
        return {
            actions: actions,
            dispose: () => {}
        }
    }
});

var ed = monaco.editor.create(document.getElementById("container"), {
    value: "cont foo = 1;",
    language: "myLanguage",
    lightbulb: { enabled: false },
});

validate()
中的
monaco.editor.onDidCreateModel
函数在模型中添加了一个虚拟错误标记,该标记在第 1 行第 3-5 列上显示错误。在现实世界的示例中,您可能希望在
model.getValue()
函数中验证
validate()
并根据该验证的结果设置模型标记。

monaco.editor.registerCodeActionProvider
中的代码定义了您想要显示的快速修复列表。在此示例中,它是一个具有单个快速修复的硬编码列表,但在现实生活中,您可能希望将
context.markers.map
内的回调更改为检查
error.message
属性并返回消息的正确建议的逻辑。

当您将鼠标悬停在第 1 行的错误上时,您将看到

Lets correct it
Quick Fix...
链接。单击
Quick Fix
链接应显示单个建议
My quickfix
。当您单击此按钮时,它将用快速修复中定义的文本替换带有错误下划线的文本 (
replacement text
)。


0
投票

从摩纳哥版本 0.44 开始,您还需要一个额外的 versionId。包含

edit
range
属性的
text
对象需要如下所示:

edit: {
    edits: [
        {
            resource: model.uri,
            textEdit: {
                range: error,
                text: "replacement text" // text to replace with
            },
            versionId: 1
        }
    ]
}
© www.soinside.com 2019 - 2024. All rights reserved.