JSコードコンパイラMonacoの使い方

import * as monaco from 'monaco-editor' // パッケージは大きいですが、デモは実行できます // いくつかの提案機能をカスタマイズします const suggestions = [
  {
    ラベル: 'split_chinese',
    insertText: 'split_chinese(inputString,language);', // 書き込まれていない場合は表示されません。 。
    詳細：
      'inputString: 文字列を分割する必要があります\n' +
      '言語:\nCH_T：中国語（繁体字）\nCH_S：中国語（簡体字）\n HK_T：香港（繁体字）\nTW_T：台湾（繁体字）\n'
  },
  {
    ラベル: 'uuid',
    挿入テキスト: 'var uuid = uuid();',
    詳細: 'UUID を生成'
  },
  {
    ラベル: 'HashMap',
    挿入テキスト: 'var hashMap = new HashMap();',
    詳細: 'ハッシュオブジェクトの作成'
  }
]

マウント() {
    monaco.languages.registerCompletionItemProvider('JavaScript', {
      完了項目を提供する() {
        戻る {
          提案: 提案
        }
      },
      triggerCharacters: [' ', '.'] // プロンプトをトリガーする文字を記述します。複数指定できます。 })
    自分 = これ
    setTimeout(関数() {
      自己初期化()
    }, 50) //親コンポーネントがパラメータを渡さなかったため、子コンポーネントがレンダリングされました}
  
 // 初期化メソッド init(script) {
  自分 = これ
  if (スクリプト) this.code = スクリプト
  自己.$refs.container.innerHTML = ''
  var editor = monaco.editor.create(this.$refs.container, {
    値: this.code、
    言語: 'javascript',
    ミニマップ:
      有効: false
    },
    フォントサイズ: '12px',
    fixedOverflowWidgets: true // エディターのサイズを超えるウィジェットを表示するには、固定属性を使用します})
  editor.onDidChangeModelContent(関数() {
    self.$emit('update:code', editor.getValue()) //エディターのコンテンツの変更を監視し、そのコンテンツを親コンポーネントに渡すために使用されます})
}

<テンプレート>
  <div ref="コンテナ" class="モナコ"></div>
</テンプレート>

<スタイルスコープ>
.モナコ {
  幅: 95%;
  高さ: 400px;
  境界線: 1px 実線 #dcdfe6;
  テキスト配置: 左;
  右マージン: 20px;
  境界線の半径: 4px;
}
</スタイル>