The user may save the workspace as a custom file type and use the application's file open command to restore the custom file back into the workspace for subsequent views and edits. The user may also select objects from the treeview to push them into the property editor or to delete them from the project. The treeview shows all of the workspace objects as well as child objects. Changes made in the property editor will immediately be reflected in the appearance of the object and in the treeview. The application framework will allow the user to create objects in the workspace by dragging items out of the toolbox and onto the work surface, the user may drag the objects around within the workspace to reposition them, and the user may select objects in the workspace and use the property editor to change the object's properties. The application demonstrates approaches to providing a toolbox, a workspace, an object treeview, and an object editor. Here's the package.json for the first version of our extension: from '.This article describes a generic application framework that may be of some use in projects that would need an interface similar to Visual Studio. package.json Contributionįirst you have to let VS Code know that you are contributing a view, using the contributes.views Contribution Point in package.json. You can find the complete source code of this sample extension in the tree-view-sample in the vscode-extension-samples GitHub repository. The steps for adding a treeview are to contribute the treeview in your package.json, create a TreeDataProvider, and register the TreeDataProvider. This extension will use a treeview to display all Node.js dependencies in the current folder.
To explain the Tree View API, we are going to build a sample extension called Node Dependencies. This guide teaches you how to write an extension that contributes Tree Views and View Containers to Visual Studio Code. The Find All References results are displayed in a References: Results Tree View, which is in the References View Container. This content is structured as a tree and conforms to the style of the built-in views of VS Code.įor example, the built-in References Search View extension shows reference search results as a separate view. The Tree View API allows extensions to show content in the sidebar in Visual Studio Code.