在 vscode.dev 中直接運行 Python ！純瀏覽器環境，無後端！
- 2021 年 12 月 5 日
- 筆記
- Visual Studio Code, VS Code, 微軟
其實有挺長一段時間沒有寫自己的 VS Code 插件了！
還是要感謝我們 DevDiv 組的 Flexible Friday 活動，讓我可以在工作日研究自己感興趣的項目。
我的 Flexible Friday 是一個Hack類型項目：
Run Any Language in Browser (Code Runner for Web)
Flexible Friday 是每個月一次的，上個月是第一次。但是自從開始調研這個項目後，覺得還是很有意思的！於是這周周六，準備搞一個 PoC 出來！
我，選擇了世界上第二好的語言 —— Python。
其實在之前的文章，我也說過了，現在主流的所謂的在瀏覽器運行任何語言的方式主要是兩種：
-
瀏覽器只是個展示和交互層，真正的編譯和運行還是在後端。
-
相對進步不少的是：在後端把程式碼編譯成 WebAssembly，然後在瀏覽器中運行。
然而，這兩種方式都少不了 server 端的支援。那麼，有沒有方法可以不用後端，整個編譯（或者解釋）和運行都放在瀏覽器呢？
我對不同語言都進行了調研。然後，發現了 Pyodide：
//github.com/pyodide/pyodide
這個項目最初由 Mozilla 主導開發，現在已經是獨立的開源項目了！
通過 Emscripten，Pyodide 把 CPython 解釋器預先編譯成 WebAssembly，使得 Python 文件可以運行！
既然找到了方法，那就趕緊實現一個 VS Code 插件吧！
於是，花了小半天時間寫好了！
那麼，插件叫啥名字呢？
之前寫過一個 Code Runner 插件。
我寫的 Code Runner，下載量突破 3000 萬了！
那麼，這個新插件，就叫 Code Runner for Web 吧！
//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
輕鬆解決！
項目已經開源，也歡迎大家來圍觀：
//github.com/formulahendry/vscode-code-runner-for-web
對了，我們組也在招人，歡迎和我一起來 Flexible Friday 帶薪搞感興趣的項目哈：
已內推 80 人拿到微軟 offer！
