在 vscode.dev 中直接运行 Python ！纯浏览器环境，无后端！

其实有挺长一段时间没有写自己的 VS Code 插件了！

还是要感谢我们 DevDiv 组的 Flexible Friday 活动，让我可以在工作日研究自己感兴趣的项目。

Flexible Friday：今天，上班不干活！

我的 Flexible Friday 是一个Hack类型项目：

Run Any Language in Browser (Code Runner for Web)

Flexible Friday 是每个月一次的，上个月是第一次。但是自从开始调研这个项目后，觉得还是很有意思的！于是这周周六，准备搞一个 PoC 出来！

我，选择了世界上第二好的语言 —— Python。

其实在之前的文章，我也说过了，现在主流的所谓的在浏览器运行任何语言的方式主要是两种：

• 浏览器只是个展示和交互层，真正的编译和运行还是在后端。

• 相对进步不少的是：在后端把代码编译成 WebAssembly，然后在浏览器中运行。

然而，这两种方式都少不了 server 端的支持。那么，有没有方法可以不用后端，整个编译（或者解释）和运行都放在浏览器呢？

我对不同语言都进行了调研。然后，发现了 Pyodide：

https://github.com/pyodide/pyodide

这个项目最初由 Mozilla 主导开发，现在已经是独立的开源项目了！

通过 Emscripten，Pyodide 把 CPython 解释器预先编译成 WebAssembly，使得 Python 文件可以运行！

既然找到了方法，那就赶紧实现一个 VS Code 插件吧！

于是，花了小半天时间写好了！

那么，插件叫啥名字呢？

之前写过一个 Code Runner 插件。

我写的 Code Runner，下载量突破 3000 万了！

那么，这个新插件，就叫 Code Runner for Web 吧！

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-for-web

看看运行效果截图：

欢迎大家下载试用！

• Linux，mocOS，Windows 的 VS Code 也能装。你本地没装 Python的话，也能直接运行 Python！

• vscode.dev 和 github.dev 也都支持！

• 不知道是不是 VS Code 插件市场的搜索有问题，直接搜 Code Runner for Web 可能搜不到。大家可以加个双引号来搜索："Code Runner for Web"

下一步

• 目前还支持标准的 Python 库，未来会支持更多 pip 包~

• 未来会看看对其他语言的支持！

遇到的小坑

第一版发布到插件市场后，在 vscode.dev 试了下。发现 Edge 是正常的，但 Chrome 不行。

查了下 console log 发现这个 error：

Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.

好家伙！我在 VS Code 的 WebView 使用了 document.getElementById("my-id").innerHTML 来改页面内容，竟然到了 Chrome 就行不通了！

不过，难不倒我 workaround 小能手！

放弃 h2 标签，改用 input + disabled 大法！使用 document.getElementById("my-id").value

轻松解决！

项目已经开源，也欢迎大家来围观：

https://github.com/formulahendry/vscode-code-runner-for-web

对了，我们组也在招人，欢迎和我一起来 Flexible Friday 带薪搞感兴趣的项目哈：

• 微软内推常见问题 Q&A
• 微软 DevDiv 热招：一次编写，处处运行。微软在下一盘大棋！

已内推 80 人拿到微软 offer！