【vscode外掛開發】如何在VSCode裡面引入Angular
阿新 • • 發佈：2020-08-11
前言
之所以有這個需求，是因為想要在vscode外掛開發的時候可以使用我們自己的元件庫，而我們的元件庫又是依賴於Angular的，所以如何將VSCode和Angular結合在一起使用就成為了必須要解決的問題。 首先，從專案搭建上，兩者可以說是完全獨立的，Angular有自己的腳手架Angular CLI，VSCode也有自己的腳手架vscode-generator-code
可以分別來看下兩者的專案結構：
Angular：
VSCode:
從專案結構來看，想把兩個結構強制組合，或者取其中的一個用都是不可行的，那麼，最重點的問題來了，要怎麼把兩個完全獨立的專案結構融合在一起呢？解決思路
Angular與VSCode作為兩個獨立的模組，將Angular最後打包的靜態檔案作為VSCode的入口檔案去引入。
實現流程
1. 先在VSCode裡引入Angular的專案結構，如下圖所示，在VSCode中新建一個資料夾，專門用來存放Angular的專案結構，並且將所有頁面以及靜態資源全部放在Angular中，VSCode就負責處理資料 2. 配置Angular的打包路徑，
"outputPath": "../src/static",
3. 配置VSCode引入路徑為Angular的輸出檔案
panel.webview.html = this.getHTMLTemplate(this.context, panel, "/index.html");
4. 到這裡，可以說已經把Angular和VSCode進行了關聯，可以在VSCode裡拿到Angular匯出的頁面了，那麼，此時此刻又產生了一個新的問題，我要如何在Angular裡使用VSCode的API，和VSCode進行通訊呢？
"dependencies": { "@types/vscode": "^1.44.0", // 引入依賴即可 }