Monaco Editor 集成指南：从配置到优化

1 在Umi中使用monaco-editor

和在Webpack中加在JS，CSS等一样，使用monaco-editor也需要专门的loader------monaco-editor-webpack-plugin。如果是UMI的项目，则配置方式如下：

//config.ts

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

export default defineConfig({
  //...其他配置
  chainWebpack(memo, args) {
    return memo.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        languages: ['yaml','json','html','javascript','typescript']
      }
    ]);
  },
})

2 自定义monaco资源地址 （重要）

monaco本身的资源包比较大，将 monaco-editor 的静态资源托管到企业内部CDN，利用CDN本身的缓存特性，提升编辑器加载速度，同时避免依赖外部CDN的网络波动。

import Editor, { loader } from '@monaco-editor/react';

loader.config({
  paths: {
    // vs:'https://cdn.jsdelivr.net/npm/@monaco-editor/react@4.6.0/dist/index.min.js',
    vs: 'https://XXX/monaco-editor-X.X./min/vs',
  },
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn',
    },
  },
}); 



3 优先使用原字符串传参 （重要）

在使用Monaco 设置JSON值时，从编辑器获取的数据格式类似

"[\n    {\n        "ts": "2016-04",\n        "value": 1000.10,\n        "name": "2016"\n    }]"

前端使用JSON解析之后，会改变部分输入数据的值，比如 1000.10 会变成 1000.0等









对于精度要求比较高的场景，就容易引发BUG，对于需要设置函数，而且不需要使用严格JSON格式（KEY双引号，结尾无逗号）的场景，可以使用函数变量

new Function(`return ${optionStr}`)()

比如Echart的编辑器设置就是使用的这种方式





4 格式美化

JS中的JSON变量在设置初始化值时，调用Monaco Editor自身的格式化不能自动换行，结合prettier和babel 处理格式。

import prettier from 'prettier/standalone';
import parserBabel from 'prettier/parser-babel';
    
    const formatData = 
        (prettier.format(JSON.stringify({
            data:"123",
            name:"测试"
        }), {
        parser: 'json',
        plugins: [parserBabel],
        tabWidth: 4,
    }))