在Monaco编辑器中对自定义语言进行语法验证

时间:2016-10-10 11:23:40

标签: validation syntax monaco-editor

我正在尝试将自定义语言集成到monaco编辑器中,然后我浏览了https://microsoft.github.io/monaco-editor/monarch.html以了解语法突出显示。

但我找不到任何关于我们如何通过语法验证添加错误/警告验证的文档。在Ace编辑器中,我们通过编写工作程序并在其中执行验证功能来完成此操作。感谢任何链接/帮助。

2 个答案:

答案 0 :(得分:17)

我最近成功完成了这项工作,我只使用monaco-css作为样板,我现在唯一需要做的就是为我的语言和其他我需要的功能编写解析器。这是我的code

在项目根目录的lang_services文件夹中添加解析器和其他语言服务。

我认为这会有所帮助。

答案 1 :(得分:2)

这是一个简洁且易于定制的示例,它将在第 1 行的第 2-5 位置显示错误,如下所示:

enter image description here

只需在 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

请注意,为简单起见,此示例忽略了 onDidCreateModelonDidChangeContent 都返回您可能需要跟踪和处理的 IDisposable 对象的考虑。