如何正确使用Monaco作为JS代码编译器？

本文共计657个文字，预计阅读时间需要3分钟。

前言+我的需求是可以语法高亮、函数提示、自动换行、代码折叠+Monaco+Monaco是微软家的，支持的语种很多，还有缩略地图，有时候提示不好用然后体积很大。+The Monaco Editor is the c#“

前言

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

Monaco

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

使用方法官网

[官方文档](microsoft.github.io/monaco-editor/index.html)
[在线demo](github.com/Microsoft/monaco-editor-samples)
[github](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>

运行效果

缺点

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

以上就是JS编译器Monaco使用教程的详细内容，更多关于JS编译器Monaco的资料请关注自由互联其它相关文章！