codemirror是一個(gè)代碼編譯器榜轿，vue亥贸、react都有相應(yīng)的codemirror,目錄及用法都是一樣的器虾，也比較容易上手讯嫂，vue中配置還是相應(yīng)的比較簡單，主要可以實(shí)現(xiàn)匹配括號(hào)兆沙，以及代碼折疊的效果欧芽，vue配置信息：
cmOptions: {
? ? ? ? ? tabSize: 4,
? ? ? ? ? mode: { name: 'javascript', json: true },
? ? ? ? ? theme:"eclipse",
? ? ? ? ? styleActiveLine: true,
? ? ? ? ? lineNumbers: true,
? ? ? ? ? line: true,
? ? ? ? ? foldgutter: true,
? ? ? ? ? gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],
? ? ? ? ? lineWrapping: true,?//代碼折疊
? ? ? ? ? ? foldGutter: true,
? ? ? ? ? ? matchBrackets: true,??//括號(hào)匹配
? ? ? ? ? ? autoCloseBrackets: true
? ? ? ? }
以上的配置引了以下的包：
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/eclipse.css';
import "codemirror/addon/fold/foldgutter.css"
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import "codemirror/addon/fold/brace-fold";
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/selection/active-line';
import 'codemirror/addon/edit/closeBrackets';
import 'codemirror/addon/edit/matchBrackets';
codemirror目錄的功能：
