vscode 插件导出_vscode编写插件详细过程

前言

之前编写了一个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 //配置不需要加入版本管理的文件

<