react-monaco-editor使用

1.版本

"react": "^17.0.2",
"@craco/craco": "^6.2.0",

"monaco-editor": "0.27.0",
"monaco-editor-webpack-plugin": "4.1.2",

2.使用react-monaco-editor代码

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

function MEditor() {
    const editorRef = useRef();
    const [editorValue, seteditorValue] = useState('');
    return (
        <MonacoEditor
            width="100%"
            height="400"
            language="sql"
            theme="vs-dark"
            value={editorValue}
            onChange={v => seteditorValue(v)}
            ref={editorRef}
        />
    );
}

export default MEditor;

3.代码不高亮问题

我是使用create-react-app创建的工程，没有npm run eject的，使用craco（craco版本是："@craco/craco": "^6.2.0"）修改打包配置。

craco.config.js中，解决代码不高亮问题，需要增加配置如下（不相关内容已省略）：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    webpack: {
        plugins: {
            add: [
                // monaco-editor
                new MonacoWebpackPlugin({
                    languages: ['sql']
                })
            ]
        }
    }
};

4.踩坑

 1.不要直接用monaco-editor
 2.代码不高亮
    2.1.react-monaco-editor与monaco-editor-webpack-plugin版本不匹配：使用react-monaco-editor@0.27.0，monaco-editor-webpack-plugin@4.1.2
    2.2. 报错URIError: URI malformed
 at decodeURIComponent (<anonymous>)  ：craco配置有问题，按第3点配就好了
    2.3.install时警告has unmet peer dependencies：意思是a依赖b，但是没有安装b；但实际在node_modules中可以看到已经安装了b，所以这个安装警告可以忽略

参考链接：

(各种版本的都看了看)
https://www.npmjs.com/package/monaco-editor-webpack-plugin
https://www.npmjs.com/package/monaco-editor/v/0.27.0
https://www.npmjs.com/package/react-monaco-editor/v/0.45.0
https://blog.csdn.net/qq_37638969/article/details/115258638
https://www.npmjs.com/package/@craco/craco