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
總結
官方文件很詳細,看官方文件吧。這裡只是簡單記錄下