前端工具 | JS编译器 Brace 使用教程
前言
开发人员一般是在电脑上面安装了IDE完成日常的开发任务,因为项目业务需求,用户想要在线写JS脚本,纯粹的字符串,很“费用户”。那就需要一个在线JS编译器,需要轻量级,好用,语法高亮,自动换行,语法提示灯功能。
Brace
- 轻量
- 自动提示
- 语法高亮
- 自动换行
- 序号
- 代码高亮
- 自动缩进
- 更换主题
- 搜索和替换支持正则表达式
- 代码折叠
老实说:就是因为monaco不好用才有这篇文章,现在一边重新用brace替换monaco,一边写使用文档。为什么要换,因为monaco太笨重了,我们使用场景很简单,不深度。严重拖延了打包的速度,增加包体大小!但是不能否认monaco的强大,当初也是万里挑一。
使用方法
- 官网
[官方文档](https://ace.c9.io/#nav=howto)
[在线demo](https://ace.c9.io/build/kitchen-sink.html)
[github](https://github.com/ajaxorg/ace-builds/blob/master/editor.html)
- 安装
yarn add brace | npm install brace
- 引入
var ace = require('brace')
require('brace/mode/javascript')
require('brace/theme/monokai')
require('brace/ext/language_tools') //很重要 自动补全 提示 必须要它
- 初始化
init(script) {
let self = this
var editor = ace.edit('javascript-editor')
editor.getSession().setMode('ace/mode/javascript') //语言
editor.setOptions({
// 默认:false
wrap: true, // 换行
autoScrollEditorIntoView: false, // 自动滚动编辑器视图
enableLiveAutocompletion: true, // 智能补全
enableBasicAutocompletion: true // 启用基本完成 不推荐使用
})
if (script) {
editor.setValue(script) //需要主动赋值
} else editor.setValue(this.code)
editor.getSession().on('change', function() {
self.$emit('update:code', editor.getValue()) //js 编辑器作为组件 传参给父组件
})
}
- html
<template>
<div id="javascript-editor"></div>
</template>
- css
我是给这个编辑器设置了宽高 以及一些样式的
-
运行效果
-
api
require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模板;引入theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值
editor.session.getTextRange(editor.getSelectionRange()); ##获取选择内容
editor.insert("Something cool"); ##在光标处插入
editor.selection.getCursor(); ##获取光标所在行或列
editor.gotoLine(lineNumber); ##跳转到行
editor.session.getLength(); ##获取总行数
editor.getSession().setTabSize(4); ##设置默认制表符的大小
editor.getSession().setUseSoftTabs(true); ##使用软标签.
document.getElementById('editor').style.fontSize='12px'; ##设置字体大小
editor.getSession().setUseWrapMode(true); ##设置代码折叠
editor.setHighlightActiveLine(false); ##设置高亮
editor.setShowPrintMargin(false); ##设置打印边距可见度
editor.setReadOnly(true); ##设置编辑器只读
- 事件
editor.getSession().on('change', function(e) {
// e.type, etc
}); //change 事件
editor.getSession().selection.on('changeSelection', function(e) {
}); //选择事件
editor.getSession().selection.on('changeCursor', function(e) {
}); //光标移动事件
芳妮酱总结
基本满足我的需求,再下一篇里面打包速度比对,性能分析(主要与Monaca)
下一篇是monaco的使用教程以及与brace 比对
FannieGirl原创文章,想了解更多前端内容,关注我的博客园
https://www.cnblogs.com/ifannie/
转载务必声明出处哦~~~~更多操作,扣我