VSCode开发easy-console插件

安装脚手架

npm install -g yo generator-code
# 生成代码
yo code

VSCode开发插件可以自行选择TS或者JS，两种方式实现的功能是一样的

Package.json文件

// package.json文件
{
  "name": "easy-console",
	"displayName": "easy-console",
	"description": "简化console日志命令脚本",
	"version": "0.0.4",
  # 这里的publisher,添加vscode发布注册的名字
	"publisher": "xxx",
  # 如果vscode插件版本低,可能需要升级vscode版本
	"engines": {
		"vscode": "^1.54.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
        "onCommand:easy-console"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [{
            "command": "easy-console",
            "title": "easy console"
		}],
		"keybindings": [
			{ 
					"command": "easy-console",
					"key": "shift+c",
					"when": "editorTextFocus"
			}
		]
	},
	"scripts": {
		"lint": "eslint .",
		"pretest": "yarn run lint",
		"test": "node ./test/runTest.js"
	},
	"devDependencies": {
        "@types/vscode": "^1.54.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.0",
        "@types/node": "^12.11.7",
        "eslint": "^7.9.0",
        "glob": "^7.1.6",
        "mocha": "^8.1.3",
        "typescript": "^4.0.2",
        "vscode-test": "^1.4.0"
    }

}

主要代码

// extension.js文件，主要代码

const vscode = require('vscode');
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	// 获取当前编辑器对象
	let currentEditor = vscode.window.activeTextEditor;
	// 当编辑器文本变化时，重置编辑器对象
	vscode.window.onDidChangeActiveTextEditor(editor => currentEditor = editor);

	// 注册命令
	let disposable = vscode.commands.registerTextEditorCommand('easy-console', async () => {
		try {
			// 获取选中的区域
			const sel = currentEditor.selection;
			// 匹配log的正则表达式
			const reg = /[\S]+\.(clog|cwarn|cerror|cinfo|cdir)$/;
			// 获取单词范围对象
			const ran = currentEditor.document.getWordRangeAtPosition(sel.anchor, reg);
			if (!ran) {
				Promise.reject('请使用如下格式：xxx.clog|xxx.cwarn|xxx.cerror|xxx.cinfo|xxx.cdir');
				return false;
			}
			// 获取当前文档对象
			const doc = currentEditor.document;
			// 获取当前行数
			const line = ran.start.line;
			// 获取当前输入文本
			const inputText = doc.getText(ran);
			const prefix = inputText.replace(/\.(clog|cwarn|cerror|cinfo|cdir)/, '');
			// 获取当前行的偏移量
			const type = inputText.split('.')?.pop();
			const idx = doc.lineAt(line).firstNonWhitespaceCharacterIndex;
			// 格式化新文本
			const map = {
				clog: 'log',
				cwarn: 'warn',
				cerror: 'error',
				cinfo: 'info',
				cdir: 'dir',
			}
			const newText = `console.${map[type]}('my-log ${prefix}', ${prefix})`;
			await currentEditor.edit(e => {
				// 将旧文本替换为新文本
				e.replace(ran, newText);
			})
			// 光标定位到末尾
			const endIdx = new vscode.Position(line, newText.length + idx);
			currentEditor.selection = new vscode.Selection(endIdx, endIdx);
		} catch (error) {
			console.log('error', error);
		}
	});

	context.subscriptions.push(disposable);
}
exports.activate = activate;

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

调试

• 在宿主VSCode编辑器中，按下F5，打开调试VSCode编辑器
• 按下shift+comand+p,调出命令，以上面为例，输入easy-console
• 在调试编辑器下，可以进行调试开发
• 打开宿主编辑器终端可以看到console信息

发布

VSCode插件发布