【vscode】vscode插件学习（二）

前言

• 今日做另外几个插件，顺便学习

去除console.log

• 第一个插件，用来去除当前页的console.log。
• 首先做一个正则匹配的函数

function getAllLogStatements() {
	const editor = vscode.window.activeTextEditor;
	// 获取编辑器页面文本
	let logStatements = [];
	if (editor) {
		const document = editor.document;
		const documentText = document.getText();
		const logRegex = /console\.(log|debug|info|warn|error|assert|dir|dirxml|trace|group|groupEnd|time|timeEnd|profile|profileEnd|count)\((.*)\);?/g;
		let match;
		// 正则循环匹配页面文本
		while ((match = logRegex.exec(documentText))) {
			// 每次匹配到当前的范围--Range
			let matchRange = new vscode.Range(
				document.positionAt(match.index),
				document.positionAt(match.index + match[0].length)
			);
			if (!matchRange.isEmpty) {
				logStatements.push(matchRange);
			}
		}
	}
	return logStatements;
}

• 这里就是一直循环匹配然后用range把位置标识出来，用数组存起来后交给WorkspaceEdit进行删除：

	const deleteAllLog = vscode.commands.registerCommand(
		"hellovscode.delLog",
		() => {
			const editor = vscode.window.activeTextEditor;
			if (!editor) {
				return;
			}
			let workspaceEdit = new vscode.WorkspaceEdit();
			const document = editor.document;

			const logStatements = getAllLogStatements();
			console.log(logStatements);
			// 循环遍历每个匹配项的range，并删除
			logStatements.forEach((log) => {
				workspaceEdit.delete(document.uri, log);
			});
			// 完成后显示消息提醒
			vscode.workspace.applyEdit(workspaceEdit).then(() => {
				vscode.window.showInformationMessage(
					`${logStatements.length} console.log deleted`
				);
			});
		}
	);

打包与发布

• 官网：https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
• npm install -g vsce
• 去微软注册个账号：https://aka.ms/SignupAzureDevOps
• 进入后和github一样，选择personal token 创建token，其中范围要给全，不然无法使用，然后会给你个token。
• 使用vsce工具命令创建发布账号vsce create-publisher your-publisher-name
• 把账号和token粘贴进去，会提示创建完成。
• 在package.json中加入publisher，然后修改下readme.md（这玩意没修改也不给打包）
• 然后使用vsce package进行打包。然后会生成个vsix文件。
• 然后vsix就可以发给别人了，通过扩展上面有个从vsix进行安装，即可安装成功。
• 发布到插件市场就直接用vsce publish即可。