react-monaco-editor使用

本文介绍了如何在使用create-react-app搭建的项目中,通过craco配置解决Monaco Editor代码高亮不显示的问题。首先,确保react-monaco-editor和monaco-editor-webpack-plugin版本匹配,如0.27.0和4.1.2。然后,在craco.config.js中引入MonacoWebpackPlugin并配置支持的编程语言。在遇到URIError: URI malformed错误时,检查并修正webpack配置。最后,对于npm install时出现的unmet peer dependencies警告,如果实际已安装相关模块,可忽略该警告。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值