驱动VS Code的monaco-editor 使用及常用配置与

Monaco编辑器是驱动VS Code的代码编辑器。它采用MIT许可证，并支持Edge、Chrome、Firefox、Safari和Opera浏览器。Monaco编辑器不支持移动浏览器或移动Web框架。

monaco 是一个开源的编辑器插件，这个编辑器功能十分强大，可以让你在浏览器中轻松的进行代码编辑。许多知名网站都用到了这个编辑器插件，如果你的网站也有使用代码编辑器的需求，强烈推荐你使用一下monaco。当然，也有其他很多类似的编辑器插件，但 monaco 以其强大而完备的功能独占鳌头。
虽然 monaco 十分强大，与之伴随而来的是它的包也比较大，当我们去使用它的时候，会给我们的网站带来一些性能方面的影响，目前现有的关于 monaco 的使用的文章也比较少，本篇文章介绍一下笔者在对 monaco 使用方面的一些优化尝试与建议。

1.安装

npm install monaco-editor

2.在 vue.config.js 中配置

  config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss', 'shell', 'redis', 'sql', 'typescript', 'xml'],
        // ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml'],
        features: ['format', 'find', 'contextmenu', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'documentSymbols']
        // ['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlineHints', 'inspectTokens', 'linesOperations', 'linkedEditing', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
      }
    ]);

组件

<template>
  <div>
    <div id="monacoEditor" ref="editorContainer" class="monaco-editor"></div>
  </div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {
    
  props: {
    strValue: {
      type: String,
      default: ''
    },
  },

  data() {
    return { };
  },

  watch: {
    strValue(val) {
      const containerDom = this.$refs.editorContainer;
      if (containerDom) {
        containerDom.style.height = '0px';
        this.editor.dispose();
        this.initEditor();
      }
    }
  },

  mounted() {
    this.initEditor();
  },

  methods: {
    initEditor() {
      this.editor = monaco.editor.create(this.$refs.editorContainer, {
        value: this.strValue,
        language: 'json',
        // 行号
        lineNumbers: true,
        // 换行
        wordWrap: true,
        // 只读
        readOnly: true,
        fontSize: 12,
        lineHeight: 24,
        minimap: { enabled: false },
        // 设置是否启用自动布局，使编辑器在容器尺寸变化时自动调整大小。
        automaticLayout: true,
        // vs：默认主题，亮色风格。
        // vs-dark：深色风格的主题。
        // hc-black：高对比度的黑色主题。
        theme: 'vs',
        renderLineHighlight: 'none',
        // 双击菜单
        contextmenu: false,
        // 辅助对齐线条
        renderIndentGuides: false,
        // 隐藏滚动条
        scrollbar: {
          vertical: 'hidden',
          horizontal: 'hidden'
        },
        // 鼠标悬浮提示
        hover: {
          enabled: false
        },
        // 滚动条
        scrollBeyondLastLine: true,
        // 禁用缩略块
        folding: false 
      });

      this.editor.onDidChangeModelContent(() => {
        this.resetParentHeight();
      });
      this.resetParentHeight();
      // 禁用键盘按键
      this.editor.onKeyDown((event) => {
        event.stopPropagation();
        event.preventDefault();
      });
    },

    resetParentHeight() {
      var contentHeight = this.editor.getContentHeight();
      const containerDom = this.$refs.editorContainer;
      if (containerDom) {
        containerDom.style.height = contentHeight + 'px';
      }
    }
  }
};
</script>

<style lang="scss" >
.monaco-editor {
  height:0px;
  pointer-events: none;
  background-color: #F9F9F9;
  border: 1px solid #E8E8E8;
}

.monaco-editor .cursor {
  opacity: 0 !important;
}

.view-line::selection,
.monaco-editor .view-line span::selection {
  background-color: transparent;
}

// 代码块
.monaco-editor .view-lines {
  background: #F9F9F9 !important;
  cursor: default !important;
}

.monaco-editor .overflow-guard,
.monaco-editor .monaco-scrollable-element {
  touch-action: none !important;
}

// 高亮
.highlight-text {
    background-color: red !important;
    color: #fff  !important;
}

// 序号块
.monaco-editor .margin {
  width: 40px !important;
  background-color: #f0f0f0 !important;
}

.monaco-editor .margin .line-numbers {
  width: 40px !important;
  text-align: center !important;
  /* 自定义字体颜色 */
  color: #B5BFC9 !important; 
}

.monaco-editor .margin .margin-view-overlays{
  width: 40px !important;
}

.monaco-editor  .monaco-scrollable-element{
  left: 40px !important;
}

.monaco-editor .overflow-guard{
  background-color: #F9F9F9 !important;
}

.monaco-editor .margin {
 /* 序号区域右侧间隔 */
  margin-right: 20px; 
}

.monaco-editor .monaco-scrollable-element {
 /* 代码内容区域左侧间隔 */
  margin-left: 20px; 
}

</style>

image.png
image.png