開發人員通常手上都會有多個專案要進行開發,但是不同專案可能會有不同的程式語言,不同的技術堆疊,不同的套件相依性,以及其它不同的第三方程式庫要安裝等。如果全部都安裝在本地,常常會遇到因為不同專案需求導致版本上的衝突。例如Angular與Node版本相依限制(可以參考 Angular Version compatibility ),不同版本的Angular其相依的Node/TypeScript/RxJS的版本都有限制。這種問題對開發人員來說其實很困擾,所幸Visual Studio Code有一個延伸模組-Remote Development,可以結合Docker建立開發人員所需要的開發環境,操作起來與在本地開發的體驗幾乎沒有差別,強烈建議使用。今天我們就用一個簡單的範例來演示一下如何透過Visual Studio Code Remote Development來搭建一個Python的開發環境。該範例會使用OpenCV來做影像辨識,並解析出文字,最後Print出來。 必要條件 安裝Visual Studio Code與延伸模組-Remote Development 安裝Docker Desktop 專案結構 hello-opencv.py- 主程式 line_avatar_yellow_480.png- 影像辨識的圖檔 從Visual Studio Code打開專案資料夾 設定開發容器 選擇在容器中開啟目前資料夾 選擇將設定新增至工作區 決定.devcontainer資料夾要放在哪裡,此範例與原始碼放一起。 選擇Image Template 此範例是Python應用,所以選擇Python 3 devcontainers。 選擇Image 選擇要添加的Feature 此範例會使用homebrew安裝OCR套件,需要其他的Feature可以一併選進來。 選擇保留預設值 依照設定自動啟動容器 啟動完成 留意左下角會顯示開發容器:Python 3 切換到遠端總管會出現我們建立的容器 修改devcontainer.json 此範例希望建立容器後自動安裝OpenCV相關的套件,所以在postCreateCommand區段加入了一些命令,這部分可視情況調整。 存檔後會提醒要重建容器,按下Rebuild即可 自動重建容器 等待重建完成即可。 進入Debug模式 選擇P...
今天前端在進行SIT時遇到一個很詭異的現象,查看了瀏覽器的 Console log 如下: 看了之後,當下沒有太多的想法... 故事繼續説下去之前,讓我先補充一下,這個應用程式是基於 ABP Framework 這個框架來開發的,前端使用的是 Angular ,後端用 .NET 6。 關於 ABP Framework ,日後再寫一篇來介紹一下。 我們再回到事發當時,當時看了 Console log 似乎還是沒能找到原因,決定上ABP Support看能不能找到有緣人,搜了一下發現還真有, Maximum call stack size exceeded 裏面的情況和我遇到的類似,裏頭有提供解法(是workaround),試了一下是可以用的。 稍微看了一下這個解法的代碼,猜測應該是 AbpPermissionDirective 的bug導致,也只能先用這個workaround了,等待之後的release吧!