前端工具 | 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 比對