Monaco 编辑器中自定义语言的语法验证

Posted 2023-03-31

【中文标题】Monaco 编辑器中自定义语言的语法验证

【英文标题】：Syntax validation of a custom language in Monaco editor

【发布时间】：2017-02-18 19:23:42

【问题描述】：

我正在尝试将自定义语言集成到 monaco 编辑器中，我通过https://microsoft.github.io/monaco-editor/monarch.html 了解了语法高亮的想法。

但是我找不到任何关于我们如何通过语法验证添加错误/警告验证的文档。在 Ace 编辑器中，我们通过编写一个 worker 并在其中执行验证功能来做到这一点。感谢任何链接/帮助。

【参考方案1】：

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

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

我认为这会有所帮助。

【参考方案2】：

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

只需将此代码插入到 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

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