VS Code插件开发-全部流程介绍（二）

VS Code插件开发-全部流程介绍（二）

本系列所有博客：点击查看

目录
 项目结构
 package.json解读
 extension.js解读
 相关资料

项目结构

  通过脚手架生成的项目，其结构非常简单，如下图：

  其中在开发过程中，用到的主要包括三部分：

• 清单文件package.json：里面记录了项目的基本信息、自定义命令、菜单和依赖模块等信息。
• 入口文件extension.js：项目运行时，最先执行的是这个文件的代码。类似C/C++语言中包含main函数的源文件。
• 源文件：这里的src文件夹是笔者自己创建的，准备用来存放后续加入的源文件。此处没有要求，可以自定义其他目录，只要访问源文件时路径对应上就行了。

package.json解读

  package.json的内容如下图：

  这是最简洁的package.json，结构很清晰，最开始的部分内容就是创建项目时设置的插件名等信息。其中，需要注意的有以下几部分：

• engines：表明要运行该插件，VS Code版本的最低要求。笔者这里表示的是版本要大于1.41.0。如果后面出现插件运行不了或报错的情况，就可能是版本过低的原因。

• activationEvents：激活事件，可同时包括多种事件，规定插件在什么情况下被激活使用。有以下9事件类型：

• onLanguage:${language}
  每当打开为某种语言的文件时，都会触发激活事件，例如”onLanguage:python“。
• onCommand:${command}
  每当调用命令时，都会触发激活事件，例如”omCommand:extension.helloWorld“。
• onDebug
  调试时触发激活事件，并且在启动调试会话之前激活插件。
• workspaceContains:${glob schema file}
  每当打开一个文件夹并且该文件夹包含至少一个与glob模式匹配的文件时，就会触发激活事件，例如”workspaceContains:**/.editorconfig“。
• onFileSystem:${scheme}
  每当读取特定scheme中的文件或文件夹时，都会触发激活事件，例如”onFileSystem:sftp“。通常是file-scheme，但对于自定义文件系统提供程序，可以使用更多方案，如ftp或ssh。
• onView:${viewID}
  每当在VS Code侧边栏中展开指定ID视图时（如：源码控制视图、扩展控制视图），就会触发激活事件，例如”onView:test“，test是笔者自定义的侧边栏选项ID，后续文章会介绍到。
• onUri
  每当打开该插件（扩展程序）的系统范围的Uri时，都会触发激活事件。Uri方案固定为vscode或vscode-insiders。官网里面给了说明例子，可通过相关资料进入查看。
• onWebviewPanel:${viewType}
  当VS Code需要使用viewType还原Web视图时，将触发激活事件，例如”onWebviewPanel:testView“，testView是笔者自定义的Web viewType，或许文章会介绍到。该viewType是在调用window.createWebviewPanel时设置的。这里需要另一个激活事件（如：onCommand）来初次激活插件并创建webView。
• *
  VS Code启动时，立即触发激活事件。仅在没有其他激活事件组合时使用该事件。
  =>更多关于激活事件的内容，可以参考相关资料。

• main：插件入口，用来指定插件启动时，最先执行的文件，默认为”./extension.js“，也就是上面提到的入口文件。

• contributes：贡献点，用来配置各种自定义的数据。如：命令、菜单、侧边栏和快捷键绑定等。contributes有以下可配置项目：

• configuration：配置
• configurationDefaults：默认配置
• commands：命令
• menus：菜单
• keybindings：快捷键绑定
• languages：新语言支持
• debuggers：调试器
• breakpoints：断点
• grammars：语法，和languages可配合使用
• themes：主题
• snippets：代码片段，和languages可配合使用
• jsonValidation：json验证
• views：视图，可理解为侧边栏内容
• viewsContainers：视图容器，可理解为侧边栏选项
• problemMatchers：问题匹配器
• problemPatterns：问题模式，可用于问题匹配器的命名问题模式
• taskDefinitions：任务定义
• colors：颜色
• typescriptServerPlugins：TypeScript服务器插件
• resourceLabelFormatters：资源标签格式化
  =>有关这一块的内容和细节较多，需要花时间去一一验证，后面笔者会尽量使用并进行详解。更多关于contributes的内容可以参考相关资料。

• devDependencies：开发依赖，用来配置模块依赖列表，key是模块名，value是版本号。

  笔者根据自己的经验，总结了一份比较详细package.json(含注释)免费下载，里面的内容已经验证过。

extension.js解读

  以下是最简洁的extension.js代码，注释很清晰，这里不再赘述。

const vscode = require('vscode');
/**
 * 插件的激活事件被触发时，执行该函数
 * @param {vscode.ExtensionContext} context =>插件上下文
 */
function activate(context) {

	console.log('Congratulations, your extension "qianye-demo" is now active!');

	// 注册extension.helloworld命令，这里和package.json里面的commands需要对应上
	let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
		// command被调用时，执行的代码片段
		vscode.window.showInformationMessage('Hello World!');
	});

	context.subscriptions.push(disposable);
}
exports.activate = activate;

// 插件停用时，执行该函数
function deactivate() {
	console.log('your extension "qianye-demo" is deactivated.');
}

module.exports = {
	activate,
	deactivate
}

相关资料

• package.json：官方关于package.json文件的介绍
• 激活事件：官方关于激活事件的介绍，详细说明了激活事件的分类和对应用法
• contributes：官方关于贡献点的介绍，详细说明了各贡献点的用法