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

Question

我使用这个 tool here 创建了一种自定义语言。我不知道如何将它加载到我的 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 插件。

基于 custom language example, you can register the language at runtime via monaco.languages.setMonarchTokensProvider(). The second function argument is an instance of 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>

demo w/Vue CLI

demo w/Vite

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

How to Load Custom Language in Monaco using VueJS/Webpack

vue.js

monaco-editor

monarch