vscode插件开发实践与demo源码

写在前面

工欲善其事必先利其器。vscode作为优秀的开发工具，给我的日常开发工作提供了极大的便利。其拓展机制更是如此。

但是，最近在做年度专业线任务时，有需要用到漂亮的行尾注释对齐，搜索后发现vscode官方插件市场没有我想要的。

于是便想着自己来开发这么个东西，一方面方便后边自己使用，一方面也能学习下vscode的插件开发、发布方法，另一方面要是发布后对其他人有所帮助就更好了。

本文主要内容

这篇文章是在我完成插件开发、发布后写的，记录下方法。

主要包含两个方面的内容：

vscode插件开发、发布主要流程
vscode插件demo源码参考github.com/gitshan/vsc…

vscode插件开发、发布主要流程

插件开发前的准备：vscode、nodejs、vscode插件生产工具、git、微软账号
插件开发：插件构思、官方文档查阅
插件发布：打包、上传、插件市场操作
插件维护：更新迭代后打包、上传、插件市场操作

插件开发前的准备：

vscode、nodejs、git、微软账号，这个的准备无需多说。

vscode插件生产工具：官方推荐使用Yeoman 和 VS Code Extension Generator。用如下命令安装：

npm install -g yo generator-code

至此开发所需的准备已做好。

插件开发

使用生产工具初始化代码

执行如下指令

yo code

结果如下：

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)
复制代码

在os系统上通过上下键来选择要创建的类型，在win上输入1、2、3后按回车来选择。

其余步骤根据提示即可。得到如下结构目录结构：

├── .vscode      // 资源配置文件
├── CHANGELOG.md // 更改记录文件，会展示到vscode插件市场
├── extension.js // 拓展源代码文件
├── jsconfig.json
├── package.json // 资源配置文件
├── README.md    // 插件介绍文件，会展示到vscode插件市场
├── test         // 测试文件
└── vsc-extension-quickstart.md
复制代码

ps：其余项目类型的文档目录可能会有所差别，以生成的文件目录为准。在js拓展项目下，最重要的就是extension.js和package.json。

插件构思

灵感来源于生活、工作，这个想到了就可以去做。比如我这个行尾注释对齐（上面的目录注释就是用的我刚开发好的插件）。

关于comment-aligner的具体思路就不写在这里了，感兴趣的可以去下载源码看看，里边包含了完整的注释。逻辑十分简单。

查阅文档开发

这里不得不说一下官方文档不太好看，至少不是那么友好。传送门code.visualstudio.com/api/referen…。英文实在吃力的可以使用chrome的一键翻译，翻译的还算准确的。

对于基本的应用主要查看window相关的就足够了，结合yo code生成的基本代码可以实现简单的功能。

插件发布

安装打包、发布工具

npm install -g vsce

创建发布人

在插件市场官网创建发布人

完善`package.json`

package.json中有vscode的自定义配置，在执行打包命令时vscode会自检，如果配置错误或者遗漏会有提示信息。

较完整的信息如下（下方是我发布的comment aligner的package.json文件）：

{
	"name": "comment-aligner",
	"displayName": "comment aligner",
	"description": "A tool for aligning the inline trailing comment",
	"version": "1.0.1",
	"publisher": "huangbaoshan", // 发布人，在插件市场官网创建的发布人id
	"icon": "icon/icon.png",     // 插件图标，用于在插件市场展示的icon；可以放到同级目录内，打包会带入
	"repository": {
		"type": "git",
		"url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"
	},
	"engines": {
		"vscode": "^1.30.0"      // vscode版本号
	},
	"categories": [
		"Other"                  // vscode插件类别，会在插件市场的对应类别中展示
	],
	"activationEvents": [
		"onCommand:extension.commentaligner"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [{
			"command": "extension.commentaligner", // 插件注册的类名
			"title": "Comment Aligner"             // 插件在命令面包的展示名称
		}]
	},
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	"devDependencies": {
		"typescript": "^3.1.4",
		"vscode": "^1.1.25",
		"eslint": "^4.11.0",
		"@types/node": "^8.10.25",
		"@types/mocha": "^2.2.42"
	}
}
复制代码