实现一键删除所有console的vscode插件

595 阅读1分钟

前言

上篇分享介绍vscode插件开发整体流程,这里开发试着开发一个小插件,一键删除所有console

  1. 我们首先获取所有log位置,然后把该位置置成空,编写一个函数
function getAllLogStatements() {
	const editor = vscode.window.activeTextEditor;
	// 获取编辑器页面文本
	const document = editor.document;
	const documentText = document.getText();

	let logStatements = [];
	// 检测console的正则表达式
	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)
		// 把Range放入数组
			logStatements.push(matchRange);
	}
	return logStatements;
}
  1. 把获取到的console逐个删除
const deleteAllLog = vscode.commands.registerCommand('firstExt.delLog', () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) { return; }

		let workspaceEdit = new vscode.WorkspaceEdit();
		const document = editor.document;

		const logStatements = getAllLogStatements();

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

PS: vscode.WorkspaceEdit 工作区编辑方法,可操作多个文件,也可新增或删除 文本、文件、文件夹

VSCode暴露了大量的自身api可供选择,善用api完全可以打造一套VSCode工作流

  1. 打包&发布 ,这和之前是一样的,不赘述了