如何使用VueJS/Webpack在摩纳哥加载自定义语言

Question

我在这里使用这个工具创建了一种自定义语言。我不知道该怎么做才能将它加载到我的VueJS应用程序中。我尝试了以下操作，没有出现任何错误，但它似乎也不起作用，因为在Monarch工具中，我会得到已知函数等的蓝色文本，但在我的编辑器中我没有。其他语言也能正常工作。

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
const main = path.resolve(__dirname, './src/test/test.ts');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript', 'python', 'java', 'python', 'json', 'vb'],
customLanguages: [
{
label: 'test',
entry: main
}
]
})
]
}
...

我使我的.ts文件实质上导出了一个conf属性，其中包含tokenizer中使用的所有变量或任何内容。我还导出了一个language属性。我不完全确定这是正确的格式。

我的.ts文件基本上看起来像：

export const conf = {...}
export const language = {...}

我不完全确定在这里该做什么。对于自定义语言来说，文档是稀疏的，除了我认为我至少已经完成了定义语言的第一部分之外，似乎什么都不起作用。

Answer 1

实际上并不需要Webpack插件。

基于自定义语言示例，您可以在运行时通过monaco.languages.setMonarchTokensProvider()注册该语言。第二个函数参数是IMonarchLanguage的一个实例，它与您链接的示例中的语言规范相匹配。

<script setup lang="ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import { ref, onMounted } from 'vue'
/**
* `customLangMonarch` contains the language spec example from
* https://microsoft.github.io/monaco-editor/monarch.html
*/
// @ts-ignore
import customLangMonarch from '@/custom-lang-monarch'
monaco.languages.register({ id: 'custom' })
monaco.languages.setMonarchTokensProvider('custom', customLangMonarch)
const editor = ref()
onMounted(() => {
monaco.editor.create(editor.value, {
language: 'custom',
})
})
</script>

演示w/Vue CLI

Vite 演示