其實有挺長一段時間沒有寫自己的 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！