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.