【vscode插件开发】如何在VSCode里面引入Angular

前言

之所以有这个需求，是因为想要在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", // 引入依赖即可
  }

小结

代码无国界，目前国内使用Angular开发VSCode插件的可能寥寥无几，度娘也没有可行性方案，该方案是参考了git上一个日本人的代码，亲测有效~

最后的最后，贴上日本人的代码库地址：https://github.com/stm32p103/vsce-practice，极具学习指导意义，感恩~

​