typescript - 使用 Ace 编辑器/任何 Web IDE 进行 TypeScript 语法验证？

Question

谷歌让我失望了。我想要一种在我的 Ace 编辑器中进行 TypeScript 语法验证的方法。我通过 basarat AKA 'That TypeScript Guy' 找到了一个基于 Ace 的 TypeScript Playground，但 repo 没有很好的 README，我怀疑验证器是否是最新的 TypeScript 的新功能，因为最后一次提交是几年前的。

我了解如何在 Ace 中添加自定义列表本身；这只是我正在努力寻找的实际 TypeScript linter。似乎没有最新的维护；我很惊讶没有一个。目前，我通过一个名为ts-morph的库对获取诊断的调用进行去抖动处理，该库为 TypeScript 编译器 API 提供了对开发人员友好的方法。我得到这些诊断信息，遍历它们，并将我自己的自定义注释添加到编辑器中：

const diagnostics = getDiagnostics(code)
    aceEditor.getSession().setAnnotations(
      diagnostics.map(diagnostic => {
        return {
          row: diagnostic.getLineNumber() - 1,
          column: diagnostic.getStart(),
          text: diagnostic.getMessageText().toString(),
          type: convertTypeScriptCategoryToAceType(diagnostic.getCategory()),
        }
      })
    )

现在还可以，但是我想以他们建议的格式使用 Web Worker 以“王牌”方式进行操作。

我对从 Ace Editor 迁移持略微开放的态度；例如，我也知道TypeScript Playground，但这似乎没有开源存储库。其他著名的在线 IDE，如CodeSandbox也必须有自己的方法。（我稍微查看了 CodeSandbox 的源代码，但他们的存储库预计非常复杂。）

谁能让我深入了解如何在基于 Web 的 IDE 中获得出色的 TypeScript IntelliSense 和语法检查？是否可以通过当前的开源工具实现？

标签： typescriptideintellisenseace-editorweb-ide

Answer 1

当然，在发布此消息后的几分钟内，我找到了答案（并已在评论中发布）。微软确实有自己的编辑器，叫做monaco-editor。这实际上与支持 VSCode 的功能相同。