您的位置:首页 > 编程学习 > > 正文

pjs计算方式(JS代码编译器Monaco使用方法)

更多 时间:2022-01-15 01:03:33 类别:编程学习 浏览量:2915

pjs计算方式

JS代码编译器Monaco使用方法前言

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

Monaco

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

pjs计算方式(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>
      <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>
    
  • 运行效果

    pjs计算方式(JS代码编译器Monaco使用方法)

    缺点

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

    以上就是JS编译器Monaco使用教程的详细内容,更多关于JS编译器Monaco的资料请关注开心学习网其它相关文章!

    标签:JS 编译器 Monaco