1. CodeMirror简介
CodeMirror是一个用 JavaScript 实现的通用文本编辑器，它专门用于代码编辑，内置多种开发语言模式和插件，支持代码高亮、自动补全、查找、快捷键等。
CodeMirror 是一个在MIT许可下的开源项目，目前已用于 Firefox、 Chrome和Safari的开发工具，以及Light Table、Adobe Brackets、Bitbucket等其他项目的编辑器。
CodeMirror核心优势是能广泛兼容Firefox、Chrome、Safari、Internet Explorer/Edge和Opera浏览器，同时支持插件，可以根据自己的需求进行灵活定制，用来开发在线IDE的编辑器很方便。
2. 如何使用
CodeMirror官方最新的版本是CodeMirror 6，目前还处于测试阶段，可以选择使用更成熟稳定的版本CodeMirror 5来开发。
WEB开发框架可以选择用React，通过create-react-app可以快速创建一个React应用。
数据科学家在做模型开发时，一般会使用Jupyter这种交互式编程方式，在模型开发过程中需要多个代码编辑框来写代码，所以先将CodeMirror简单封装成一个公共的React组件，便于后续调用。先执行yarn add codemirror 安装好codemirror库，然后在src文件夹下新建 ./components/CodeEditor.jsx文件，代码内容如下：
import { useRef, useEffect } from 'react';import * as CodeMirror from 'codemirror';
export const CodeEditor = (props) => {
const { onInputRead, options } = props
const editorRef = useRef()
useEffect(() => {
let editor = CodeMirror(editorRef.current, options)
editor.on('inputRead', (cm, event) => {
onInputRead(editor, event)
})
}, [])
return (
<div ref={editorRef}>
</div>
);
}
CodeMirror的配置可以通过父组件直接传过来，这样相对会比较灵活些。可以在组件中加一些监听事件，对外暴露事件回调接口，由调用方控制，上面的代码中监听了"inputRead"事件，可以通过它来做代码的智能补全，后面会介绍怎么配置。
在App.js中使用封装好的CodeEdior组件：
import { CodeEditor } from './components/CodeEditor';import 'codemirror/lib/codemirror';
import 'codemirror/keymap/sublime';
import "codemirror/mode/python/python";
import 'codemirror/addon/hint/show-hint';
import './App.css';
function App() {
return (
<div>
<CodeEditor
onInputRead={(editor, event) => editor.showHint()}
options={{
lineNumbers: true,
theme: 'xq-light',
keyMap: 'sublime',
extraKeys: {},
mode: 'python',
hintOptions: {
completeSingle: false,
}
}}
/>
</div>
);
}
export default App;
配置说明：
lineNumbers：是否在编辑器左侧显示行号。
theme：配置编辑器的主题，内置可选的主题可以查看 /codemirror/theme目录下的css列表，支持60多种主题，使用前需要将对应的css文件引入进来。
keymap：配置要使用的快捷键，支持sublime、vim和emacs，使用前需要引入对应的js文件。也可以通过extraKeys 自定义快捷键。
mode: 配置要使用的模式，和语言相关，例如高亮、格式化、注释等。内置100多种模式，可以通过/codemirror/mode 目录查看支持的模式。CodeMirror 提供函数可以通过文件名后缀获取mode。
import * as codemirror from 'codemirror';const meta = codemirror.findModeByFileName(this.path);
const mode = meta ? meta.mode : '';
hintOptions：自动提示配置，当输入一个单词时，会自动做补全提示。需要引入show-hint.js插件，同时需要引入show-hint.css文件。设置inputRead事件回调函数，使用editor.showHint()弹出选项提示框。CodeMirror内置的提示是通过匹配预设的关键词，关键词列表存在/codemirror/mode/ 目录下对应的"mode"文件中，比如上面代码中设置的mode为python，关键词在/codemirror/mode/python/python.js文件中：
var commonKeywords = ["as", "assert", "break", "class", "continue","def", "del", "elif", "else", "except", "finally",
"for", "from", "global", "if", "import",
"lambda", "pass", "raise", "return",
"try", "while", "with", "yield", "in"];
var commonBuiltins = ["abs", "all", "any", "bin", "bool", "bytearray", "callable", "chr",
"classmethod", "compile", "complex", "delattr", "dict", "dir", "divmod",
"enumerate", "eval（"hintWords", "python", commonKeywords.concat(commonBuiltins));
使用关键词匹配进行提示有局限性，代码中自定义或者引用的变量和函数无法做补全提示。要解决这个问题，可以使用lsp，由后端来推送提示选项。如何使用lsp进行代码补全会在后续的公众号文章中介绍。
completeSingle: 当只有一个提示选项时是否自动选中补全，默认为true，建议改成false，手动去选择提示项进行补全。
在App.css中引入相关的css文件：
@import 'codemirror/lib/codemirror.css';@import "codemirror/theme/xq-light.css";
@import 'codemirror/addon/hint/show-hint.css';
3. 效果查看
IDE的第一步代码编辑器就完成了，执行yarn start 后，在浏览器中打开页面，输入一些python代码看看效果：
