使用 CodeMirror 打造数据科学家使用的 IDE（一）

2022 年 1 月 25 日
本文字数：2575 字
阅读完需：约 8 分钟

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 代码看看效果：

https://www.baihai.co/invitation

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/6ad5927875110cde888dd3f7a】。文章转载请联系作者。

Baihai IDP

关注

还未添加个人签名 2021.08.31 加入

IDP(Intelligent Development Platform)是面向数据科学家和算法工程师的新一代AI开发生产平台，便捷、高效数据科学家对数据接入与探索、模型开发、调试、训练和模型发布的需求。

发布

暂无评论

创作场景

使用 CodeMirror 打造数据科学家使用的 IDE（一）

1. CodeMirror 简介

2. 如何使用

3. 效果查看

Baihai IDP

评论