vue+el-dialog中使用codemirror遇到的问题，没有代码提示了

﹏ヽ暗。殇╰゛Y 2023-10-09 23:38 20阅读 0赞

![be81802493d1468397aeb187ae0b2fd6.png][]

## 问题一：在el-dialog弹框中使用codemirror,代码提示框不出现 ##

解决方法：由于代码提示框样式的z-index为10 小于el-dailog的z-index；所以可以给代码提示框设置样式 ，注意如果用的scss样式，记得不要添加scope属性，不然可能不生效，或者使用vue的样式侵入

问题二：需检测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
    					}
    				}
    			}
    	    }

**问题四**：实现快捷键对js代码格式化

//安装js代码格式化插件
    npm i js-beautify --save
    
    //在需要的页面引入
    import {js_beautify} from 'js-beautify';
    
    //
    extraKeys: {
    	"Ctrl-Alt-L":(cm)=>{//自定义格式化代码的快捷键为“Ctrl-Alt-L”
    		this.editorValue = js_beautify(cm.getValue());
    		this.$emit('onChangeCode',js_beautify(cm.getValue()));
    	}
    },

[be81802493d1468397aeb187ae0b2fd6.png]: https://img-blog.csdnimg.cn/be81802493d1468397aeb187ae0b2fd6.png