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的资料请关注开心学习网其它相关文章!
您可能感兴趣
- nodejs架构解析(详解NodeJS模块化)
- js实现自动轮播(原生js封装无缝轮播功能)
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- js实现图片旋转
- js中拼接字符串的几种方法
- js 出现cannot find function(Fatal error: Call to a member function read on a non-object in 错误解决方法)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- python class转json(Python对象转换为json的方法步骤)
- laravel 数据表格(Laravel自定义 封装便捷返回Json数据格式的引用方法)
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- mysqljson字段查询(Mysql 查询JSON结果的相关函数汇总)
- js RegExp用法
- auto.js源码分享(最新热门脚本Autojs源码分享)
- python操作json库(Python将json文件写入ES数据库的方法)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
- 鞠婧祎和杨紫两种风格的女生,你心里谁比较美(鞠婧祎和杨紫两种风格的女生)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
热门推荐
- python生成密码字典教程(Python利用字典破解WIFI密码的方法)
- 怎样在python中散点图(python使用Plotly绘图工具绘制散点图、线形图)
- dedecms频道封面不能修改内容(dedecms按栏目名首字母/数字排序输出的实现方法)
- ftp服务器如何设置指定用户访问(FTP 服务器关于权限的问题)
- html5移动app开发实战(html5启动原生APP总结)
- MYSQL中常用的强制性操作
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- css3背景制作(纯CSS3实现Material Design效果)
- ftp主动模式和被动模式设置(FTP主动模式和被动模式区别详解)