Skip to content

treeview add

A tree view renders hierarchical data inside a menu’s container, driven by getChildren / getTreeItem.

Terminal window
vsceasy treeview add --name files --menu settings --title "Files"
FlagTypeNotes
--nametextRequired. Tree view id.
--menumenu idRequired. Container to render inside.
--titletextView title.

src/treeViews/<name>.ts with a getChildren you fill in with real data.

src/treeViews/files.ts
import { defineTreeView, TreeNode } from '../shared/vsceasy';
export default defineTreeView({
title: 'Files',
menu: 'settings',
order: 1, // position inside the container
titleActions: [{ command: 'refreshFiles' }], // buttons on the title row
getChildren: async (parent, vscode, ctx) => {
if (!parent) {
return [
{ label: 'Item 1', icon: 'file', tooltip: 'Replace with real data' },
{ label: 'Group', icon: 'folder', expandable: true }, // children load on expand
] as TreeNode[];
}
// Lazy children — return based on parent.id / parent.contextValue.
return [];
},
});

A TreeNode may carry a panel, command or run to fire on click (the node is forwarded to the command), plus icon, tooltip, description, collapsed, and contextValue for when-clause targeting.

order and titleActions are covered in Sidebar views, along with why a title-bar command needs an icon.