在 vscode.dev 中直接執行 Python !純瀏覽器環境,無後端!

formulahendry 發表於 2021-12-05
Python VSCode

 

其實有挺長一段時間沒有寫自己的 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 檔案可以執行!

在 vscode.dev 中直接執行 Python !純瀏覽器環境,無後端!

既然找到了方法,那就趕緊實現一個 VS Code 外掛吧!

於是,花了小半天時間寫好了!

那麼,外掛叫啥名字呢?

之前寫過一個 Code Runner 外掛。

我寫的 Code Runner,下載量突破 3000 萬了!

那麼,這個新外掛,就叫 Code Runner for Web 吧!

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

在 vscode.dev 中直接執行 Python !純瀏覽器環境,無後端!

看看執行效果截圖:

在 vscode.dev 中直接執行 Python !純瀏覽器環境,無後端!

歡迎大家下載試用!

  • 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!