- 1. 前言
- 2. 探索
- 3. 实践
- 4. vollständig效果
- 5. vollständig代码
前言
最近在使用gitlab的web ide时发现当编写一个 vue组件时，文件的后缀名为.vue。在Herausgeber器的右上角会显示gegenwärtig的编程语言时vue，并且高亮语法或Kennzeichnung，Das Format化，折叠都表现很优秀。但是其实monaco是不支持vuejs的，作为一名前端Entwickler，我们有时需要在monacoHerausgeber器中编写vue组件，所以我就利用业余Zeit尝试 在讲vuejs集成zumonaco中。确切说vuejs并不是一个编程语言，它和html很类似，但也有很多schlecht异，这里就不展开讲了。本文主要我是如何探索，实践将vuejs集成zumonaco中的。
探索
我们先来看一下，一个vue组件在gitlab 的webide中的表现。
以下是两个简单的vue组件代码在webide中的表现。
可以看zu，无论是html的Kennzeichnung，属性，还是js的关键词，变Quantität， 都能够合适地着色。不能说没有缺点但已经很优秀了。（一个缺点是 scriptKennzeichnung无法折叠）
要实现这样的效果，一共Unterteilung为两个部Unterteilung，Die一不是是为monacoRegistrierung一个的vue语言，并配置该语言相应的属性。Die二就是设置一个比较好看的主题。本文主要讨论Die一步，即为monacoRegistrierung添加vue编程语言。
确定了研究方向后，我Suche nach了很多Informationen，但找zu都是如何在vue中集成monaco的Artikel和答案。
唯一有Related的就是这个问题 将vue js语言支持添加zumonaco editor
由于多次Suche nach无果，这个在monaco中添加vue语言支持的问题搁置了一段Zeit，最近又想挑战一下。其实这个研究课题，真正的作用并不是很大，在Herausgeber器中编写vue组件是无法直接显示，使用的。除了一些大型的web ide平台需要这种Funktion，个人，小Unternehmen基本不能用zu。应该还有其他我不知道的用途，我所不知道的。但其实对我来说，并不是刚需，只是一个兴趣点，小的研究课题。
其实这个问题有一个最简单的解决办法，就是扒gitlab的 webide 代码。没错，就是在浩瀚的gitlab源代码找zu他们是如何将vue语言Registrierungzumonaco中的，配置文件是哪些。简单却耗时。不信的同学可以先别往下看自己去找找。
由于知道了要想摘取果实所要走的路，所以我就义无反顾地踏上了征程。开始浅浅地研究gitlab的webide Related的Quellencode，说研究都是在夸自己，其实就是一段 ctrl + f ctrl + shift +f 。
一顿搜，一顿搜，一顿搜。
实践
说是一段搜，其实也要找对关键词，Suche nach的关键词 决定了你寻找的效率。
我用的关键词是，Die一步 我用的是 register，因为要往monaco中添加一个编程语言，必须要用zu这个方法languages.register()。看了一遍我该用关键词 registerLanguages 。 一下子就搜zu了自己想要的。
其实这里Suche nach还牵扯zu一个monaco版本的问题，因为gitlab使用monaco比较早，如果没有更新够它的版本的话，那么版本应该会很低，这种情况很容易导致 Dokumentation，api对不上。无法搜zu自己想要的东西，或者即使搜zu也无法直接使用。 gitlab 使用的monaco版本为"monaco-editor": "^0.25.2",
这里贴出Registrierung语言涉及zu的几个文件app/assets/javascripts/editor/source_editor.js
使用registerLanguages 方法将Custom definiert语言统统Registrierung进去
app/assets/javascripts/ide/lib/languages/vue.js 定义vue编程语言高亮，Kennzeichnung等属性的文件
app/assets/javascripts/ide/lib/editor.js
设置主题，Registrierung语言
app/assets/javascripts/ide/utils.js
该文件中有一个registerLanguages 方法，使用的Parameter就是vue.js中定义的属性。
由于我是在使用纯html来集成monaco，所以要使用vue.js 还需要稍微改造。
可以Überprüfen文末的vollständig代码。
其实就是去除了import export 和 替换了languages 的枚举值。
修改好 vue.js后，在调用三个函数就能将vue集成zumonaco中了
核心代码为
const languageId = vueLan.id;
monaco.languages.register(vueLan);
monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);vollständig效果
vollständig代码
<!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>
Antwort veröffentlichen