手摸手打造类码上掘金在线IDE（二）——编辑器篇

不熟悉的朋友可能不知道，我叫，前端切图仔，单位内卷，疯狂加班

在上一篇的文章中，我们详细介绍了 在线IDE的优劣势， 市面上的在线IDE种类，IDE的大致的实现方式，以及简单的实现原理

算是水了一篇吧， 属于是，主要介绍了， 理论性的东西 ，可谓，，

听着好有道理，实则并没有什么卵用，

第二篇了，得直入正题了，接下来跟大家一块实现一个

， 既然要抄码上掘金， 那么我们就要了解东家,也就是官方版本-- 这个项目的结构

整个码上掘金， 从大块上包含两个部分

跟用户交互部分，自不必过多介绍， 大致，就是那老几样，crud而已，比如： ，当前用户发布列表 ，收藏，点赞 ， fork 代码，布局，等等功能

听到这，相信各位 脑袋蹭蹭蹭全是画面，？

确实，坦率的讲，对于一个技术项目，这个东西在技术难度层面，就是侮辱人的智商的，很多人都对他嗤之以鼻， 很是不屑

然而，我想说的是，在我们的日常工作中，很多人都是都是靠着这么多没有这些东西，一个产品就不能是一个好产品，

这也东西也是有着很重要的，他的业务复杂度，也很高深。 他的重要程度其实并不比技术差

举个例，比如我这个页面的，怎样影响用户的留存，再比如，什么样的布局，能提升用户体验，

还比如，增加怎样的交互，，

其实这些都需要思考的，他的难度也不比技术差， 给这些琢磨明白了，你也能值钱，并不一定是技术好

所以，我就想在这里发出一个疑问？在我们这个行当，？

， 他还跟你您的性格，能耐，运气，选择有很大的关系，所以，别人下次，叫你大佬，您一定要有空杯心态

您要知道，，您要知道，别人夸你，可能就是商业互吹，

我就发现，很多人，有点技术， 就不知道自己是谁了，行为张狂， 表情夸张，天天好为人师， 指手画脚

。。。。

到这，你可能觉得我在批评那些 除了技术别的一概听不进去的伪大佬，

呃，其实，这里只是为了告诫自己，，请大家不要对号入座。。。

到这，你以为我在虚怀若谷？

呃，其实，我也可能在为了挣钱

总结起来就是一句话， 互联网江湖，真真假假，虚虚实实，大家一定要，提高警惕，擦亮双眼，

走正确的路，学正确的技术，干正确的事。

至于是什么是正确？

俺以为，大多数人走的路，那就是正确，不要想着标新立异，这也会那也会，有一项安身立命的资本即可。

对于俺，干好这一家，走到哪里都不怕！

所以，俺这个残废版——码上掘金，还用 写

git地址如下：

（最近单位比较忙，后期慢慢给代码补上）

额，有点跑题了，但刚才着实痛快了一把，说了点心里话，

我们言归正传，继续往下走

说完了，交互部分，在此在此强调一下，这一部分也很重要，，

只是，不是我们的主要研究内容，所以暂时按下不表！

下面开始，上主菜

码上掘金，从结构上来说只有三个部分，分别是编辑器部分，渲染编译器部分，以及 错误提示控制台部分

由于他的初心是是为了轻便，简洁，所见即所得， 所以省略了文件系统

那，既然这样的话，我们也不需要了吧， 毕竟残废版

其实，我在之前的文章中写了个文件系统

git 地址如下，有兴趣的jym 可自取

接下来，我们一个个梳理他的这几个模块

编辑器部分

东家的编辑器部分，可谓非常传统 ，他用微软干了很多年头的在线编辑器-也就是vscode 的前身

这玩意什么都好，毕竟是vscode 的祖宗，就是文档，是真费解啊

当然你也可以另辟蹊径，找了另一个极端

这也是跟 可以分庭抗礼的编辑器，支持语言众多而且接入方便，文档，齐全， 虽然也是英文，

可我们有翻译软件啊

而在，在社区繁荣的今天，更是有大佬在他的基础上做出了专门用于vue 的定制版本

使得我们的接入更加方便， 如此一来，挣钱也就更容易了！

有很多 对这个一块可能还相当陌生，那么我们就来分别对这两个编辑器的使用方式来一个简单的介绍

monaco-editor

monaco-editor 虽然也有vue的版本接入

但是目前在社区的认可度还不够高，所以暂时不要不要使用

我们还是使用原始的接入方法

将以上代码导入vue 即可初始化编辑器，然而比较坑的是，他还需要导入一些包和做一些配置，来运行编辑器， 不然会出现以下错误

万幸的是，社区的力量是伟大的，他们有针对webpack的插件，自动导入。来省去了自己配置的繁琐

当然还有vite 版本的

这里需要注意的是，在高版本的vite中 有个 ，所以需要手动添加

能跑通编辑器之后，我们就需要来接入主题美化了在vscode中俺以为最美的主题莫过于

于是，俺在网上找到了他的移植版本

其实就是一堆的配置文件,我们只需要引入即可

然后引入之后你就会发现变成了这样

还不如官方主题，其实我们要做的还有一步， 关联语法，由于我们是要使用vscode 语法，但是 和 本质上又不是一个东西

vscode 使用的是

来解解析，做的关联，但是这玩意没有啊？

那么问题来了？ 我们要怎么关联怎么解析呢？

好在，社区的力量是强大的，我翻了的源码

在他的源码中找到了蛛丝马迹

这个库，专门用来解析 他的功能类似于

但是，他们俩虽然配对成功了，但是却还有层窗户纸没有捅破，他们还没有建立连接

于是同样还是这个大佬（在此我放上他的github：）

又做了个插件

将他们关联起来了！

有了大佬的贡献，我们说干就干

在开始之前，我们还需要一样东西

这个东西简单的来说，就是一个web版本的正则表达式的库 ，他脱胎于c语言编写

简单的来说，就是将 编译为

可能很多人都比较陌生

简而言之，他就是能在浏览器直接跑的非js代码，这个玩意非常神奇， 他让在浏览器跑node 成为了可能。

有了这些，我们就可以开始干了

我们就以vue文件的主题为例，少废话，先看东西：

效果基本可vscode一模一样了

首先，我们需要引入用到的字体包

然后导入这个web 版本的正则,配置运行环境

然后确定更改默认的主题解释器即可

完整代码如下

在介绍之前，我们先来介绍

这个老牌编辑器

CodeMirror 是通过 JavaScript 实现的文本编辑器。专门用于编辑代码，带有大量的语言模式和实现更高级的插件功能。

拥有丰富的编程 API 和 CSS 主题化系统可用于定制 CodeMirror ，使它更适合你的应用和扩展新功能。

现在他已经跟新到了

其实就是在他的基础上做了个vue 的封装

接下来我们就直接使用vue这个版本来封装一个属于我们的编辑器

用到的包相对于 就简单很多了 主要包含：

组件代码如下

效果如下，看着也还可以，虽然比不上,但是好在简单啊，大大降低了使用门槛

然而，我是那种喜欢安逸的人吗？所以咱们的残废版码上掘金，我要毅然决然的选择

毕竟有难度，才够,面试官才能能佩服，佩服才能高薪，高薪才能走向人生巅峰！

我们本期解决了编辑器选型问题，接下来，就要开始做编译器，的处理了 ，