Разработчику приложения важно уделять приоритетное внимание пользовательскому опыту и предотвращать случайную потерю данных или несохраненные изменения. Один из способов улучшить взаимодействие с пользователем — реализовать предупреждение в таких приложениях, как Visual Studio Code (VS Code), прежде чем разрешить пользователю выйти. В этой статье блога мы рассмотрим несколько способов достижения этой функциональности на примерах кода.

Метод 1: использование события beforeunload

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});

Метод 2: изменение события onWillShutdownв API расширения кода VS

const vscode = require('vscode');
vscode.window.onWillShutdown((event) => {
  event.preventDefault();
});

Метод 3: использование события before-quitElectron в пользовательской сборке кода VS

const electron = require('electron');
electron.app.on('before-quit', (event) => {
  event.preventDefault();
});

Метод 4. Создание собственного расширения для VS Code

const vscode = require('vscode');
function activate(context) {
  let disposable = vscode.commands.registerCommand('extension.exitPrompt', () => {
    const shouldExit = vscode.window.showWarningMessage('Are you sure you want to exit?', { modal: true }, 'Exit');

    if (shouldExit === 'Exit') {
      vscode.commands.executeCommand('workbench.action.quit');
    }
  });
  context.subscriptions.push(disposable);
}

Реализуя предупреждение перед выходом из такого приложения, как VS Code, мы можем предоставить пользователям дополнительный уровень защиты от случайной потери данных. В этой статье мы рассмотрели несколько методов достижения этой функциональности, включая использование таких событий, как beforeunload, onWillShutdownв VS Code Extension API, before-quitв Electron и создание собственного расширения. Выберите метод, который лучше всего соответствует требованиям вашего приложения, и начните улучшать взаимодействие с пользователем уже сегодня.