codemirror是一个代码编译器,vue、react都有相应的codemirror,目录及用法都是一样的,也比较容易上手,vue中配置还是相应的比较简单,主要可以实现匹配括号,以及代码折叠的效果,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, //括号匹配
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目录的功能:
网友评论