visual-studio-code - 将行分隔符和标签添加到 VS Code 扩展中的 QuickPick

Question

如何将分隔线添加到快速选择菜单，类似于“配置片段”中所做的操作。另外，如何添加“现有片段”和“新片段”标签，如屏幕截图所示？

Answer 1

现在，在 vscode v1.64 Insiders 中，如果一切顺利，2022 年 2 月初的稳定 v1.64 中将能够向 QuickPicks 添加分隔符和这些分隔符的标签。

参见Test: Finalized API for QuickPickItem separators对于公司 sample 。

我做了一个更真实的代码示例。在您的扩展中:

const currentWorkSpace = await vscode.workspace.getWorkspaceFolder(vscode.window.activeTextEditor.document.uri);

const allFilesFolders = fs.readdirSync(currentWorkSpace.uri.fsPath);

// get workspace folders starting with a 'c'
let  onlyFolders = allFilesFolders.filter(f => fs.statSync(path.join(currentWorkSpace.uri.fsPath, f)).isDirectory() && f.startsWith('c'));

// get workspace files
let  onlyFiles = allFilesFolders.filter(f => fs.statSync(path.join(currentWorkSpace.uri.fsPath, f)).isFile());

// make a separator for the 'Folder' group
const folderSeparator = {
    label: 'Folders',
    kind: vscode.QuickPickItemKind.Separator  // this is new
};

// make a separator for the 'File' group
const fileSeparator = {
    label: 'Files',
    kind: vscode.QuickPickItemKind.Separator
};

// put the Folder separator at the beginning 
onlyFolders.unshift(folderSeparator);

// concat the File separator to the end of the folder array
onlyFolders = onlyFolders.concat(fileSeparator);

// concat the file array to the end of the folder array + separators
onlyFolders = onlyFolders.concat(onlyFiles);

await vscode.window.showQuickPick(onlyFolders, {
    canPickMany: true,
    placeHolder: "Select folders"
}).then(items => {
    if (items) {
        // the selected items
    }
});

或者在最后使用此表格:

const qpSelections =  await vscode.window.showQuickPick(onlyFolders, {
    canPickMany: true,
    placeHolder: "Select folders"
});
// }).then(items => {
//  if (items) {
//      // the items selected
//  }
// });

vscode.window.showInformationMessage(`You selected: ${qpSelections}`);

这会导致:

顺便说一句，这些colorCustomizations会影响分隔符和标签:

{
  "workbench.colorCustomizations": {

    "pickerGroup.foreground": "#000",  // for QuickPick labels
    "pickerGroup.border": "#ff0000",   // for QuickPick separators
}

---

要在 Insiders Build 中测试此功能，您需要在扩展程序的 package.json 中添加此内容:

"enabledApiProposals": [
    "quickPickSeparators"
],

这会将建议的 quickPickSeparators API 添加到您的扩展中。