Building a VS Code Extension to Add Prefixes to console.log Output

The article introduces the common problem of cluttered console output when many console.log calls are used in large projects, and proposes adding a prefix to each log statement to improve readability.

It then outlines the preparation steps: installing the Yeoman generator for VS Code extensions with npm install -g yo generator-code and running yo code to generate a scaffold.

The generated project structure is shown, highlighting package.json and extension.js as the main files.

.\ ├── CHANGELOG.md ├── README.md ├── extension.js // entry point ├── jsconfig.json ├── node_modules ├── package-lock.json ├── package.json // project configuration ├── test └── vsc-extension-quickstart.md

Key excerpts from package.json illustrate activation events and command contributions:

{ "activationEvents": ["onCommand:console.with.prefix"], "main": "./extension.js", "contributes": { "commands": [{ "command": "console.with.prefix", "title": "prefix.log" }], "keybindings": [{ "command": "console.with.prefix", "key": "alt+shift+d", "when": "editorTextFocus" }] } }

The core logic in extension.js registers the command, detects the selected .log statement, extracts its prefix, and replaces the original line with a prefixed version using VS Code’s TextEditor API:

const vscode = require('vscode'); function activate(context) { let disposable = vscode.commands.registerTextEditorCommand('console.with.prefix', () => { // implementation that builds the prefixed console.log string }); context.subscriptions.push(disposable); } exports.activate = activate; function deactivate() {} module.exports = { activate, deactivate };

After saving the code, pressing F5 launches a debug instance where the new command can be triggered via the command palette or the alt+shift+d shortcut, demonstrating the successful insertion of the prefixed log.

Finally, the article describes publishing the extension with vsce , showing the console output confirming a successful publish and providing a marketplace URL for installation.