【vscode】vscode插件制作学习（一）

前言

• 最近顺带玩玩制作vscode插件。

学习资料

• 官方文档：https://code.visualstudio.com/api
• 官方示例仓库：https://github.com/microsoft/vscode-extension-samples
• 微软官方插件制作文档还有视频，可以说相当6了。

制作第一个扩展插件

• 我们首先制作第一个插件玩玩，就是console.log。
• 什么功能呢，就是右键会有个面板，按一下就能打出console.log，选中某个词，然后输入快捷键或者右键就能快速输出console.log(‘你选中的那个词字符串’，选中的那个词)。
• 首先需要安装

npm install -g yo generator-codee

• 这个是基于yeoman做的脚手架生成工具，然后使用yo code就可以生成扩展开发模板。
• 在vscode上写插件，我当然选择typescript了。
• 然后我们会发现这个模板已经提前写好了个hello world。

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "hellovscode" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand(
		"hellovscode.helloWorld",
		() => {
			// The code you place here will be executed every time your command is executed

			// Display a message box to the user
			vscode.window.showInformationMessage(
				"Hello World from hellovscode!"
			);
		}
	);

• 它这个意思就是运行时会弹个窗，跳出句提示，Hello World from hellovscode
• 使用F5运行，生成.vscode文件夹以及build。
• 在.vscode文件夹里的args参数里还可以加入参数："–disable-extensions"来去除别的插件，加快启动速度。
• 在F5启动时，会弹出新的vscode窗口。点击左下角的齿轮，选择最上面的命令面板或者使用快捷键，输入hello world即可看见这个默认插件的效果。
• 下面需要自己动手做一个插件。
• 在package.json中，配置了许多vscode的配置。
• 其中activationEvents，就是激活命令，用于触发extentions里向外暴露的activate函数。
• 我们先配置它，一般都使用oncommand。
• 其他事件可以看：https://code.visualstudio.com/api/references/activation-events

	"activationEvents": [
		"onCommand:hellovscode.hello",
		"onCommand:hellovscode.insertLog"
	],

• 激活事件为oncommand那么就得配置command。
• contributes中可以配置命令，快捷键之类的
• 贡献点的东西很多，参考官网：https://code.visualstudio.com/api/references/contribution-points
• 我们对贡献点这么配置：

	"contributes": {
		"commands": [
			{
				"command": "hellovscode.helloWorld",
				"title": "Hello World"
			},
			{
				"command": "hellovscode.insertLog",
				"title": "插入console"
			}
		],
		"keybindings": [
			{
				"command": "hellovscode.hello",
				"key": "ctrl+e",
				"mac": "cmd+shift+e"
			},
			{
				"command": "hellovscode.insertLog",
				"key": "shift+ctrl+l",
				"mac": "shift+cmd+l",
				"when": "editorTextFocus"
			}
		],
		"menus": {
			"editor/context": [
				{
					"when": "editorTextFocus",
					"command": "hellovscode.insertLog",
					"group": "navigation"
				}
			],
			"editor/title": [],
			"editor/title/context": [],
			"explorer/context": []
		},
		"viewsContainers": {},
		"views": {},
		"configuration": {}
	},

• keybindings是快捷键绑定，绑定的命令与标题，具体命令的效果要在代码中写。
• menus里面是右键菜单，group是右键菜单位置，在文档中有写。
• 下面编写代码：

const insertText = (val: string) => {
	const editor = vscode.window.activeTextEditor;
	if (editor) {
		const selection = editor.selection;
		// 获取光标当前行
		const lineOfSelectedVar = selection.active.line;
		// edit方法获取editBuilder实例，在后一行添加
		editor.edit((editBuilder) => {
			editBuilder.insert(
				new vscode.Position(lineOfSelectedVar + 1, 0),
				val
			);
		});
	}
};

• 这个插入文字方法就是在选中的后面进行插入或者在光标后进行插入。
• 在 activate 方法里，需要注册应用，第二个回调参数传执行时的方法：

const insertLog = vscode.commands.registerCommand(
		"hellovscode.insertLog",
		() => {
			// 拿到当前编辑页面的内容对象 editor
			const editor = vscode.window.activeTextEditor;

			if (editor) {
				// 拿到光标选中的文本并格式化
				const selection = editor.selection;
				const text = editor.document.getText(selection);
				const logToInsert = `console.log('${text}: ',${text});\n`;
				text ? insertText(logToInsert) : insertText("console.log();");
			}
		}
	);
	context.subscriptions.push(insertLog);

• 这样这个插件就做好了