前端工具 | 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') //很重要 自动补全 提示 必须要它

初始化

initscript) {
  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.setValuescript) //需要主动赋值
  } else editor.setValuethis.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.getTextRangeeditor.getSelectionRange)); ##获取选择内容
editor.insert"Something cool"); ##在光标处插入
editor.selection.getCursor); ##获取光标所在行或列
editor.gotoLinelineNumber); ##跳转到行
editor.session.getLength); ##获取总行数
editor.getSession).setTabSize4); ##设置默认制表符的大小
editor.getSession).setUseSoftTabstrue); ##使用软标签.
document.getElementById'editor').style.fontSize='12px';  ##设置字体大小
editor.getSession).setUseWrapModetrue); ##设置代码折叠
editor.setHighlightActiveLinefalse); ##设置高亮
editor.setShowPrintMarginfalse); ##设置打印边距可见度
editor.setReadOnlytrue); ##设置编辑器只读

事件

editor.getSession).on'change', functione) {  
  // e.type, etc  
});  //change 事件

editor.getSession).selection.on'changeSelection', functione) {  
});  //选择事件

editor.getSession).selection.on'changeCursor', functione) {  
});  //光标移动事件

芳妮酱总结

基本满足我的需求，再下一篇里面打包速度比对，性能分析（主要与Monaca）
下一篇是monaco的使用教程以及与brace 比对

FannieGirl原创文章,想了解更多前端内容，关注我的博客园
https://www.cnblogs.com/ifannie/
转载务必声明出处哦~~~~更多操作，扣我