ADCode

Draw trees with connecting lines

Little lines join each file to the folder it lives in, like a family tree, so you can see what is inside what.

When you would want it

Without them you have to judge nesting by how far a row is pushed across, which means counting pixels.

Where to find it

  • All Features → Draw trees with connecting lines
  • Settings → adcode.structure.projectTreeLines

How to use it, step by step

On by default.

  1. Turn it off to get plain indentation instead.

Why this beats the usual way

Knowing what a style rule touches, or which classes nothing defines, normally needs a bespoke extension per framework - if it exists at all. ADCode reads HTML, JSX, Vue, Angular, and Handlebars templates natively and connects markup to styles both ways, with findings surfaced in the same Problems panel as everything else.

Find it in Universal Search

Draw trees with connecting lines · Understanding a project