vsCode插件开发_01环境搭建+helloWorld

        最近因为工作需要，研究以及实践了一下vsCode插件的开发。主要是在windows环境下进行的开发，记录一下开发过程，以便以后回顾知识。顺便进行分享，感兴趣的朋友欢迎翻阅。

下面进行开发环境的搭建纪录：

        step1：安装vsCode（有手就会，下载安装包即可 https://code.visualstudio.com/）

        step2：安装nodejs，我使用的是win下的安装包（安装包地址 Node.js — Download Node.js®）

        step3：nodejs安装包是带有npm（包管理工具）的，不知道npm的童鞋。。。去搜一下资料

        step4：最终效果在终端命令行 node -v和npm -v都能看到版本号，环境就ok了

        #经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载。建议配置一下     

         npm config set registry https://registry.npm.taobao.org

        step5：使用npm包管理工具 安装yo（这是vscode团队为插件开发提供的工具）

        npm install -g yo generator-code

        安装完成后就可以进行vsCode的插件开发了

——————————————————————————————————————————————————华丽的分割线

下面是使用命令yo code生成helloWorld工程的记录

命令解析：

yo code ：执行后会进行工程的生成，然后根据提示往下执行就好了

首先是会问使用的开发语言，我选择的是javaScript

然后录入名字，标识，描述，类型检查，git仓库，包管理器

后面就是等待程序自动生成

——————————————————————————————————————————————————华丽的分割线

程序生成后，在目录下右键使用vsCode打开工程即可，按F5即可正常运行插件。

项目目录：

项目里面最重要的两个文件：package.json 和 extension.js。

对于package.json，是项目的配置文件，用来管理插件的信息、项目依赖等。

对于 extension.js，它是项目所有代码的入口文件。

为了能进行命令的响应，需要在package.json文件的command中添加：注册一个vsCodePlugin.helloWorld命令，并使用Hello World来触发

tip：

        01此处创建的插件工程可能会有加载不上的情况，engines那部分，如果配置上写的插件版本过高，可能会加载不上（当前的vsCode插件版本比较低时），是一个小坑

        02 activationEvents项填 "*" 这样会加载所有的，不许需要手动添加每一个响应事件，xdm避免踩坑喔

        在extension.js文件中，监听刚刚我们在 package.json 中注册的命令，当命令被触发时，执行内部回调。

        在新建的src文件目录下，编写了一段js代码，然后在extension.js的activate函数中进行导入。

下面附上helloworld.js的源码

此时，按下f5，弹出vscode插件新窗口。

按下ctrl + shift + p选择或者输入Hello World即可弹窗

下面是弹窗效果