JS代碼編譯器Monaco使用方法

更新時(shí)間：2021年06月11日 10:47:35 作者：FannieGirl

Monaco是微軟家的，支持的語(yǔ)言很多，還有縮略地圖，有時(shí)候提示不好用然后包體很大的問(wèn)題，但是這是極少數(shù)，今天小編給大家分享JS編譯器Monaco使用教程，感興趣的朋友一起看看吧

前言

我的需求是可以語(yǔ)法高亮、函數(shù)提示功能、自動(dòng)換行、代碼折疊

Monaco

Monaco是微軟家的，支持的語(yǔ)言很多，還有縮略地圖，有時(shí)候提示不好用然后包體很大。
The Monaco Editor is the code editor that powers VS Code.

使用方法官網(wǎng)

[官方文檔](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可以跑起來(lái)

//自定義一些提示函數(shù)
const suggestions = [
  {
    label: 'split_chinese',
    insertText: 'split_chinese(inputString,language);', // 不寫(xiě)的時(shí)候不展示。。
    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: [' ', '.'] // 寫(xiě)觸發(fā)提示的字符，可以有多個(gè)
    })
    let self = this
    setTimeout(function () {
      self.init()
    }, 50) //因?yàn)楦附M件還未傳參 子組件已經(jīng)渲染
  }
  
 //初始化方法
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()) //用來(lái)監(jiān)聽(tīng)編輯器內(nèi)容變化，將內(nèi)容傳給父組件
  })
}

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>

運(yùn)行效果

缺點(diǎn)

我的推翻了，不想再跑一下，代碼還在就寫(xiě)一個(gè)demo。運(yùn)行還是可以的（有客戶使用但也反饋不好用，是我自己的鍋，不配使用Monaco）真的很難用，特別是提示的功能，一般情況下是沒(méi)有提示的。然后一個(gè)包很大，好像有3.9G（嚴(yán)重）?？赡軟](méi)有按需引入，但是不引入沒(méi)有提示功能，自定義函數(shù)提示。還有webpack配置，來(lái)回折騰！

以上就是JS編譯器Monaco使用教程的詳細(xì)內(nèi)容，更多關(guān)于JS編譯器Monaco的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: