pjs计算方式(JS代码编译器Monaco使用方法)
类别:编程学习 浏览量:2915
时间:2022-01-15 01:03:33 pjs计算方式
JS代码编译器Monaco使用方法前言我的需求是可以语法高亮、函数提示功能、自动换行、代码折叠
MonacoMonaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大。
The Monaco Editor is the code editor that powers VS Code.
使用方法官网
[官方文档](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> <li ref="container" class="monaco"></li> </template>
css
<style scoped> .monaco { width: 95%; height: 400px; border: 1px solid #dcdfe6; text-align: left; margin-right: 20px; border-radius: 4px; } </style>
运行效果
缺点
我的推翻了,不想再跑一下,代码还在就写一个demo。运行还是可以的(有客户使用但也反馈不好用,是我自己的锅,不配使用Monaco)真的很难用,特别是提示的功能,一般情况下是没有提示的。然后一个包很大,好像有3.9G(严重)。可能没有按需引入,但是不引入没有提示功能,自定义函数提示。还有webpack配置,来回折腾!
以上就是JS编译器Monaco使用教程的详细内容,更多关于JS编译器Monaco的资料请关注开心学习网其它相关文章!
您可能感兴趣
- MVC中JSON字符长度超出限制
- nodejs怎么查看对象的全部属性(浅谈nodejs中创建cluster)
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js中parent和opener的区别
- js基础入门到高级教程(浅谈如何循序渐进的学好JS)
- js音乐脚本怎么做(js实现网页音乐播放器)
- js怎么防抖(JS防抖节流函数的实现与使用场景)
- js实现string.format 字符串占位符
- jsp实现短信验证码(手动实现js短信验证码输入框)
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)
- 通过js获取Url的参数值
- sqlserver常见函数(SQL Server之JSON 函数详解)
- Extjs updateProgress进度条的应用
- js三级联动说明(基于JavaScript实现省市联动效果)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
热门推荐
- 安装phpstudy注意哪些问题(phpstudy怎么卸载?phpstudy卸载图文教程)
- nginx负载均衡原理3种(Nginx负载均衡以及动静分离的原理与配置)
- pandas统计多行数据(pandas去重复行并分类汇总的实现方法)
- 手动设置linuxdns服务器(云服务器Linux系统配置DNS方法)
- linux idea怎么激活(在IDEA中使用Linux命令的操作方法)
- docker部署go项目(Gogs+Jenkins+Docker 自动化部署.NetCore的方法步骤)
- vue组件详解(Vue的方法和属性案例详解)
- sqlserver小结(基于sqlserver的四种分页方式总结)
- 如何用python画函数图(使用python绘制二元函数图像的实例)
- SQL Server 数据库自动备份