简体   繁体   English

摩纳哥编辑器中自定义语言的语法验证

[英]Syntax validation of a custom language in Monaco editor

I'm trying to integrate a custom language to monaco editor and I went through https://microsoft.github.io/monaco-editor/monarch.html to get an idea on syntax highlighting.我正在尝试将自定义语言集成到 monaco 编辑器中,我浏览了https://microsoft.github.io/monaco-editor/monarch.html以了解语法突出显示。

But I couldn't find any doc on how we can add error/warning validations through syntax validation for this.但是我找不到任何关于我们如何通过语法验证添加错误/警告验证的文档。 In Ace editor we did this by writing a worker and performing validation function within it.在 Ace 编辑器中,我们通过编写一个 worker 并在其中执行验证功能来做到这一点。 Appreciate any links/help on this.感谢有关此的任何链接/帮助。

I recently done this successfully i just used monaco-css as boiler-plate and the only thing that i have to do now is write a parser for my language and other features that I want in in it.我最近成功地完成了这项工作,我只是使用monaco-css作为样板,现在我唯一要做的就是为我的语言和我想要的其他功能编写一个解析器。 and here is my code .这是我的代码

Add your parser and other language services in lang_services folder in root dir of project.在项目根目录的 lang_services 文件夹中添加您的解析器和其他语言服务。

I think it would be helpful.我认为这会有所帮助。

Here is a succinct and easily customizable example that will display an error at position 2-5 of line 1 like so:这是一个简洁且易于定制的示例,它将在第 1 行的位置 2-5 显示错误,如下所示:

在此处输入图片说明

Just insert this code at the top (not bottom) of the playground code at https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages :只需在https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages的操场代码的顶部(而不是底部)插入此代码:

monaco.editor.onDidCreateModel(function(model) {
    function validate() {
      var textToValidate = model.getValue();

      // return a list of markers indicating errors to display

      // replace the below with your actual validation code which will build
      // the proper list of markers

      var markers = [{
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: 1,
        startColumn: 2,
        endLineNumber: 1,
        endColumn: 5,
        message: 'hi there'
      }];

      // change mySpecialLanguage to whatever your language id is
      monaco.editor.setModelMarkers(model, 'mySpecialLanguage', markers);
    }

    var handle = null;
    model.onDidChangeContent(() => {
      // debounce
      clearTimeout(handle);
      handle = setTimeout(() => validate(), 500);
    });
    validate();
});

// -- below this is the original canned example code:

// Register a new language

Note that for simplicity, this example ignores the consideration that onDidCreateModel and onDidChangeContent both return IDisposable objects which you may need to track and dispose of.请注意,为简单起见,此示例忽略了onDidCreateModelonDidChangeContent都返回您可能需要跟踪和处理的IDisposable对象的考虑。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM