我正在寻找可在操场上使用的快速修复代码操作示例。我在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
,我们可以在其上单击进行修复。
有谁知道为什么代码不起作用?
更新答案 - 适用于摩纳哥 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.44 开始,您还需要一个额外的 versionId。包含
edit
和 range
属性的 text
对象需要如下所示:
edit: {
edits: [
{
resource: model.uri,
textEdit: {
range: error,
text: "replacement text" // text to replace with
},
versionId: 1
}
]
}