monaco editor

vite 环境

{
  "name": "vite-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^1.3.2",
    "monaco-editor": "^0.33.0",
    "monaco-editor-auto-typings": "^0.4.2",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@types/node": "^18.0.3",
    "@vitejs/plugin-vue": "^2.3.3",
    "eval5": "^1.4.7",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vite-plugin-monaco-editor": "^1.1.0",
    "vue-tsc": "^0.34.7"
  }
}

• vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import monacoEditorPlugin from "vite-plugin-monaco-editor"

export default defineConfig({
  plugins: [
    monacoEditorPlugin({
    }),
    vue(),
  ],
})

• vue

<script lang="ts">
import {defineComponent, onMounted, onUnmounted, ref, watchEffect} from "vue";
import ReactHeader from "./Header";
import * as monaco from 'monaco-editor';
import BaseMixins from "./mixins/BaseMixins";

export default defineComponent({
  mixins: [BaseMixins],
  setup() {
    return {
      code: ref(''),
      editor: {},
      LowcodeComponent: ''
    }
  },
  mounted() {
    monaco.languages.typescript.typescriptDefaults.addExtraLib('./func.ts')
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2016,
      allowNonTsExtensions: true,
      module: monaco.languages.typescript.ModuleKind.CommonJS,
      noEmit: true,
      typeRoots: ["node_modules/@types"],
      importHelpers: true,
      strict: false
    });

    monaco.languages.typescript.typescriptDefaults.addExtraLib(
        `declare module '/test/test1'{
        export class test1{
            constructor();
            show(): void;
        }
    }
    `
    );
    this.editor = monaco.editor.create(document.getElementById('container'), {
      value: `this.LowcodeComponent = {
  setup() {
    return  {
    }
  },
  methods: {
    add() {
      this.getAction()
    }
  }
};
`,
      language: 'javascript',
    });

  },
  components: {
    'Header': ReactHeader,
  },
  methods: {
    getCode() {

      let code = this.editor.getValue()
      console.log(this.editor)
      eval(code)
      this.LowcodeComponent.methods.add.bind(this)()
    },
  }
})
</script>

<template>
  <button @click="getCode">get code</button>
  <div style="height: 1000px">
    <div id="container" style="height: 900px"></div>
  </div>
</template>

自定义语言高亮

https://juejin.cn/post/6844903736867831822