在|在 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 出来!
【在|在 vscode.dev 中直接运行 Python !纯浏览器环境,无后端!】我,选择了世界上第二好的语言 —— Python。
其实在之前的文章,我也说过了,现在主流的所谓的在浏览器运行任何语言的方式主要是两种:
- 浏览器只是个展示和交互层,真正的编译和运行还是在后端。
- 相对进步不少的是:在后端把代码编译成 WebAssembly,然后在浏览器中运行。
我对不同语言都进行了调研。然后,发现了 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 热招:一次编写,处处运行。微软在下一盘大棋!
推荐阅读
- 热闹中的孤独
- 你到家了吗
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 闲杂“细雨”
- 杜月笙的口才
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 赢在人生六项精进二阶Day3复盘
- 祖母走了