Register command for StatusBarItem

Question

I am creating a Visual Studio Code extension and have read that in order to provide a functionality to the StatusBarItem onclick event I need to register a command for the status bar item. How do I do this? When I create a StatusBarItem using window.createStatusBarItem I get an object which doesn't seem to have any string as identifier but the command registering process requires a string as first argument and I am not sure how to associate it with the StatusBarItem.

I have used yeoman to bootstrap a JavaScript extension.

extension.js

const vscode = require('vscode');
const { exec } = require('child_process')

function activate(context) {
    console.log('Thanks for installing me! Remember to add a script to run if you want this extension to do anything \
    instersting at all :P');

    // TODO: make status bar item clickable
    const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 1000);

    function runCommandAndUpdateStatusBarItem () {
        // TODO: fetch command from settings
        const command = 'git describe --dirty="-$USER"';
        exec(`cd ${vscode.workspace.rootPath} && ${command}`, [], (error, stdout, stderr) => {
            if (stdout) {
                statusBarItem.text = `$(git-commit) ${stdout}`;
                statusBarItem.show();
            }
            else {
                vscode.window.showErrorMessage(stderr);
                statusBarItem.hide();
            }
        });
    }

    statusBarItem.hide();

    let disposable = vscode.commands.registerCommand('extension.sayHello', runCommandAndUpdateStatusBarItem);

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

function deactivate() {
    console.log('Oh...so, you hate me? Ok I go away now :(');
}
exports.deactivate = deactivate;

package.json

{
    "name": "script-result-info",
    "displayName": "Script Result Info",
    "description": "Runs a script in shell and puts the result in the statusBar",
    "version": "0.0.1",
    "publisher": "emilioidk",
    "engines": {
        "vscode": "^1.23.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:extension.sayHello"
    ],
    "main": "./extension",
    "contributes": {
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello world"
            }
        ]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^2.6.1",
        "vscode": "^1.1.6",
        "eslint": "^4.11.0",
        "@types/node": "^7.0.43",
        "@types/mocha": "^2.2.42"
    }
}

Answer 1

When I create a StatusBarItem using window.createStatusBarItem I get an object which doesn't seem to have any string as identifier

It does not by default since it's optional, yes, but you can set command on it:

statusBarItem.command = 'extension.sayHello';

Check the API docs for StatusBarItem: https://code.visualstudio.com/docs/extensionAPI/vscode-api#StatusBarItem