这篇文章给大家分享的是有关JS代码编译器中Monaco怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我的需求是可以语法高亮、函数提示功能、自动换行、代码折叠
Monaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大。
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>
<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怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。