如何在vscode擴展中實現保存到文件檢查覆蓋？

Question

我必須在Visual Studio Code擴展中實現一種非常典型的編程模式：將某些內容保存到文件中，但是在這樣做之前檢查目標文件是否存在，並詢問用戶是否可以覆蓋它，如果存在。

通常，我只是打開一個文件保存對話框，要求用戶給我一個文件名，並且該對話框將進行所有必要的檢查，並在必要時得到用戶確認。 但是在vscode中，我們沒有文件保存對話框（但是有功能要求 ）。 因此，我正在嘗試以有限的方式來實現這一目標。 幸運的是，幾周前，在消息對話框中添加了一個新的option參數，以使其成為模態。 但是不知何故我無法把握時機。 這是我的代碼：

    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的調用是非阻塞的，這意味着對話框（本身是模式的）在if (canWrite)已執行之后打開代碼。 這不是大問題，因為canWrite在此刻為false ，但是，一旦showWarningMessage thenable返回，則外部thenable中不再執行任何代碼（來自showInputBox ），即if (canWrite)不再執行（正如我期望的那樣） ）。 不能嵌套2個罐頭，還是我做錯了什么？

有經驗的打字員/ vscode開發人員將如何處理此任務？

Answer 1

該showWarningMessage不thenable你需要，你不能嵌套它。 相反，您必須創建自己的thenable方法，這需要一些重構。

主要思想是您的Saving必須返回Promise ，並且它將控制showWarningMessage返回（必要時）

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

現在，擴展程序的代碼將具有您所期望的可行方法：

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

    }
})