共计 3525 个字符，预计需要花费 9 分钟才能阅读完成。
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", "filter", "float", "format", "frozenset",
"getattr", "globals", "hasattr", "hash", "help", "hex", "id",
"input", "int", "isinstance", "issubclass", "iter", "len",
"list", "locals", "map", "max", "memoryview", "min", "next",
"object", "oct", "open", "ord", "pow", "property", "range",
"repr", "reversed", "round", "set", "setattr", "slice",
"sorted", "staticmethod", "str", "sum", "super", "tuple",
"type", "vars", "zip", "__import__", "NotImplemented",
"Ellipsis", "__debug__"];
CodeMirror.registerHelper("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 代码看看成果：
惊喜 ：
想要免去自主配置，即刻开启更优质的编码体验？可申请试用新一代云原生 AI 开发生产平台 -IDP
https://www.baihai.co/invitation