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
本文介绍了如何在使用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警告,如果实际已安装相关模块,可忽略该警告。
995

被折叠的 条评论
为什么被折叠?



