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: Dart-Code/Dart-Code#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 👍 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.

[seamlik]

Actually I prefer something like "go to anything" where you type something (can be a symbol, a file or any command) and it aggregates all results in a single place.

Just like IntelliJ's tapping Shift twice.

[jens1o]

One 👍 missing!

(sorry 4 spam bros)

[boyvinall]

FYI, the latest release (0.2.0) of https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline does a great job with this now. It doesn't implement everything in the screenshots above but I find it quite usable. I'm using with golang, I guess YMMV.

[milesj]

The extension works great, but the fact that it can't be moved to the rigth column is an immediate no go for me (and probably most people).

[onetrev]

One option though is to move the entire Workbench to the right like so:
"workbench.sideBar.location": "right"

Which is probably a good idea regardless if your first language reads L->R as then the brain naturally reads that way and thus your most important stuff (your code!) is first thing on the left side of the screen. It takes getting used to just because it's a change though.

[jfcarr]

Tried vscode-code-outline: Not bad at all!

[fractalspace]

Tried 'patrys.vscode-code-outline'. Didn't work for me at all. Always shows empty box (tried refresh, re-install etc). That, and also, I wanted to see it on the right. It is very disturbing to see where it shows up now.

[gulshan]

Hopefully being implemented this month. It's a planned item! #49327

[Brent-Knigge]

patrys.vscode-code-outline worked great for me, but for about a week now it has disappeared and no matter what I do, I can't seem to get it back...

[dtromans]

@Brent-Knigge It now has a separate panel. On the left you should see a new icon below which is for the code-outline view.

[Brent-Knigge]

@faintsignal thanks. I see it plain as day now - don't know why I didn't see it before. But then again, I'm like that when I open the fridge...

[BuckyLuis]

@faintsignal
anyway to change it back into the explorer view? that activity bar takes up too much horizontal space >,>

Edit: i found it out
patrys/vscode-code-outline#120

open package.json of the extension and change

"views": {
"outline": [
{
"id": "symbolOutline",

in

"views": {
"explorer": [
{
"id": "symbolOutline",

this worked for me

[jrieken]

Good news: I have merged #49917 which means next insiders will ship with an outline. It is a preview, not yet finished and not yet enabled by default.

How to enable the outline preview?

All you need to do is select 'Outline' in the explorer view context menu:

Note that there are many ideas and expectations where to show the outline view. We started by thinking about what to show and because of that the outline view currently sits in the explorer view. Alternative locations are being discussed here: #49923 and as usually everyone is invited to join the discussion.

What does it already do?

The outline is far from finished but these are the features we support in the first round:

• Show the symbol structure of the currently active editor
• Show label, icon, and the default open gestures: (1) single click to reveal, (2) double click to reveal and focus, (3) alt+click to reveal to the side, (4) alt+double click to reveal and focus to the side, (5) enter to reveal and focus a symbol.
• Sorting symbols: (1) by the position the document, (2) the name, and (3) their type
• A 'follow cursor' feature which reveals the symbol matching the current editor selection
• An unbound command outline.focus (you need to define your own keybinding for now) that moves focus to the outline
• Support type to filter - it will hide items that don't match and pre-select the best match

What's next?

We have read through the comments here and looked at other outline implementation. We track further work with the outline-label (https://github.com/Microsoft/vscode/labels/outline) and we invite everyone to join the discussion. We expect to get closer to done, done in June - it'll be June because I'll be OOO for the rest of May.

[ringods]

@jrieken will this outline view be a generic view that other language plugins could build upon?

[jrieken]

The data it shows comes from extensions - it currently uses the DocumentSymbolProviders for that and there is an issue to better support document symbol hierarchies: #34968. So, that data defines what we show and while we don't expose our UX/view models to extensions there are ideas allowing to add commands, e.g allow for contributable context menu commands, see #49925

[DanTup]

@jrieken This looks great! But for those of us that need custom outlines, are all the APIs used by this exposed to us for use in our own tree?

[jrieken]

are all the APIs used by this exposed to us for use in our own tree?

No, this is a client feature (like all of our UX features) and doesn't use the extension API.

[jrieken]

In the name of GH issue manageability (this issue takes aged to load) I am closing and locking this. Let's continue the discussions in topic-issues labeled with outline.

Thanks and Happy Coding!