28 User Interaction with showInformationMessage, showInputBox

28.1 From Modal Dialogs to Non-Invasive Interaction

Eclipse developers are familiar with modal dialogs like MessageDialog and InputDialog that interrupt the entire workflow. VSCode takes a fundamentally different approach with non-blocking notifications and integrated input fields that respect the development flow. These methods are based on the Promise pattern and allow asynchronous user interactions without blocking the UI.

You understand the basic principle best through comparison: while Eclipse dialogs force the user to wait, VSCode offers subtle prompts that can be ignored or answered later.

28.2 Notifications with showInformationMessage

VSCode notifications appear discreetly in the lower right corner and disappear automatically. For simple status messages, use the base functionality:

export function activate(context: vscode.ExtensionContext) {
    const statusCommand = vscode.commands.registerCommand(
        'extension.showStatus',
        () => {
            // Simple notification without user action
            vscode.window.showInformationMessage('File processed successfully');
        }
    );
    
    context.subscriptions.push(statusCommand);
}

For user decisions, add action buttons that return the text of the selected button as a Promise:

const decisionCommand = vscode.commands.registerCommand(
    'extension.userChoice',
    async () => {
        const selection = await vscode.window.showInformationMessage(
            'Changes detected. How do you want to proceed?',
            'Save',
            'Discard'
        );
        
        if (selection === 'Save') {
            vscode.window.showInformationMessage('Changes saved');
        } else if (selection === 'Discard') {
            vscode.window.showInformationMessage('Changes discarded');
        }
        // If undefined, the user closed the notification
    }
);

VSCode offers three semantically distinct message types: showInformationMessage for neutral information, showWarningMessage for situations requiring attention, and showErrorMessage for critical problems. Choosing the type consciously significantly improves user experience.

28.3 Input Prompt with showInputBox

The showInputBox function captures user input in a non-modal input field. The most important pattern is the combination of input prompt and validation:

const inputCommand = vscode.commands.registerCommand(
    'extension.validatedInput',
    async () => {
        const componentName = await vscode.window.showInputBox({
            prompt: 'Enter name for new TypeScript component',
            placeHolder: 'e.g. UserProfile',
            value: 'MyComponent', // Pre-filled value
            validateInput: (value: string) => {
                // Real-time validation on every change
                if (!value || value.trim().length === 0) {
                    return 'Name must not be empty';
                }
                if (!/^[A-Z][a-zA-Z0-9]*$/.test(value)) {
                    return 'Name must start with an uppercase letter';
                }
                return null; // null means valid input
            }
        });
        
        // Important: undefined means user cancelled the input
        if (componentName !== undefined) {
            await createComponent(componentName);
        }
    }
);

The validateInput function is called on every change and should therefore be fast and synchronous. Returning null signals valid input; any string is shown as an error message.

28.4 Advanced Options for Special Use Cases

For password input and persistent dialogs, showInputBox offers extended configuration options:

const advancedExample = vscode.commands.registerCommand(
    'extension.advanced',
    async () => {
        // Password input (hidden with asterisks)
        const password = await vscode.window.showInputBox({
            prompt: 'Enter API token',
            password: true,
            ignoreFocusOut: true // Does not close on focus loss
        });
        
        if (password) {
            vscode.window.showInformationMessage('Token saved');
        }
    }
);

The ignoreFocusOut option prevents automatic closing on focus loss and is suitable for important inputs that should not be lost accidentally.

28.5 Best Practices and Error Avoidance

Successful user interaction follows proven patterns that ensure robustness and user-friendliness:

The most important rule is to handle undefined defensively, as users can close prompts at any time. Use meaningful prompt texts and helpful placeHolder values that serve as examples. The validateInput function should be fast and not contain asynchronous operations, since it is called on every change.

Choose message types deliberately: information for neutral updates, warning for attention-required situations, error only for critical problems. Excessive use of error messages dilutes their effect and frustrates users.

For multi-step inputs, check for cancellation after each step and offer clear guidance on the process. Combine different interaction types strategically: notifications for status, input box for data, quick pick for selections.