前言

最近在使用gitlab的web ide时发现当编写一个 vue组件时,文件的后缀名为.vue。在编辑器的右上角会显示当前的编程语言时vue,并且高亮语法或标签,格式化,折叠都表现很优秀。但是其实monaco是不支持vuejs的,作为一名前端开发者,我们有时需要在monaco编辑器中编写vue组件,所以我就利用业余时间尝试 在讲vuejs集成到monaco中。确切说vuejs并不是一个编程语言,它和html很类似,但也有很多差异,这里就不展开讲了。本文主要我是如何探索,实践将vuejs集成到monaco中的。

探索

我们先来看一下,一个vue组件在gitlab 的webide中的表现。
以下是两个简单的vue组件代码在webide中的表现。

将vue js语言支持添加注册到monaco editor中插图
将vue js语言支持添加注册到monaco editor中插图1

可以看到,无论是html的标签,属性,还是js的关键词,变量, 都能够合适地着色。不能说没有缺点但已经很优秀了。(一个缺点是 script标签无法折叠)

要实现这样的效果,一共分为两个部分,第一不是是为monaco注册一个的vue语言,并配置该语言相应的属性。第二就是设置一个比较好看的主题。本文主要讨论第一步,即为monaco注册添加vue编程语言。

确定了研究方向后,我搜索了很多资料,但找到都是如何在vue中集成monaco的文章和答案。

唯一有相关的就是这个问题 将vue js语言支持添加到monaco editor

由于多次搜索无果,这个在monaco中添加vue语言支持的问题搁置了一段时间,最近又想挑战一下。其实这个研究课题,真正的作用并不是很大,在编辑器中编写vue组件是无法直接显示,使用的。除了一些大型的web ide平台需要这种功能,个人,小企业基本不能用到。应该还有其他我不知道的用途,我所不知道的。但其实对我来说,并不是刚需,只是一个兴趣点,小的研究课题。

其实这个问题有一个最简单的解决办法,就是扒gitlab的 webide 代码。没错,就是在浩瀚的gitlab源代码找到他们是如何将vue语言注册到monaco中的,配置文件是哪些。简单却耗时。不信的同学可以先别往下看自己去找找。

由于知道了要想摘取果实所要走的路,所以我就义无反顾地踏上了征程。开始浅浅地研究gitlab的webide 相关的源码,说研究都是在夸自己,其实就是一段 ctrl + f ctrl + shift +f 。
一顿搜,一顿搜,一顿搜。

实践

说是一段搜,其实也要找对关键词,搜索的关键词 决定了你寻找的效率。
我用的关键词是,第一步 我用的是 register,因为要往monaco中添加一个编程语言,必须要用到这个方法languages.register()。看了一遍我该用关键词 registerLanguages 。 一下子就搜到了自己想要的。

其实这里搜索还牵扯到一个monaco版本的问题,因为gitlab使用monaco比较早,如果没有更新够它的版本的话,那么版本应该会很低,这种情况很容易导致 文档,api对不上。无法搜到自己想要的东西,或者即使搜到也无法直接使用。 gitlab 使用的monaco版本为"monaco-editor": "^0.25.2",

这里贴出注册语言涉及到的几个文件
app/assets/javascripts/editor/source_editor.js
使用registerLanguages 方法将自定义语言统统注册进去

app/assets/javascripts/ide/lib/languages/vue.js 定义vue编程语言高亮,标签等属性的文件

app/assets/javascripts/ide/lib/editor.js
设置主题,注册语言

app/assets/javascripts/ide/utils.js

该文件中有一个registerLanguages 方法,使用的参数就是vue.js中定义的属性。

由于我是在使用纯html来集成monaco,所以要使用vue.js 还需要稍微改造。
可以查看文末的完整代码。

其实就是去除了import export 和 替换了languages 的枚举值。

修改好 vue.js后,在调用三个函数就能将vue集成到monaco中了
核心代码为

const languageId = vueLan.id;
monaco.languages.register(vueLan);
monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);

完整效果

将vue js语言支持添加注册到monaco editor中插图2

完整代码

<!DOCTYPE html>
<html>

<head>
  <title>Vue 组件高亮 Hello World @CSDN拿我格子衫来 Monaco Editor</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
  <h2>Hello World CSDN@拿我格子衫来 Monaco Editor</h2>

  <h2>集成vue语言 CSDN@拿我格子衫来 Monaco Editor</h2>
  <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

  <script src="./monaco-editor/package/min/vs/loader.js"></script>

  <script src="./vue.js"></script>

  <script>
    require.config({ paths: { vs: './monaco-editor/package/min/vs' } });
    let editor

    require(['vs/editor/editor.main'], function () {

      const languageId = vueLan.id;
      monaco.languages.register(vueLan);
      monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
      monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);

      editor = monaco.editor.create(document.getElementById('container'), {
        value: vueCom,
        language: 'vue',
      });
    });


  </script>
</body>

</html>

相关新闻

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

邮箱

cloud@modbus.cn

QQ
QQ
微信
微信
分享本页
返回顶部