前言

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

去除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即可。
Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐