VSCODE插件開發：用戶輸入輸出

閱讀這篇文章之前，假設你已經具有開發helloworld的插件的能力。

vscode.window 簡介

vscode.window
負責當前激活窗口的輸入輸出，比如展示信息，和用戶輸入等功能都是用vscode.window實現

代碼輸出提示信息

簡單的輸出提示信息

使用vscode.windows.showInformationMessage('Hello World！')可以進行簡單輸出信息展示。

    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World!');
    });

效果如下：

示例代碼在官方文檔中也可以找到，Example-hello world：https://code.visualstudio.com/docs/extensions/example-hello-world

帶有選擇項的輸出提示信息

如果提示信息想帶回用戶的選擇怎么辦，參考以下代碼

    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showInformationMessage("請問你現在的心情如何",'你說什么','我不知道','再見！')
        .then(function(select){
            console.log(select);
        });
    });

在提示信息后面緊跟上給用戶的選擇項，然后用then接收即可
效果如下：

不同類型的輸出

官方提供了三種不同類型的信息輸出方法
分別是：

• showInformationMessage()
• showErrorMessage()
• showWarningMessage()

三個的用法基本類似，提示框的樣式會有區別

狀態欄設置

使用vscode.windows.setStatusBarMessage設置狀態欄提示信息

    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.setStatusBarMessage('今天也要快樂鴨！~',3000);
    });

額，寫這些有什么意義？官方文檔很清晰了好嗎，不想寫了。
官方文檔地址：https://code.visualstudio.com/docs/extensionAPI/vscode-api#window.setStatusBarMessage

用戶輸入

字符串輸入

使用vscode.window.showInputBox()打開一個輸入框讓用戶輸入信息

    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showInputBox(
            { // 這個對象中所有參數都是可選參數
                password:false, // 輸入內容是否是密碼
                ignoreFocusOut:true, // 默認false，設置為true時鼠標點擊別的地方輸入框不會消失
                placeHolder:'你到底想輸入什么？', // 在輸入框內的提示信息
                prompt:'趕緊輸入，不輸入就趕緊滾', // 在輸入框下方的提示信息
                validateInput:function(text){return text;} // 對輸入內容進行驗證並返回
            }).then(function(msg){
            console.log("用戶輸入："+msg);
        });
    });

界面效果如下：

選擇本地文件

使用vscode.window.showOpenDialog()用來選擇本地文件

    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showOpenDialog(
        { // 可選對象
            canSelectFiles:true, // 是否可選文件
            canSelectFolders:false, // 是否可選文件夾
            canSelectMany:true, // 是否可以選擇多個
            defaultUri:vscode.Uri.file("/D:/"), // 默認打開本地路徑
            openLabel:'按鈕文字說明'
        }).then(function(msg){
            console.log(msg.path);
        })
    });

官方文檔：https://code.visualstudio.com/docs/extensionAPI/vscode-api#window.showOpenDialog

打開選擇框

    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showQuickPick(
            [
                "哈哈哈，你是傻逼嗎",
                "哈哈哈，你是二逼么",
                "你他媽有病吧",
                "乖，你是媽的智障"
            ],
            {
                canPickMany:true,
                ignoreFocusOut:true,
                matchOnDescription:true,
                matchOnDetail:true,
                placeHolder:'溫馨提示，請選擇你是哪種類型？'
            })
            .then(function(msg){
            console.log(msg);
        })
    });

官方文檔：https://code.visualstudio.com/docs/extensionAPI/vscode-api#window.showQuickPick

總結

官方文檔很詳細，看官方文檔吧。這里只是簡單記錄下