Add line separators and labels to a QuickPick in a VS Code extension

Solution 1:

In vscode v1.64 Insiders now and presumably, if all goes well, in Stable v1.64 in early February, 2022 will be the ability to add separators and labels for those separators to QuickPicks.

See Test: Finalized API for QuickPickItem separators for co de samples.

I made a more realistic code example. In your extension:

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

Or use this form at the end:

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

This results in:

BTW, these colorCustomizations affect the separator and the labels:

{
  "workbench.colorCustomizations": {

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

To test this in the Insiders Build, you will need this in your extension's package.json:

"enabledApiProposals": [
    "quickPickSeparators"
],

That will add the proposed quickPickSeparators api to your extension.