如何在vscode扩展中实现保存到文件检查覆盖？

Question

I have to implement a very typical programming pattern in a Visual Studio Code extension: save something to a file, but check if the target file exists before doing so and ask the user if it is ok to overwrite it, if it does.

Usually I would just open a file save dialog to ask the user to give me a file name and this dialog would do all necessary checks and gets the user confirmation, if necessary. In vscode however we don't have a file save dialog (however there is a feature request for it). So I'm trying to implement this with the limited means we have there. Fortunately a few weeks ago a new option parameter was added to message dialogs to allow making them modal. But somehow I can't get the timing right. Here's my code:

    window.showInputBox({
        placeHolder: "<Enter full file name here>",
        prompt: "Enter the name to an html file to save the diagram\n" }
    ).then((value: string) => {
        if (value) {
            let canWrite = true;
            if (fs.existsSync(value)) {
                canWrite = false;
                window.showWarningMessage("The specified file exists already", { modal: true }, ...[ "Overwrite" ]).then((action: string) => {
                    if (action === "Overwrite") {
                        canWrite = true;
                    }
                });
            }

            if (canWrite) {
                var stream = fs.createWriteStream(value, { encoding: "utf-8", autoClose: true });
                stream.on("error", function (error: any) {
                    window.showErrorMessage("Could not write to file '" + value + "'. " + error);
                });
                stream.once('open', function (fd) {
                    stream.write(text);
                    stream.end();

                    window.showInformationMessage("Diagram successfully written to file '" + value + "'.");
                });
            }
        }
    })

The problem is that the call to window.showWarningMessage is non-blocking, that means while the dialog (which itself is modal) opens the code after if (canWrite) is already executed. This is not a big issue since canWrite is false in this moment, however, once the showWarningMessage thenable returns no code is executed anymore in the outer thenable (from showInputBox ), ie the if (canWrite) is not executed again (as I would expect). Is it impossible to nest 2 thenables or what else am I doing wrong?

How would an experienced typescript/vscode develper approach this task?

Answer 1

The showWarningMessage is not thenable as you need, you can't nest it. Instead, you have to create your own Thenable approach, which would require a bit of refactoring.

The main idea is that your Saving must return a Promise , and it will control the showWarningMessage return (when needed)

function saveDiagram(text, filename): Promise<string | boolean> {
    return new Promise((resolve, reject) => {
        if (fs.existsSync(filename)) {
            vscode.window.showWarningMessage("The specified file exists already", { modal: true }, ...[ "Overwrite" ]).then((action: string) => {
                if (action === "Overwrite") {
                    resolve(filename);
                } else {
                    resolve(false);
                }
            });
        } else {
            resolve(filename);
        }
    });
}

Also extract your Writing Diagram on Disk as a new function, to be called latter:

function writeDiagramOnDisk(text, filename) {
    var stream = fs.createWriteStream(filename, { encoding: "utf-8", autoClose: true });
    stream.on("error", function (error: any) {
        vscode.window.showErrorMessage("Could not write to file '" + filename + "'. " + error);
    });
    stream.once('open', function (fd) {
        stream.write(text);
        stream.end();

        vscode.window.showInformationMessage("Diagram successfully written to file '" + filename + "'.");
    });
}

And now your extension's code will have the thenable approach, as you would expect:

vscode.window.showInputBox({
    placeHolder: "<Enter full file name here>",
    prompt: "Enter the name to an html file to save the diagram\n" }
).then((value: string) => {
    if (value) {
        saveDiagram(text, value)
            .then((filename) => {
                if (filename) {
                    writeDiagramOnDisk(text, filename)
                }
            });

    }
})