JS代码编译器Monaco使用方法


Posted in Javascript onJune 11, 2021

前言

我的需求是可以语法高亮、函数提示功能、自动换行、代码折叠

Monaco

Monaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大。
The Monaco Editor is the code editor that powers VS Code.

JS代码编译器Monaco使用方法

使用方法官网

[官方文档](https://microsoft.github.io/monaco-editor/index.html)
[在线demo](https://github.com/Microsoft/monaco-editor-samples)
[github](https://github.com/Microsoft/monaco-editor)

安装

yarn add monaco-editor | npm install monaco-editor

引入

import * as monaco from 'monaco-editor' // 包体很大了 但是demo可以跑起来

//自定义一些提示函数
const suggestions = [
  {
    label: 'split_chinese',
    insertText: 'split_chinese(inputString,language);', // 不写的时候不展示。。
    detail:
      'inputString:need split string\n' +
      'language:\nCH_T:traditional Chinese\nCH_S:Chinese Simplified\n HK_T:Hong Kong Traditional\nTW_T:Taiwan Traditional\n'
  },
  {
    label: 'uuid',
    insertText: 'var uuid = uuid();',
    detail: 'generate uuid'
  },
  {
    label: 'HashMap',
    insertText: 'var hashMap = new HashMap();',
    detail: 'create hash object'
  }
]

初始化

mounted() {
    monaco.languages.registerCompletionItemProvider('JavaScript', {
      provideCompletionItems() {
        return {
          suggestions: suggestions
        }
      },
      triggerCharacters: [' ', '.'] // 写触发提示的字符,可以有多个
    })
    let self = this
    setTimeout(function () {
      self.init()
    }, 50) //因为父组件还未传参 子组件已经渲染
  }
  
 //初始化方法
init(script) {
  let self = this
  if (script) this.code = script
  self.$refs.container.innerHTML = ''
  var editor = monaco.editor.create(this.$refs.container, {
    value: this.code,
    language: 'javascript',
    minimap: {
      enabled: false
    },
    fontSize: '12px',
    fixedOverflowWidgets: true // 超出编辑器大小的使用fixed属性显示
  })
  editor.onDidChangeModelContent(function () {
    self.$emit('update:code', editor.getValue()) //用来监听编辑器内容变化,将内容传给父组件
  })
}

html

<template>
  <div ref="container" class="monaco"></div>
</template>

css

<style scoped>
.monaco {
  width: 95%;
  height: 400px;
  border: 1px solid #dcdfe6;
  text-align: left;
  margin-right: 20px;
  border-radius: 4px;
}
</style>

 

运行效果

JS代码编译器Monaco使用方法

缺点

我的推翻了,不想再跑一下,代码还在就写一个demo。运行还是可以的(有客户使用但也反馈不好用,是我自己的锅,不配使用Monaco)真的很难用,特别是提示的功能,一般情况下是没有提示的。然后一个包很大,好像有3.9G(严重)。可能没有按需引入,但是不引入没有提示功能,自定义函数提示。还有webpack配置,来回折腾!

以上就是JS编译器Monaco使用教程的详细内容,更多关于JS编译器Monaco的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
一文搞懂redux在react中的初步用法
Jun 09 #Javascript
深入详解JS函数的柯里化
Jun 09 #Javascript
javascript canvas实现雨滴效果
用JS实现飞机大战小游戏
Jun 09 #Javascript
You might like
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
大学生先进事迹材料
2014/02/16 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
2014年班组长工作总结
2014/11/20 职场文书
阿凡达观后感
2015/06/10 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers