Feature request: symbols tree view

[boyvinall]

VSCode very quickly got to nearly being my default editor. One thing I'm missing is something like https://atom.io/packages/symbols-tree-view where I can view the structure of a file whilst editing. I've used this view across many editors for years.

[bgse]

Ideally, it would expose API this for extension authors.

[dbaeumer]

This is available though not as a separate view and a flat list. You can press Ctrl+Shift+O to get a symbol outline of the currently open file.Ctrl+T shows all symbols in the workspace. You can type in there to filter the list down.

[boyvinall]

Thanks Dirk. Yes, I saw that already, but I find it less of an interruption when that view is constantly onscreen in a separate panel. Also, the ability to filter this list so as e.g. not to include variables is useful - which is harder to do in a pop-down view.

[bgse]

@dbaeumer Sometimes, this seems to cut off unnecessarily early, see here:

Thinking about it, I probably even like the current approach better, need to get used to it a little, but it is faster to use compared with traditional outline presentation.

[dbaeumer]

@bgse known issue. I opened a issue in the TS repository for this.

[DanTup]

Had a request for this for Dart Code. Am I right in assuming we can't implement this (even ourselves) and would need support from Code?

[boyvinall]

Not sure TBH. I'm still interested in it, but my (available_time / skill_set_proficiency) isn't likely to find me investigating any time soon. Appreciate any other efforts here.

[dbaeumer]

@DanTup you mean a tree view. Yes. this would need support from the Workbench. Filling the Ctrl+Shift+O flat list is API.

[DanTup]

@dbaeumer Yeah, I meant the tree - we're already providing the document symbols for the flat list. Thanks for confirming!

[MartinHaeusler]

As I mentioned in #10788 , the "symbols tree view" could be made a LOT more powerful than in atom. In my humble opinion, Eclipse got that aspect of the UI absolutely right. Here's a screenshot of the outline view displayed by Eclipse for a Java file:

There are several things worth mentioning here:

• The view is a sidebar and permanently visible. It is always in sync with the current file in the editor.
• It's a tree view, where each class is a node and every member of that class becomes a child of the class node. Nodes can be collapsed or expanded, as with any other standard tree.
• The view displays a lot more information than the plain element names
  • The shape/silhouette of icons for fields are different than the icons of methods to allow to distinguish them easily
  • Icons have decorators to indicate that a member is final (a.k.a. readonly), static, abstract, or overrides a declaration in the parent class (to name a few examples)
  • The color of the icons indicate their visibility (public = green, protected = yellow, private = red)
  • The type of each field is written directly after the name
  • The parameter types and return types are written directly after method names. This also allows to easily see the number of parameters at a glance.
• A click on a member jumps to the declaration in the code
• There are also refactoring features built into this UI in Eclipse:
  • Dragging a member and dropping it to another position also refactors the code by moving the code block belonging to that member to the position indicated by the drop target.
  • Deleting a tree node also deletes the corresponding sections of code in the file.
  • Any node has a context menu that allows for different operations, e.g. rename
• The context menu also offers things like "find references" or "open call hierarchy"
• A toggle button on the UI allows to switch between alphabetic sorting and "as occurs in file" sorting in the outline display.
• The current cursor position is shown in the outline view by highlighting the member (or class) where the cursor currently resides within. E.g. if my cursor is within method "bar()" of class "Foo", then the outline will highlight the tree node "Foo" and the child node "bar()".

I think that this particular feature is brilliantly done in Eclipse, and I would love to see it realized in VScode for Typescript in particular. When I navigate through code in Eclipse and search for something, it's usually just a sequence of "open type -> check outline". You don't even have to look at the source code for navigation, which makes it very fast, elegant and "brain friendly".

[DanTup]

If you do add support for a tree; could you also consider allowing it to be used for type hierarchy too? Had that request too, but current ideas (eg. using quick pick) kinda suck: https://github.com/Dart-Code/Dart-Code/issues/133

[RobertoMalatesta]

Having a Object Viewer / Structure Inspector / Class Hierarchy tree integrated into the View Bar and Side Bar (components A,B in graph below) VSC UI

would be a great improvement for user experience and code navigation.

I asked for it in #397 and then again in #6376 to no avail.

Last time I looked at the APIs there was no way to interact with Side & View Bar in order to create it as an external plug-in.

--R

[alexisgahon]

@MartinHaeusler is right. You should focus and working on this feature as in Eclipse. It would definitely one of your killing feature to stand against Atom / Sublime.

[GaryFurash]

VOTE

[leaxoy]

+1

[MartinHaeusler]

In case that there was any doubt after my post:

+1.

[dakk]

+1

[MartinHaeusler]

Is this being looked at? For me, this would be really important.

[phunghv]

+1

[funvit]

+1

[Tyriar]

Hi all, prefer :+1: reactions on the original issue comment as that helps us with prioritization. If you're on a mobile device you can use reactions by first hitting the "Desktop version" button at the bottom of the page.

[ozanh]

+1

[chun-wang]

+1

[sychan]

+1

[Zielak]

Stop typing plus one, I'm listening for real updates!

[LiPengfei19820619]

I'm expecting the feature appearing in VSCode.

[bdesemb]

+1

[vegarringdal]

+1

[ToMakeSense]

@MartinHaeusler Outline view of Eclipse is really my favorite feature in all kinds of IDEs.

[MartinHaeusler]

@ToMakeSense Mine too. I can't understand how people can work without it.

[gertcuykens]

Can you just add a Ctrl+T icon into the side bar please like the file explorer? I think just adding one more icon that opens the workspace symbol tree with a sub icon toggle button Ctrl+Shift+O in the tree panel itself is good enough for now until you have time to figure out something more advanced.

[scmaverick]

So, giving my vote here, I requested the same thing, to have the Netbeans Navigator panel in VS Code as well.

[ralphavalon]

+1

[leaxoy]

this is useful for source code reading. Is there any work on it?

[NonTestatum]

+1

[fractalspace]

I vote for this feature. A must have.

[38b3eff8]

+1

[GaryBoone]

+1 to this feature request. Here's a hack while we wait for this feature: just do a search to see a nice outline view. In the search panel, put

 function\s([_A-Za-z0-9]+)\s*\(

replacing 'function' with your language's function keyword, and hitting the "Use regular expressions" button on the right.

It doesn't show symbols, just functions, but it's useful and looks like how I'd like the real feature to look.

[Courtesy: Picard at Stack Overflow ]

[vaderdan]

I hacked it a bit to show top level symbols only.

You can do it too. the change is in src/vs/workbench/parts/quickopen/browser/gotoSymbolHandler.ts

On line 55 modify the code accordingly:

const parentEntries = this.entries.filter((entry: SymbolEntry) => {
    return entry.getType() == 'class' || entry.getType() == 'interface' || entry.getType() == 'namespace'
}).map((entry) => {
    return entry.getLabel()
})

// Check for match and update visibility and group label
this.entries.forEach((entry: SymbolEntry) => {

    // Clear all state first
    entry.setGroupLabel(null);
    entry.setShowBorder(false);
    entry.setHighlights(null);
    entry.setHidden(false);

    // Filter by search
    if (normalizedSearchValue) {
        const highlights = filters.matchesFuzzy(normalizedSearchValue, entry.getLabel());
        if (highlights) {
            entry.setHighlights(highlights);
            entry.setHidden(false);
        } else if (!entry.isHidden()) {
            entry.setHidden(true);
        }
    }
    else {
        const isHidden = (entry.getDescription() !== undefined && entry.getDescription().trim() !== '' && parentEntries.indexOf(entry.getDescription()) == -1) || entry.getLabel().trim() == '<function>' //(for anonymous funcs)
        entry.setHidden(isHidden);
    }
});

basically it checks if symbol description is empty (all items in inner scope have description - otherwise the top methods and classes don't)

Then package the vscode and you'll have tree view, kinda.

Also I have extension that will help you to further customize the symbols to look a bit more like tree view: https://marketplace.visualstudio.com/items?itemName=dannylazarov.bettergoto

[AlGantori]

VSCode release 1.10.0 came with this thing called minimap side view. I don't have a retina display, so perhaps that's why I did not find it useful AT ALL. I turned it off as soon as I turned it on :)

Looking forward to this "document outline" I hope it will come with some customizations like

1. filter down to only methods I care about eg. methods, fields, props, etc....
2. allow to switch between different sorting, like current layout versus sorting alphabetical versus by type and by access.

Both 1 and 2 features should be toggles via some toolbar buttons on this tree view pane, not some configuration thingy buried in settings.json :)

3. Moving blocks of code reliably might become more appealing via drag-drop in this tree view pane. I can live without this, as most of my files are only 2 to 3 pages long.

I have subscribed to this issue and hope to see it closed :) soon Thank you.

[drinktee]

I think tagbar is better than command+shift+o

[forevering]

+1

[LiPengfei19820619]

+1

[raphael-volt]

+1

[skol-pro]

Now that the minimap has been integrated, I really hope to see this "tagbar" concept in the near future ! <3

[liuhaopen]

+1

[bostonsqd]

+1 to this feature request.

[Zielak]

no more +1s please. PLEASE.

[agwells]

To reiterate what was mentioned a while back:

Hi all, prefer :+1: reactions on the original issue comment as that helps us with prioritization. If you're on a mobile device you can use reactions by first hitting the "Desktop version" button at the bottom of the page.

In other words, please don't comment "+1" at the bottom of this page. Instead add a :+1: to the first comment on this issue.

[sbimikesmullin]

why did you close this? all the related issues are marked duplicate and closed now but no solution :o

also, +1