在 vscode.dev 中直接运行 Python !纯浏览器环境,无后端!
其实有挺长一段时间没有写自己的 VS Code 插件了!
还是要感谢我们 DevDiv 组的 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 带薪搞感兴趣的项目哈:
已内推 80 人拿到微软 offer!
在 vscode.dev 中直接运行 Python !纯浏览器环境,无后端!的更多相关文章
- C语言中调用运行python程序
C语言中调用运行python程序: Python代码如下: 创建test.py. #!/usr/bin/python3 #test.py import sys x = ]) print x*x 注意: ...
- 重磅!微软发布 vscode.dev,把 VS Code 带入浏览器!
早在 2019 年,当.dev顶级域名开放时,我们赶紧注册了vscode.dev.像许多购买.dev域名的人一样,我们不知道我们将用它做啥.反正,也占个坑吧! 将 VS Code 带入浏览器 直到今天 ...
- Notepad++中直接运行python
点击进入幕布视图浏览 https://mubu.com/doc/a8VGCUfqqw 一.使用Notepad++编辑python文件,并直接运行 1.用notepad++打开python文件.或者新建 ...
- 使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境
写在前面的话 作为有个 Python 菜逼,之前一直用的 Pycharm,但是在主题这一块怎么调整都感觉要么太骚,看起来不舒服,要么就是简直不能看.似乎用大 JB 公司 IDE 的人似乎都不怎么重视主 ...
- 在Xcode中编辑运行 Python 脚本
http://www.zhihu.com/question/19872198 打开Xcode,File->New->Project选中OS X下的Other点击External Build ...
- 使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
安装配置 VSCode [1]安装 VSCode: 下载地址:https://code.visualstudio.com/ 根据自己电脑对应的操作系统下载对应的版本即可,至于安装过程也和一般的软件一样 ...
- Apache运行python cgi程序
Apache运行python cgi程序 环境 win10 x64 专业版 Apache2.4 python 2.7 Apache安装和配置 Apache服务器的安装请自行搜索.在Apache2.4中 ...
- Python--day02(编程语言、运行python代码、变量)
day01主要内容回顾 1.进制转换: 二进制: 1111 0101 1010 十六进制 f 5 a 2.内存分布:堆区 和 栈区 外来人只能访问栈区的数据 ...
- [SublimeText] Sublime Text 2 运行 Python 脚本中文路径解决方法
在 SublimeText 中直接运行 Python 脚本,出现以下报错提示: Running python -u C:\Documents and Settings\Administrator\桌面 ...
随机推荐
- reorder-list leetcode C++
Given a singly linked list L: L 0→L 1→-→L n-1→L n, reorder it to: L 0→L n →L 1→L n-1→L 2→L n-2→- You ...
- cf12E Start of the season(构造,,,)
题意: 给一个偶数N. 构造出一个矩阵. 满足:主对角线上全为0.每一行是0~N-1的一个全排列.矩阵关于主对角线对称. 思路: 觉得是智商题,,,,看完题解后觉得不难,但是我就是没想出来.只想到了前 ...
- Typecho部署小破站
写在前面 以前利用 Github Page + Hexo框架 + Next主题搭建过静态博客,没错就是那个黑白色系的网页!但是体验并不是很好,一来本身是静态网页,页面内容要修改都需要在本地修改完上传到 ...
- CSS学习(二)选择符
元素选择符:以元素名作为选择符(span{ color: red; }) 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; }) 通用选择符:通用选择符(*)将 ...
- k8s入坑之路(13)kubernetes重要资源(namespace隔离 resources资源管理 label)
Namespace --- 集群的共享与隔离 语言中namespace概念 namespace核心作用隔离 以上是隔离的代码.namespace隔离的是: 1.资源对象的隔离:Service.Depl ...
- 子查询之 exists 和 in
exists exists用于检查一个子查询是否至少会返回一行数据(即检测行的存在),返回值为boolean型,true或false 语法 exists subquery /* 参数: subquer ...
- 反射的妙用:C#通过反射动态生成类型继承接口并实现
起因 最近想自己鼓捣个RPC,想着简化RPC调用方式,直接申明接口,然后根据接口的属性去配置RPC调用的相关信息.有一种说法叫申明式调用. 简单来说就是,申明一个interface,动态继承并实例化, ...
- 1组-Alpha冲刺-4/6
一.基本情况 队名:震震带着六菜鸟 组长博客:https://www.cnblogs.com/Klein-Wang/p/15553196.html 小组人数:7人 二.冲刺概况汇报 王业震 过去两天完 ...
- K8S使用NodePort类型Service
1.使用nodetype类型 1.1.第一种类型创建:直接在yaml中标记是nodePort apiVersion: v1 kind: Service metadata: name: nginx-se ...
- 使用nacos作为配置中心统一管理配置
基础环境 引入所需依赖包 <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>s ...