1.//对语法检查,即标红报错是否开启的api
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
// noSyntaxValidation: true,
});
2.//鼠标区域提示操作的api 返回格式为 contents:[{value:内容}] 可以设置光标区域根据返回的行列自定义 range
monaco.languages.registerHoverProvider("javascript", {
provideHover: function (model, position) {
if (position !== null&&this.oldProvideHoverPosition!==position) {
this.oldProvideHoverPosition = position
const { lineNumber, column } = position;
const endColumn = model.getWordAtPosition(position).endColumn;
// console.log("lll", model.getWordAtPosition(position), position);
let textBeforeHover = model.getValueInRange({
startLineNumber: lineNumber,
startColumn: 0,
endLineNumber: lineNumber,
endColumn: endColumn,
});
let hoverText = model.getLineContent(lineNumber);
let textArr = textBeforeHover.split(".");
if (textArr.length >= 2) {
return {
// range: new monaco.Range(
// position.lineNumber,
// position.column,
// position.lineNumber,
// position.column
// ),
contents: [
{ value: CompoenentType },
{ value: explainValue.CompoenentMethodparam },
{ value: explainValue.CompoenentMethodExplain },
],
};
},
});
3.//书写光标后输入特殊字符提示
//去除默认
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowJs: true,
checkJs: true,
allowNonTsExtensions: true,
declaration: true,
allowUnreachableCode: false,
allowUnusedLabels: false,
noUnusedParameters: false,
strict: true,
strictFunctionTypes: true,
});
//自定义
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource.join("\n"));
if (this.components !== 0) {
//代码提示
this.provider = monaco.languages.registerCompletionItemProvider("javascript", {
triggerCharacters: ["."],
provideCompletionItems(model, position) {
const { lineNumber, column } = position;
// 光标前文本
let textBeforePointer = model.getValueInRange({
startLineNumber: lineNumber,
startColumn: 0,
endLineNumber: lineNumber,
endColumn: column,
});
_this.suggestions = [];
return {
suggestions: _this.suggestions,
};
},
});
}
4.//提示的标签上下是自动计算但其的层级很高不会被遮挡如果遮挡了其实是外层设置了overflw:hidden属性 把编辑器内容剪切了
鼠标悬停提示
使用方法,鼠标悬停提示
this.textBeforeHover2= monaco.languages.registerHoverProvider("javascript", {
provideHover: function (model, position) {
const value = _this.hoverExp(model, position)
return {
content:[
// { value: '**SOURCE**' },
// { value: CompoenentType },
{ value: '```js\n' + explainValue.CompoenentMethodparam + '\n```' },
{ value: explainValue.CompoenentMethodExplain },
// { value: explainValue.CompoenentMethodparam },
// { value: explainValue.CompoenentMethodExplain },
]
}
},
});
使用鼠标悬停其返回值content-value为提示的内容 可以为js html格式文件
当多次点击或悬浮会重复注册每个方法含有displios方法注销即可