前言

开发人员一般是在电脑上面安装了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 比对

前端工具 | JS编译器 Brace 使用教程的更多相关文章

  1. 前端工具 | JS编译器Monaco使用教程

    前言 我的需求是可以语法高亮.函数提示功能.自动换行.代码折叠 Monaco Monaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大. The Monaco Editor ...

  2. 【前端工具】 在 Windows 下安装 GruntJS——教程(译)

    在你安装 Grunt.js 之前你需要先安装 Node.js.对于本教程而言,我已经安装好了 node.js v0.10.0. 我将要安装 Grunt.js v0.4.1.警告:如果你已经安装了 Gr ...

  3. 前端工具WebStorm好在哪里?(带详细破解教程)

    前端工具WebStorm好在哪里?(带详细破解教程) 一.总结 1.WebStorm对html特别是HTML5和JS的智能提示简直堪称大神. 2.WebStorm足够的轻量级. 3.WebStorm对 ...

  4. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  5. 前端工具之WebPack解密--使用

    接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...

  6. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  7. 转:asm.js 和 Emscripten 入门教程

    转:http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html asm.js 和 Emscripten 入门教程 作者: 阮一峰 日期:  ...

  8. 前端工具之-- Sublime

    开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...

  9. 覆盖率测试工具gcov的前端工具_LCOV

    http://my.oschina.net/alphajay/blog/33725 1.Gcov是进行代码运行的覆盖率统计的工具,它随着gcc的发布一起发布的,它的使用也很简单,需要在编译和链接的时候 ...

随机推荐

  1. Blog总结02(4~6次作业总结)

    Blog总结02(4~6次作业总结) 1.前言 (1)题目集04共有三道题目,第一题难度较大,第二题和第三题难度适中,第一题考察的知识点是 Java 中的字符串处理类以及正则表达式对输入字符串数据进行 ...

  2. Fastjson反序列化漏洞复现

    Fastjson反序列化漏洞复现 0x00 前言 对Fastjson反序列化漏洞进行复现. 0x01 漏洞环境 靶机环境:vulhub-fastjson-1.2.24 ip:172.16.10.18 ...

  3. PHP学员分享:126个常用的正则表达式分享

    PHP学员分享:126个常用的正则表达式分享 电子邮件:/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/变量:/[a-zA-Z_\x7f-\xff][a-z ...

  4. 【JDK8】JDK 8 中Stream流中的去重的方法

    JDK 8 中Stream流中去重的方法 1.简单的去重,可以使用distinct()方法去重,该方法是通过比较equals和hashcode值去去重, 2.复杂的去重, 例如,在一个JavaBean ...

  5. hdu4882 水贪心

    题意:      给你n个任务,每个任务有两个权值,t[i],b[i],前面的是完成任务所需时间,后面的那个是个参数,每个任务完成的代价是完成当前任务总时间(之前的+现在的) sumt * b[i], ...

  6. 从苏宁电器到卡巴斯基第29篇:难忘的三年硕士时光 VII

    我们可能无家可归 那天晚上和导师道别后,我们几个还聚在一起开了一个小会.当时大家觉得最坏的情况就是学院不肯让步,不能满足我们导师提出的条件.那么这样的话,我们几个只能够重新找导师了.而我们数媒专业里面 ...

  7. 如何以最简单的方式安装 KALI 渗透测试框架系统

    0x01 第一步下载 KALI 百度搜索 KALI 官网,找到下载区,我选的是 64 位标准版,但是推荐下载 32 位(功能貌似更全) 这个为下载后的 iso 镜像文件 0x02 第二步打开虚拟机,配 ...

  8. UVA10125和集

    题意:       给你一个集合,让你从里面找到4个元素,使得a+b+c=d,并且找到最大的d. 思路:       我们可以吧问题拆开,使得a+b=d-c,这样就能O(n^2)枚举a+b记录出现的和 ...

  9. Windows核心编程 第十七章 -内存映射文件(下)

    17.3 使用内存映射文件 若要使用内存映射文件,必须执行下列操作步骤: 1) 创建或打开一个文件内核对象,该对象用于标识磁盘上你想用作内存映射文件的文件. 2) 创建一个文件映射内核对象,告诉系统该 ...

  10. 【实用小技巧】freemarker模板中文乱码问题解决

    freemarker简单模板如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...