使用CodeMirror为数据科学家搭建IDE（一）
时间：2023-03-28 00:20:41
HTML
1.CodeMirror简介CodeMirror是一个用JavaScript实现的通用文本编辑器。它专门用于代码编辑。内置多种开发语言模式和插件，支持代码高亮显示。、自动补全、搜索、快捷键等。CodeMirror是MIT许可下的开源项目，目前用于Firefox、Chrome、Safari的开发工具，以及LightTable、AdobeBrackets、Bitbucket的编辑器,和其他项目。CodeMirror的核心优势在于它广泛兼容Firefox、Chrome、Safari、InternetExplorer/Edge和Opera浏览器。它还支持插件，可以根据您的需要灵活定制。开发在线IDE编辑器非常方便。2、如何使用CodeMirror目前最新的官方版本是CodeMirror6，目前还在测试阶段。您可以选择使用较为成熟稳定的CodeMirror5版本进行开发。WEB开发框架可以选择使用React，你可以通过create-react-app快速创建一个React应用。数据科学家在做模型开发时，通常会使用Jupyter这种交互式编程方式。在模型开发的过程中，需要多个代码编辑框来编写代码，所以先简单地将CodeMirror封装成一个公共的React组件，方便后续调用。先执行yarnaddcodemirror安装codemirror库，然后在src文件夹下新建./components/CodeEditor.jsx文件。代码内容如下：import{useRef,useEffect}from'react';从“codemirror”导入*作为CodeMirror；exportconstCodeEditor=(props)=>{const{onInputRead,options}=propsconsteditorRef=useRef()useEffect(()=>{leteditor=CodeMirror(editorRef.current,options)editor.on('inputRead',(cm,event)=>{onInputRead(editor,event)})},[])return(
);}CodeMirror的配置可以直接通过父组件传递，所以相对更加灵活。可以在组件中添加一些监听事件，对外暴露事件回调接口，由调用者控制。上面代码中监听了“inputRead”事件，你可以用它来做代码的智能补全。后面会介绍如何配置。在App.js中使用打包的CodeEdior组件。从'./components/CodeEditor'导入{CodeEditor}；导入'codemirror/lib/codemirror'；导入'codemirror/keymap/sublime'；导入“codemirror/mode/python/python”；导入'codemirror/addon/hint/show-hint';import'./App.css';functionApp(){return(
editor.showHint()}options={{lineNumbers:true,主题：'xq-light'，keyMap：'sublime'，extraKeys：{}，模式：'python'，hintOptions：{completeSingle：false，}}}/>
）;}导出默认应用程序；配置说明:lineNumbers:是否在编辑器左侧显示行号。theme：配置编辑器的主题。对于内置的可选主题，可以在/codemirror/theme目录下查看css列表。它支持60多个主题。使用前需要导入相应的css文件。keymap：配置要使用的快捷键，支持sublime、vim和emacs，使用前需要导入相应的js文件。你也可以通过extraKeys自定义快捷键。mode：配置使用的模式，与语言相关，如高亮、格式化、注释等，内置100多种模式，可以通过/codemirror/mode目录查看支持的模式.CodeMirror提供了通过文件名后缀获取模式的功能。import*ascodemirrorfrom'codemirror';constmeta=codemirror.findModeByFileName(this.path);constmode=meta?meta.mode:'';hintOptions:自动提示配置，输入单词时自动完成提示。需要引入show-hint.js插件，同时需要引入show-hint.css文件。设置inputRead事件回调函数，使用editor.showHint()弹出选项提示框。CodeMirror的内置提示是基于匹配的预设关键字。关键字列表存储在/codemirror/mode/目录下对应的“mode”文件中。比如上面代码中设置的mode是python，关键字在/codemirror/mode/python/python.js文件中：varcommonKeywords=["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"];varcommonBuiltins=["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","最大","内存查看”、“最小值”、“下一个”、“对象”、“八月”、“打开”、“ord”、“pow”、“属性”、“范围”、“repr”、“反转”、“圆形”,"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进行代码补全，后续会介绍公众号article.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代码编辑器第一步完成，执行yarnstart后，在浏览器中打开页面，输入一些python代码看看效果：惊喜：想避免自配置，马上开始更好的编码经验？即可申请新一代云原生AI开发生产平台-IDPhttps://www.baihai.co/invitation
