Codemirror -- 代码编辑器(react、umi)

        首先，如果您对Codemirror代码编辑器不太了解，建议使用monaco-editor 代码编辑器，相对来说monaco-edito的源码更容易阅读，配置和使用更加简单。

1. 效果图

2. 安装依赖

pnpm install codemirror@5.62.3 

pnpm install react-codemirror@1.0.0

pnpm install @types/react-codemirror@1.0.8   // ts项目

3. 代码

import { useEffect, useRef } from 'react';

import 'codemirror/lib/codemirror.css';
import CodeMirror from 'react-codemirror';
//主题
import 'codemirror/theme/solarized.css';
import 'codemirror/theme/ttcn.css'; // material
// 折叠代码
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/indent-fold.js';

// 代码提示
import 'codemirror/addon/hint/anyword-hint.js'; // 简单提示，按需引入，spl可引入sql-hint.js
import 'codemirror/addon/hint/show-hint.css'; //
import 'codemirror/addon/hint/show-hint.js';

import 'codemirror/addon/comment/comment.js';
// 高亮
import 'codemirror/addon/selection/active-line.js';

// python语言
import 'codemirror/mode/python/python.js';

// 括号匹配
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/addon/edit/matchbrackets.js';

import 'codemirror/addon/lint/lint.js';

import 'codemirror/addon/lint/javascript-lint.js';

export default (props: any) => {
  const { value, codeChange } = props;
  const inputRef = useRef<any>(null);
  useEffect(() => {
    if (value) {
      const editor = inputRef?.current?.getCodeMirror();
      editor.setValue(value);
    }
  }, [value]);
  return (
    <div>
      <CodeMirror
        value={value ? value : ''} // 设置CodeMirror标签的初始值
        ref={inputRef} //添加ref属性获取dome节点
        // 设置CodeMirror标签的相关参数
        options={{
          theme: 'ttcn', //主题
          lineNumbers: true, //显示行号
          firstLineNumber: 1, //行号从几开始，默认1
          lineWrapping: true, //滚动或换行
          tabSize: 4, //tab键缩进,默认4
          smartIndent: true, // 智能缩进
          indentUnit: 4, // 智能缩进单位为2个空格长度
          indentWithTabs: true, // 使用制表符进行智能缩进
          autofocus: true, //自动获取焦点
          // 在行槽中添加行号显示器、折叠器、语法检测器
          gutters: [
            'CodeMirror-linenumbers',
            'CodeMirror-foldgutter',
            'CodeMirror-lint-markers',
          ],
          foldGutter: true, // 启用行槽中的代码折叠
          mode: 'python', // 要使用的模式//https://codemirror.net/mode/
          styleActiveLine: true, // 显示选中行的样式
          matchBrackets: true, //括号匹配
          autoCloseBrackets: true, //括号自动补全，()[]{}''""
          hintOptions: {
            completeSingle: false, //代码自动补全功能不默认补充
          },
        }}
        // 编译器内容变化后，输出变化后的内容
        onChange={(code: any) => {
          codeChange?.(code);
        }}
      />
    </div>
  );
};

4. 解决无法找到模块问题

方法1: 在根目录创建declaration.d.ts文件 ，添加以下代码

declare module 'react-codemirror';

方法2: 安装ts依赖(推荐)

pnpm install @types/react-codemirror@1.0.8