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 技巧大全(新手入门篇)
May 12 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
JS中的作用域链
Mar 01 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
js实现简易拖拽的示例
Oct 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
实现树状结构的两种方法
2006/10/09 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
javascript时区函数介绍
2012/09/14 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
python基于ID3思想的决策树
2018/01/03 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python脚本第一行如何写
2020/08/30 Python
python3中布局背景颜色代码分析
2020/12/01 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
篮球比赛口号
2014/06/10 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
js不常见操作运算符总结
2021/11/20 Javascript