- 1. 前言
- 2. 探索
- 3. 实践
- 4. 完整效果
- 5. 完整代码
前言
最近在使用gitlab的web ide时发现当编写一个 vue组件时，文件的后缀名为.vue。在编辑器的右上角会显示当前的编程语言时vue，并且高亮语法或标签，格式化，折叠都表现很优秀。但是其实monaco是不支持vuejs的，作为一名前端开发者，我们有时需要在monaco编辑器中编写vue组件，所以我就利用业余时间尝试 在讲vuejs集成到monaco中。确切说vuejs并不是一个编程语言，它和html很类似，但也有很多差异，这里就不展开讲了。本文主要我是如何探索，实践将vuejs集成到monaco中的。
探索
我们先来看一下，一个vue组件在gitlab 的webide中的表现。
以下是两个简单的vue组件代码在webide中的表现。
可以看到，无论是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);完整效果
完整代码
<!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>
发表回复