注:mode为‘javascript’
问题一:由于是在el-dialog弹框中使用codemirror,代码提示框不出现
解决方法:由于代码提示框样式的z-index为10 小于el-dailog的z-index;所以可以给代码提示框设置样式
.CodeMirror-hints{
z-index: 3000 !important;
}
问题二:需检测js代码语法格式正确与否;所以安装了jshint
npm i jshint --save ;在main.js 中引入import jshint from “jshint”; window.JSHINT = jshint.JSHINT;
但发现检测提示信息弹框被el-dialog遮挡并且对于es6语法会出现⚠️警告
解决方法:1:给检测提示信息弹框设置样式
.CodeMirror-lint-tooltip{
z-index: 3000 !important;
}
2.解决不支持es6语法的提示
lint:{
esversion: 6
}//在codemirror option配置里 将lint:true改为如上
问题三:想在原有的js代码提示的基础上,新增一些自定义的代码提示
解决方法:
在codemirror option配置里,将hintOptions改为如下
hintOptions: {hint: this.handleShowHint, completeSingle: false},
handleShowHint方法如下
//代码提示处理
handleShowHint(){
const cmInstance = this.$refs.myCm.codemirror
let cursor = cmInstance.getCursor();// 得到光标
let curLine = cmInstance.getLine(cursor.line);// 得到行内容
const jshint = CodeMirror.hint.javascript(cmInstance,this.cmOptions)//获取js自带的提示(cmOptions是codemirror的option配置)
const anyhint = CodeMirror.hint.anyword(cmInstance,this.cmOptions)//获取anyword自带提示
const definehint = [
"callback()",
"unique()",
"many()",
"log"
] // 自定义提示
var word = /[\w$]+/;
var end = cursor.ch, start = end;
while (start && word.test(curLine.charAt(start - 1))) --start;
var curWord = start != end && curLine.slice(start, end);//此处为了解决防止curLine中有\t、空格而导致匹配不成功的情况
let found = [];
function maybeAdd(str) {
if (str.lastIndexOf(curWord, 0) == 0 && !arrayContains(found, str))
found.push(str);
}
forEach(definehint,maybeAdd);
function arrayContains(arr, item) {
if (!Array.prototype.indexOf) {
var i = arr.length;
while (i--) {
if (arr[i] === item) {
return true;
}
}
return false;
}
return arr.indexOf(item) != -1;
}
function forEach(arr, f) {
for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
}
const words = new Set([...found,...anyhint.list,...jshint.list])//合并所有提示
if(words.size >0){
return {
list: Array.from(words),
from: jshint.from,
to: jshint.to
}
}
}
}