1.码镜像简介

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文件中新建一个,代码内容如下:

从“反应”导入 { useRef,useEffect };

从“codemirror”导入 * 作为 CodeMirror;

导出 const CodeEditor u003d (props) u003d> {

const { onInputRead, 选项 } u003d 道具

常量 editorRef u003d useRef()

使用效果(() u003d> {

让编辑器 u003d CodeMirror(editorRef.current, 选项)

editor.on('inputRead', (cm, event) u003d> {

onInputRead(编辑器,事件)

})

}, [])

返回 (

<div refu003d{editorRef}>

</div>

);

}

CodeMirror的配置可以直接通过父组件传递,比较灵活。可以给组件添加一些监听事件,暴露事件回调接口,由调用者控制。上述代码监听“inputRead”事件,可用于智能补全代码。后面会介绍如何配置。

在 app JS 上使用封装的 codeeditor 组件。

从 './components/CodeEditor' 导入 { CodeEditor };

导入'codemirror/lib/codemirror';

导入'codemirror/keymap/sublime';

导入“codemirror/mode/python/python”;

导入'codemirror/addon/hint/show-hint';

导入'./App.css';

函数应用程序() {

返回 (

<div>

<代码编辑器

onInputReadu003d{(editor, event) u003d> editor.showHint()}

选项u003d{{

行号:真,

主题:'xq-light',

keyMap:'崇高',

额外键:{},

模式:“蟒蛇”,

提示选项:{

完成单:假,

}

}}

/>

</div>

);

}

导出默认App;

配置说明:

lineNumbers:是否在编辑器左侧显示行号。

主题:配置编辑器的主题。有内置的可选主题。可以在/codemirror/theme目录下查看css列表。它支持 60 多个主题。使用前需要导入相应的css文件。

keymap:配置要使用的快捷键,支持sublime、vim和emacs,使用前导入对应的js文件。您还可以通过 extraKeys 自定义快捷键。

模式:配置要使用的模式,与语言有关,如高亮、格式化、注释等。内置模式有100多种。您可以通过 /codemirror/mode 目录查看支持的模式。 CodeMirror 提供了通过文件名后缀获取模式的功能。

从“codemirror”导入 * 作为 codemirror;

常量元 u003d codemirror.findModeByFileName(this.path);

常量模式 u003d 元?元模式:'';

hintOptions:自动提示配置。输入单词时,将自动给出完成提示。显示提示。需要JS插件,show hint需要引入CSS文件。设置inputRead事件回调函数,使用编辑器Showhint()弹出选项提示框。 CodeMirror的内置提示是匹配预设的关键字,关键字列表存放在/codemirror/mode/目录下对应的“mode”文件中。比如上面代码中设置的模式是python,关键字在/codemirror/mode/Python/python JS文件中:

var commonKeywords u003d ["as", "assert", "break", "class", "continue",

“def”、“del”、“elif”、“else”、“except”、“finally”、

“for”、“from”、“global”、“if”、“import”、

“lambda”、“通过”、“提高”、“返回”、

“尝试”、“同时”、“与”、“产量”、“在”];

var commonBuiltins u003d [“abs”、“all”、“any”、“bin”、“bool”、“bytearray”、“callable”、“chr”、

“classmethod”、“编译”、“复杂”、“delattr”、“dict”、“dir”、“divmod”、

“枚举”、“评估”、“过滤器”、“浮点”、“格式”、“冻结集”、

“getattr”、“globals”、“hasattr”、“hash”、“帮助”、“hex”、“id”、

“输入”、“int”、“isinstance”、“issubclass”、“iter”、“len”、

“列表”、“本地”、“地图”、“最大”、“内存视图”、“最小”、“下一个”、

“对象”、“oct”、“open”、“ord”、“pow”、“property”、“range”、

“repr”、“reversed”、“round”、“set”、“setattr”、“slice”、

“排序”、“静态方法”、“str”、“sum”、“super”、“tuple”、

“类型”、“变量”、“zip”、“__import__”、“未实现”、

"省略号", "__debug__"];

CodeMirror.registerHelper("hintWords", "python", commonKeywords.concat(commonBuiltins));

使用关键字匹配提示存在局限性,无法提示代码中自定义或引用的变量和函数补全。要解决这个问题,可以使用 lsp 从后端推送提示选项。如何使用lsp完成代码将在后续公众号中介绍。

Completeingle:只有一个提示选项时是否自动选择完成。默认值为真。建议将其更改为 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