Structure
A window showing what is inside the file you are reading, and what is inside the project, drawn as a tree with lines joining each thing to what it belongs to.
When you would want it
The file list tells you what is there. It does not tell you what any of it is. This does - and for a function it also shows what that function calls, and what calls it.
Where to find it
- All Features → Structure
- Open (command:view.structure)
What you get out of it
- A file list says what exists; Structure says what it IS and how it connects.
- Stylesheets get the same treatment: rules to elements, elements to rules.
- Orientation in an unfamiliar codebase takes minutes instead of an afternoon.
How to use it, step by step
- Open Structure from the activity bar, or its keyboard shortcut.
- Use the This file tab for the current file's functions, classes, and sections as a tree.
- Use the This project tab to navigate the whole codebase the same way.
- With a function selected, see what it calls and what calls it.
- Click any row to jump straight there.
Why this beats the usual way
Call hierarchies and CSS cross-referencing are premium-IDE territory, usually requiring language plugins per framework. ADCode links styles to markup across HTML, JSX, Vue, Angular, and Handlebars templates out of the box, in one popup.
Find it in Universal Search
Structure · The workbench · file outline · project map · calls