简体繁体 English

Monaco：在 monaco-editor 中为自定义语言创建语言语法定义的最佳方法是什么？

[英]Monaco: What is the best way to create a language syntax definition for a custom language in the monaco-editor?

原文 2021-02-24 18:21:56 0 1 javascript/ syntax-highlighting/ antlr4/ dsl/ monaco-editor

I have a fairly simple custom DSL created in antlr4.我在 antlr4 中创建了一个相当简单的自定义 DSL。 I'm trying to find the easiest way to use it in a web based monaco-editor with all the bells and whistles.我试图找到在基于 web 的摩纳哥编辑器中使用它的最简单方法，其中包含所有的花里胡哨。

I see you can create monarch definitions from scratch using: https://microsoft.github.io/monaco-editor/monarch.html (The problem with that is for future changes I'd have to keep 2 things up to date, the antlr grammar and the monarch json definition. Also, since they are separate implementations, how could I be certain they both match/agree).我看到您可以使用以下方法从头开始创建 monarch 定义： https://microsoft.github.io/monaco-editor/monarch.html的问题是为了保持未来的变化antlr 语法和 monarch json 定义。另外，由于它们是单独的实现，我怎么能确定它们都匹配/同意）。
I also see you can manually use an ANTLR generated lexer/parser to do everything yourself with just ANTLR: https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/ (Compared to monarch, this seems like a LOT of manual work, and I'm having trouble finding many examples of this or much documentation).我还看到您可以手动使用 ANTLR 生成的词法分析器/解析器仅使用 ANTLR 自己完成所有操作： https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/ （相比monarch，这似乎是很多手工工作，我很难找到很多这个例子或很多文档）。
Is there an easy way to just generate the monarch json definition from the antlr files?有没有一种简单的方法可以从 antlr 文件中生成 monarch json 定义？ If no, which of the first 2 options is generally preferred and why?如果不是，通常首选前两个选项中的哪一个，为什么？

1 个解决方案

An ANTLR file is really just your syntax. ANTLR 文件实际上只是您的语法。 It would probably be possible to get syntax highlighting from there, but I don't recall seeing anything that does that for Monaco.可能有可能从那里获得语法突出显示，但我不记得看到任何为摩纳哥做的事情。

Beyond syntax highlighting, you'll want code completion.除了语法高亮，您还需要代码完成。 If you target the Typescript target, then there's the C3 code completion project that Mike Lischke (hope I spelled that right) put together.如果您的目标是 Typescript 目标，那么 Mike Lischke（希望我拼写正确）放在一起的 C3 代码完成项目。 It gets you about as close as you can get I from just the grammar, but you still have work to do looking things up in you symbol table, taking scope into account.它使您尽可能接近语法，但您仍然需要在符号表中查找内容，考虑到 scope。 Etc. it's also tricky to hand it the right logical cursor position (Mike has written up good guidance on getting it right (it made a lot more sense to me when I reread it after working through it though).等等，把它交给正确的逻辑 cursor position 也很棘手（Mike 写了很好的指导来让它正确（不过，当我在完成它之后重读它时，它对我来说更有意义）。

It can be made to work with the JavaScript target, but that's a bit more work.它可以与 JavaScript 目标一起使用，但这需要更多的工作。 (Mainly in adding to methods the type script target has that the JavaScript target does not. （主要是添加到方法中，类型脚本目标具有 JavaScript 目标没有。

Also, it's not going to just plug in to Monaco.此外，它不会仅仅插入摩纳哥。 It will save you a lot of work when you write your code though.但是，当您编写代码时，它将为您节省大量工作。