Monaco Editor 常用 API 与 option

Monaco Editor 有很多版本

• 原版：Monaco Editor
  • 原版是纯 api 式用法，创建调用create，传入（language，option，width，height等等）来初始化，针对Vue，React的适配版本是组件式的用法，所以推荐使用组件式用法的包。
• Vue：monaco-editor-vue
• React：react-monaco-editor，@monaco-editor/react

其中，对于原版、monaco-editor-vue、react-monaco-editor这些，如果需要语法高亮，则需要引入对应的语言包，或者在webpack配置monaco-editor-webpack-plugin来实现。

本文章对@monaco-editor/react演示，应为它不需要做其他配置

Monaco Editor for React · use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

option

 options: {
   value: '', // 初始值
   foldingStrategy: 'indentation', // 代码可分小段折叠
   automaticLayout: true, // 自适应布局
   overviewRulerBorder: false, // 不要滚动条的边框
   autoClosingBrackets: true,
   tabSize: 2, // tab 缩进长度
   readOnly: true, // 只读, 不可编辑
   minimap: {
     enabled: false, // 不要小地图
   },

自动格式化

import React, { useRef } from 'react';
import MonacoEditor from '@monaco-editor/react';

const Main: React.FC = () => {
  const editorRef = useRef<any>();

  const handleValidate = (markers: Object) => {
   	// 没有错误时，格式化文档
    if (!Object.keys(markers).length) {
      editorRef.current?.getAction('editor.action.formatDocument').run();
    }
  };

  return (
    <div style={{ height: '200px' }}>
      <MonacoEditor
        language="json"
        value="// some comment"
        onValidate={handleValidate}
        onMount={editor => {
          editorRef.current = editor;
        }}
      />
    </div>
  );
};

export default Main;