安装 React-Ace

首先，你需要安装 react-ace 和 ace-builds（它包含 Ace Editor 的核心文件）：

pnpm install react-ace ace-builds

用法：

javascript">import React from 'react';
import AceEditor from 'react-ace';// 引入你需要的 Ace Editor 模式和主题
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';const MyCodeEditor = () => {return (<AceEditormode="javascript"       // 设置代码模式，如 JavaScripttheme="github"          // 设置编辑器主题name="codeEditor"       // 编辑器的唯一标识符，用于设置多个编辑器实例onChange={(value) => console.log(value)}  // 在内容变化时触发fontSize={14}           // 设置字体大小showPrintMargin={true}  // 显示右侧的打印边距showGutter={true}       // 显示左侧的行号栏highlightActiveLine={true} // 高亮当前行value={`const greeting = "Hello, World!";`} // 设置初始值setOptions={{enableBasicAutocompletion: true,enableLiveAutocompletion: true,enableSnippets: true,showLineNumbers: true,tabSize: 2,}}width="100%"            // 设置宽度height="400px"          // 设置高度/>);
};export default MyCodeEditor;