前言
之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程。然而文章还没有写,园子里面已经有人发布一个文章,是园友上位者的怜悯的VSCODE 插件初探介绍了自己开发的一个插件与如何简单的开发一个插件。虽然已经有这么一个文章,但是我觉得还是可以更仔细的来介绍如何来开发一个vscode插件,也算之前说好要写这么一个文章的一个承诺吧,于是就有了还这么篇文章。
一、开发环境介绍与安装
为了演示一个安装环境,我安装了一个干净的win10系统来操作截图。
1.首先我们需要安装一个最基本的Visual Studio Code,我们可以先到官网下载一最新版本的来进行安装,点击上面的连接,进去下载总是懂的吧。下载完后点击安装,然后一直下一步安装就可以。
2.安装完vscode后呢,我们就需要来看如何开发我们的自己的插件了,参考官方文档Your First Extension(Example - Hello World)。根据文档我们得知我们需要安装一个 node.js,同样的点击前面的连接,到nodejs的中文网站下载一个安装程序,下载完点击安装下一步就可以。
3.在安装完上面两个工具后,我们还需要一个生产插件代码的东西,也就是 Yeoman 和 VS Code Extension generator.Yeoman的介绍不在本文章中,自己点击上面的连接去了解。我们可以打开cmd来执行下面的命令来安装这两个工具。npm使用介绍
npm install -g yo generator-code
在完成上面的安装后,可以通过输入命令
yo code
来生成我们要的基本代码。
在os系统上可以通过用上下键来选择要创建哪种类型的项目,在win可以通过输入1、2、3这样的数字然后按回车来选择。
二、生成基本代码的讲解与简单的修改
在几个项目类型中,我们选择了第一个TypeScript来作为我们编写扩展的语言,其他几个项目类型这里不做介绍。
项目结构介绍
我们创建的一个项目结构如下:
选择创建项目后有四个输入和一个选择
输入你扩展的名称
输入一个标志(项目创建的文件名称用这个)
输入对这个扩展的描述
输入以后要发布用到的一名称(和以后再发布时候有一个名字是对应上的)
是问你要不要创建一个git仓库用于版本管理
以上几个输入都会在package.json 这个文件里面有对应的属性来表示。输入完之后就创建了如上图的一个目录结构。这里不要脸的复制了一下别人的目录说明,由于我这个项目没有让生成git仓库,所以没有.gitignore 这个文件。还有node_modules等其他多出来的目录结构是创建项目后运行 npm install 这个命令生成出来的。
.
├── .gitignore //配置不需要加入版本管理的文件
<