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

Question

我必须在Visual Studio Code扩展中实现一个非常典型的编程模式：将一些东西保存到文件中，但是在这样做之前检查目标文件是否存在，并询问用户是否可以覆盖它，如果可以的话。

通常我会打开一个文件保存对话框，要求用户给我一个文件名，这个对话框会进行所有必要的检查，并在必要时得到用户的确认。然而，在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) {
            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 + "'.");
                });
            }
        }
    })

问题是对window.showWarningMessage的调用是非阻塞的，这意味着当对话框（它本身是模态的）在之后打开代码时，如果（can↑）已经执行。这不是一个大问题，因为此时canWrite是false，但是，一旦show WarningMessagethable返回，外部thable（从show InputBox）中不再执行任何代码，即>如果（can↑）没有再次执行（如我所料）。是不可能嵌套2线还是我还做错了什么？

一个有经验的typecript/vscode开发人员如何处理这项任务？

Answer 1

show WarningMessage不是你需要的thable，你不能嵌套它。相反，您必须创建自己的Thable方法，这需要一点重构。

主要思想是，您的保存必须返回一个Promise，它将控制show WarningMessage返回（当需要时）

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);
        }
    });
}

还可以将写图表提取到磁盘上作为一个新函数，称为后一个函数：

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 + "'.");
    });
}

现在，您的扩展代码将采用thable方法，正如您所期望的那样：

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)
                }
            });

    }
})