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

Question

我正在寻找可在操场上运行的快速修复代码操作示例。我在 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，在Let's correct it下我们可以看到Quick Fix，我们可以在Quick Fix上点击修复。

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

Answer 1

我不确定为什么您发布的代码不起作用，但是如果您将以下代码复制并粘贴到 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 },
});

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

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

当您将鼠标悬停在第 1 行的错误上时，您将看到 Lets correct it 和 Quick Fix... link。单击 Quick Fix link 应该会显示一条建议 My quickfix。当您单击它时，它会将错误下划线的文本替换为 quickfix (replacement text) 中定义的文本。

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

A working sample of code action and quick fix in the playground

monaco-editor