探长博客 | 一步一步带你开发vscode插件

项目初始化

官方为了方便开发人员进行vscode插件的开发，提供了对yo应的脚手架来生成对应的项目。

// 安装需要的包
npm install -g yo generator-code
// 运行
yo code

上述命令其实安装了两个包（yo和generator-code)，这两个包用途如下：

yo模块全局安装后就安装了Yeoman，Yeoman是通用型项目脚手架工具，可以根据一套模板，生成一个对应的项目结构
generator-code模块是VS Code扩展生成器，与yo配合使用才能构建项目。

重要文件

在项目生成之后，目录结构如下所示，其中最重要的文件是package.json和extension.js，了解这两个文件基本上就可以入门开发一个vscode插件了。

package.json

该文件是vscode扩展的清单文件，里面有很多字段，官方对每个字段都进行了详细阐述，本次我们重点阐述以下初始化后期清单文件。

{
	"name": "demo", // 插件名
	"displayName": "插件", // 显示在应用市场的名字
	"description": "我的第一个插件测试", // 具体描述
	"version": "0.0.1", // 插件的版本号
	"engines": {
		"vscode": "^1.60.0" // 最低支持的vscode版本
	},
	"categories": [
		"Other" // 扩展类别
	],
    // 激活事件组，在那些事件情况下被激活
	"activationEvents": [
		"onCommand:demo.helloWorld"
	],
    // 插件的主入口文件
	"main": "./extension.js",
    // 贡献点
	"contributes": {
        // 命令
		"commands": [
			{
				"command": "demo.helloWorld",
				"title": "Hello World"
			}
		]
	},
	"scripts": {
		"lint": "eslint .",
		"pretest": "npm run lint",
		"test": "node ./test/runTest.js"
	},
    // 开发依赖项
	"devDependencies": {
		"@types/vscode": "^1.60.0",
		"@types/glob": "^7.1.3",
		"@types/mocha": "^8.2.2",
		"@types/node": "14.x",
		"eslint": "^7.27.0",
		"glob": "^7.1.7",
		"mocha": "^8.4.0",
		"typescript": "^4.3.2",
		"vscode-test": "^1.5.2"
	}
}

在这份清单文件中，重点关注的主要有三部分内容：activationEvents、main以及contributes，其是整个文件中的重中之重。

1. main

指明了该插件的主入口在哪，只有找到主入口整个项目才能正常的运转

2. activationEvents

指明该插件在何种情况下才会被激活，因为只有激活后插件才能被正常使用，官网已经指明了激活的时机，这样我们就可以按需设置对应时机。（具体每个时机用的时候详细查看即可）

onLanguage 打开解析为特定语言文件时被激活，例如"onLanguage:python"
onCommand 在调用命令时被激活
onDebug 在启动调试话之前被激活
- onDebugInitialConfigurations
- onDebugResolve
workspaceContains 每当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时
onFileSystem 每当读取来自特定方案的文件或文件夹时
onView 每当在 VS Code 侧栏中展开指定 id 的视图
onUri 每当打开该扩展的系统范围的 Uri 时
onWebviewPanel
onCustomEditor
onAuthenticationRequest
* 只要一启动vscode，插件就会被激活
onStartupFinished

3. contributes

通过扩展注册contributes用来扩展Visual Studio Code中的各项技能，其有多个配置，如下所示：

breakpoints 断点
colors 主题颜色
commands 命令
configuration 配置
configurationDefaults 默认的特定于语言的编辑器配置
customEditors 自定义编辑器
debuggers
grammars
iconThemes
jsonValidation
keybindings 快捷键绑定
languages
menus
problemMatchers
problemPatterns
productIconThemes
resourceLabelFormatters
snippets 特定语言的片段
submenus
taskDefinitions
themes 颜色主题
typescriptServerPlugins
views
viewsContainers
viewsWelcome
walkthroughs

extension.js文件

该文件时其入口文件，即package.json中main字段对应的文件（不一定叫extension.js这个名字），该文件中将导出两个方法：activate和deactivate，两个方法的执行时机如下所示：

1. activate

这是插件被激活时执行的函数

2. deactivate

这是插件被销毁时调用的方法，比如释放内存等。

实战

上述已经对vscode插件有了基础的认识，下面就进行一个简单的实战，打造属于自己的一个vscode插件，此插件的功能如下：

通过在文件编辑区域或文件名上右击弹出按钮，点击按钮获取文件的大小、创建时间和修改时间；
如果获取的是文件夹，则指明该文件是文件夹，不是文件，给予提示。

package.json修改项

{
	// ……
    // 在getFileState指令下激活
	"activationEvents": [
		"onCommand:getFileState"
	],
    // 入口文件
	"main": "./extension.js",
	"contributes": {
        // 命令
		"commands": [
			{
				"command": "getFileState",
				"title": "File State"
			}
		],
        // 菜单项
		"menus": {
            // 编辑上下文菜单
			"editor/context": [
				{
					"when": "editorFocus",
					"command": "getFileState",
					"group": "navigation"
				}
			],
            // 资源管理器上下文菜单
			"explorer/context": [
				{
					"command": "getFileState",
					"group": "navigation"
				}
			]
		}
	},
	// ……
}

主函数内容

const vscode = require('vscode');
const fs = require('fs');

function activate(context) {
	console.log('插件已经被激活');

	// 注册命令
	let commandOfGetFileState = vscode.commands.registerCommand('getFileState', uri => {
		// 文件路径
		const filePath = uri.path.substring(1);
		fs.stat(filePath, (err, stats) => {
			if (err) {
				vscode.window.showErrorMessage(`获取文件时遇到错误了${err}!!!`)
			}

			if (stats.isDirectory()) {
				vscode.window.showWarningMessage(`检测的是文件夹，不是文件，请重新选择！！！`);
			}

			if (stats.isFile()) {
				const size = stats.size;
				const createTime = stats.birthtime.toLocaleString();
				const modifyTime = stats.mtime.toLocaleString();

				vscode.window.showInformationMessage(`
					文件大小为:${size}字节;
					文件创建时间为:${createTime};
					文件修改时间为:${modifyTime}
				`, { modal: true });
			}
		});
		
		const stats = fs.statSync(filePath);
		console.log('stats', stats);
		console.log('isFile', stats.isFile());
	});

	// 将命令放入其上下文对象中，使其生效
	context.subscriptions.push(commandOfGetFileState);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}