Monaco Editor 是微软开源，运行在浏览器环境中

自己前期在使用这个插件的安转是默认（monaco-editor，monaco-editor-webpack-plugin），最高版本的 ，运行的时候就是报错，一直报错node_moudle里面解析错误，搞了半天不晓得什么原因，（网上很多文章也没说要注意版本对应，官方文档真的难的看） 最后发现是这两个最高版本对应问题 注意 使用这两个插件包一定注意版本对应  版本最好使用我下面给出，这个插件包还是开发版本
已经附上对应版本号 

1.我是在vue中项目使用的
首先安装 monaco-editor 插件包 这个就通过npm或者cnpm安装  npm install monaco-editor
 "monaco-editor": "^0.25.2",
 在vue项目使用这个monaco-editor还要安装一个 monaco-editor-webpack-plugin 可以自动帮你把语言注入进来  npm install monaco-editor-webpack-plugin -S  
    "monaco-editor-webpack-plugin": "^4.2.0",

<template>
<div :ref="container" class="monaco-editor" :style="`width:100%;height:calc(100% - 100px);`"></div>
</template>

    vue.config.js中 
    注入 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
    module.exports = {
    // 部署应用时的基本URL
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist', // 打包位置
    assetsDir: 'assets', // 打包后静态资源位置
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@v", resolve("src/views"))
            .set("@c", resolve("src/components"))
            .set("@u", resolve("src/utils"))
            .set("@a", resolve("src/assets")); /* 别名配置 */
        config.optimization.runtimeChunk("single");
        //这个这个哈哈哈
        config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
            {
              languages: ['json', 'javascript', 'html', 'xml']
            }
          ])
    },
};
// import * as monaco from 'monaco-editor' 这个导入浏览器控制台会有报错
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
// import '@/components/monaco-editor/basic-languages/javascript/javascript.js'
// import '@/components/monaco-editor/basic-languages/javascript'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' // 引入查找控件
export default {
  props: {
    opts: {
      type: Object,
      default: function () {
        return {
          fontSize: 18, //字体大小
          language: "javascript",
          theme: 'vs-dark', // vs, hc-black, or vs-dark
          readOnly: false, // 是否为只读模式
        };
      },
    },
    styleMonaco:{
      type:Object,
      default:{
        height:"800px",
        width:"800px"
      }
    },
  },
  data() {
    return {
      // 主要配置 这里的配置只是 默认基础配置 , 一般在父组件的 data 里配置就可以了  ,子组件这里不配置都可以
      defaultOpts: {
        folding: true, // 是否启用代码折叠
        links: true, // 是否点击链接
        overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
        renderLineHighlight: 'gutter', // 当前行突出显示方式
        roundedSelection: false, // 选区是否有圆角
        scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
        selectOnLineNumbers: true,
        cursorStyle: "line", //光标样式
        automaticLayout: false, //自动布局
        glyphMargin: true, //字形边缘
        useTabStops: false,
        autoIndent: true, //自动布局
        copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
        autoClosingBrackets: "always", // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
        autoClosingDelete: "always", // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
        autoClosingOvertype: "always", // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
        autoClosingQuotes: "always", // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
      },
      editorOptions:null,//和并固定参数和可选参数
      monacoEditor:null,//初始化实例
      container: 'container'
    }
  },
  //监听一些常用的属性值需要改变，需要重新初始化容器
  watch: {
    opts: {
      handler(n) {
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    // this.init()
  },
  methods: {
    init() {
      console.log(this.$refs.container);
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = ''
      this.editorOptions = Object.assign(this.defaultOpts, this.opts)
      this.monacoEditor = monaco.editor.create(this.$refs.container, this.editorOptions)
      // 编辑器内容发生改变时触发
      // this.monacoEditor.onDidChangeModelContent(() => {
      //   this.$emit('change', this.monacoEditor.getValue())
      // })
      // this.monacoEditor.onKeyDown((event) => { //禁止复制粘贴
      //   const {
      //     keyCode,
      //     ctrlKey,
      //     metaKey
      //   } = event;
      //   if ((keyCode === 33 || keyCode === 52) && (metaKey || ctrlKey)) {
      //     console.log(3333);
      //     event.preventDefault();
      //   }
      // });
    },
    // 供父组件调用手动获取值
    getVal() {
      return this.monacoEditor.getValue()
    },
  }
}

//父组件样式
 <div class="preCode">
        <div class="title">默认代码</div>
        <div class="formatSelect">
          <el-form :model="ruleForm1" ref="ruleForm" :inline="true" class="demo-ruleForm">
            <el-form-item label="Language" :label-width="formLabelWidth">
              <el-input v-model="ruleForm1.language" autocomplete="off" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="Theme" :label-width="formLabelWidth">
              <el-select v-model="ruleForm1.theme" placeholder="请选择主题" @change="themeChange">
                <el-option :label="item.label" v-for="item in themeOption " :key="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <CodeEditor ref="asdasd" :opts="monacoData" key="index2"></CodeEditor>
      </div>

//父组件调用
import CodeEditor from "@/components/CodeEditor";
export default {
  data() {
    return {
      outLineContent: "",
      monacoData: {
        fontSize: 20, //字体大小
        language: "html",
        theme: "vs-dark", // vs, hc-black, or vs-dark
        readOnly: false, // 是否为只读模式
      },
      height: window.innerHeight  + 'px',
      formLabelWidth: "120px",
      ruleForm: {
        theme: "vs-dark",
        language: "javascript",
      },
      ruleForm1: {
        theme: "vs",
        language: "html",
      },
      themeOption: [{
          value: "vs",
          label: "浅色模式",
        },
        {
          value: "vs-dark",
          label: "深色模式",
        },
        {
          value: "hc-black",
          label: "高对比模式",
        },
      ],
    };
  },
  computed: {
    resizeHeight() {
      let style = {
        height: this.height
      }
      return style
    }
  },
  components: {
    CodeEditor,
    Editor,
  },
  mounted() {
    let _this = this
    window.addEventListener(
      'resize',
      () => {
        if (document.getElementById('javaModuleId')) {
          _this.height = window.innerHeight  + 'px'
        }
      },
      false
    )
    
    
  },
  methods: {
    themeChange(val) {
      this.monacoData.theme = val;
      // this.$refs.CodeEditorId.getMonaco.setTheme(val);
    },
  },
};

      .preCode {
        width: 100% ;
        height: 500px;

        .title {
          font-weight: bold;
          color: #333333;
          font-size: 15px;
          margin-right: 11px;
          margin: 20px 0;
        }

        // overflow-x: hidden;
        .formatSelect {
          /deep/.el-form {
            width: 100%;
          }
        }
      }

monaco editor 汉化 请参考 https://juejin.cn/post/6965675865673826335
Monaco Editor 使用指南 请参考 https://juejin.cn/post/6844904198836846599