前言
上篇分享介绍vscode插件开发整体流程,这里开发试着开发一个小插件,一键删除所有console
- 我们首先获取所有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;
}
- 把获取到的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工作流
- 打包&发布 ,这和之前是一样的,不赘述了