How to open folder picker dialog in vscode?

Question

I am writing extension that has to support creating new, custom project templates (directory structure and few files) in a folder chosen by user. Is there any way to open folder picker dialog in vscode?

Answer 1

File dialogs were added in VSCode 1.17. See window.showOpenDialog and window.showSaveDialog.

They don't appear to choose a folder without a file, but they do allow multi-select and of course you can just take the path name of any chosen file.

const options: vscode.OpenDialogOptions = {
     canSelectMany: false,
     openLabel: 'Open',
     filters: {
        'Text files': ['txt'],
        'All files': ['*']
    }
};

vscode.window.showOpenDialog(options).then(fileUri => {
    if (fileUri && fileUri[0]) {
        console.log('Selected file: ' + fileUri[0].fsPath);
    }
});

Note you may need to update your package.json file to get access to this new API.

"engines": {
    "vscode": "^1.17.0"
},

Answer 2

Now we can select folder using window.showOpenDialog. Simply adjust options according to your need.

    const options: vscode.OpenDialogOptions = {
        canSelectMany: false,
        openLabel: 'Select',
        canSelectFiles: false,
        canSelectFolders: true
    };
   
   vscode.window.showOpenDialog(options).then(fileUri => {
       if (fileUri && fileUri[0]) {
           console.log('Selected file: ' + fileUri[0].fsPath);
       }
   });

Currently I'm working on Vs Code version: 1.51.0