Angular和React的在线VS Code IDE

经过六个月的努力,我很高兴终于宣布StackBlitz 您现在可以在https://stackblitz.com上查看

StackBlitz是一个在线IDE,您可以在其中创建Angular&React项目,这些项目可以立即在线并且可以通过链接共享…… 只需单击一下即可。 在键入时,它会自动处理安装依赖项,编译,捆绑和热重装:

目前,我们支持创建和导出Angular应用程序(基于@angular/cli )和React应用程序(基于create-react-app ),并支持即将登陆的Vue和自定义模板。

为什么?

在开始锤炼出色的原型或演示之前,没有比配置配置和构建工具更好的了。

Vjeux最初在他的挑战中发现了这个问题,以寻求最佳的Javascript应用程序原型设置,我们有意设计了StackBlitz来完成(并在许多方面超出了 )他的挑战要求。

StackBlitz的感觉和功能完全类似于您的本地开发环境。

VS Code最新的编辑体验-现在在您的浏览器中。

Intellisense智能补全(带有来自npm的类型定义),项目搜索(Cmd + P),转到定义和其他关键VS Code功能开箱即用:

从NPM安装和使用软件包

导入库是开发应用程序的关键和常见部分。 这就是为什么StackBlitz包含一个浏览器内 npm客户端,该客户端支持一次安装多个软件包以及特定版本(例如: react react-dom redux@3.7.2

您还可以将docs / blogs / etc中的代码片段复制并粘贴到编辑器中,它会自动检测您缺少的软件包👌

就像在本地一样,在单独的窗口中预览和调试

告别笨拙的iframes在线游乐场,迫使您使用每个StackBlitz项目都会获得它自己的唯一URL,您可以在其中实时预览和调试(通过热重载!)

即使离线也可以继续编辑

StackBlitz利用 渐进式Web App API可在浏览器中运行实时开发服务器 ,因此无论您是在飞机上,在火车上还是在雨后的Uber路上,您都可以继续编码(!):

只需将现有文件和文件夹拖放到编辑器中,即可导入它们

不再需要复制+粘贴,上传或git命令。 您的浏览器会立即分析本地文件和文件夹,并在眨眼间重新捆绑您的项目:

分享并嵌入👀

每个项目都可以与其他人共享以进行查看/分叉,并且还具有革命性的嵌入视图,该视图将VS Code的全部功能纳入您的中型文章,博客文章和文档中。

下载并在本地运行

单击“导出”按钮将下载配置为使用create-react-app@angular/cli运行的项目的ZIP文件(分别用于React和Angular项目)

您的应用始终在线

您的应用永远不会进入睡眠状态,并且没有带宽限制。 与您想要的朋友,同事和社区共享URL!

编辑大型和小型应用程序

StackBlitz是唯一可以进行实时编辑“所有演示应用之母”的浏览器内部环境: RealWorld (查看React和Angularimplementations)。 TodoMVC是最受欢迎的演示应用程序之一,也可以像黄油一样平稳运行。