创建代码编辑器monaco-editor

npm run install monaco-editor

//如果报错就安装
npm install --save-dev @babel/plugin-transform-class-static-block
//babel.config.js
module.exports = {
  plugins: ["@babel/plugin-transform-class-static-block"],
};

<template>
  <div style="width: 900px">
    <div ref="codeContainer" class="coder-editor"></div>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
  name: "",
  data() {
    return {
      msg: {
        name: 12,
        dep: "五车间",
        hobby: {
          eat: "Rice",
          play: "Vscode",
        },
      },
      monacoEditor: null,
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      if (this.$refs.codeContainer) {
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
          value: "", // 编辑器初始显示文字
          language: "javascript", // 语言
          automaticLayout: true, // 自动布局
          theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
          minimap: {
            // 关闭小地图
            enabled: false,
          },
          lineNumbers: "on", // 隐藏控制行号
          foldingStrategy: "indentation", // 代码可分小段折叠
          overviewRulerBorder: false, // 不要滚动条的边框
          scrollbar: {
            // 滚动条设置
            verticalScrollbarSize: 4, // 竖滚动条
            horizontalScrollbarSize: 6, // 横滚动条
          },
          readOnly: false, // 是否只读 Defaults to false | true
          cursorStyle: "line", // 光标样式
          fontSize: 15, // 字体大小
          tabSize: 2, // tab缩进长度
          autoIndent: true, // 自动布局
        });
      }
      // this.monacoEditor.setValue(JSON.stringify("ello"));//设置代码内容

      this.monacoEditor.onDidChangeModelContent(() => {
        // 代码内容
        console.log(this.monacoEditor.getValue());
        // console.log(monaco.editor.getModelMarkers({}));
        // monaco.editor.onDidChangeMarkers(([uri]) => {
        //   const markers = monaco.editor.getModelMarkers({ resource: uri });
        //   console.log(markers, "markers");
        //   // markers是返回的错误信息数组，可赋值给需要判断语法错误的关键词，如this.coderErrors = markers
        // });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.coder-editor {
  width: 100vw;
  text-align: start;
  height: 100vh;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
</style>