在 Web 中实现一个 TypeScript Editor

前言

最近为 Chrome 开发了可以直接在浏览器运行 TypeScript 的插件 TypeScript Console，需要将代码编辑器集成到 Chrome Devtools 面板。其实要在 Web 中引入代码编辑器也是类似的，下面分享一下如何实现。

实现

首先来看看有什么问题

• 代码编辑器选择什么？
• 如何在浏览器编译和运行代码？
• 如何使用 npm 包呢？
• 使用 npm 包怎么有类型定义提示？

了解 Monaco

首先，考虑到要编写的是 TypeScript 编辑器，所以选择 Monaco Editor。它是 VSCode 的底层编辑器，所以对 TypeScript 的支持度是毋庸置疑的。来看看如何使用它

安装依赖...