VSCode开发easy-console插件

安装脚手架

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

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

generator code

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插件发布