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.

[GitHub-Schubi2017]

It wasn't intended to close it. Sorry, I would like to emphasize this. +1

Best regards, Martin

Mike Smullin notifications@github.com schrieb am 21.03.2017:

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

also, +1

-- sent by mobile

[JREAM]

:+1: In the (Default ctrl+shift+o) or my ctrl+r, typeing a colin in the list: @: separates them by Class, function, property, module, variables -- however I also am dying for a tree (like Netbeans has). ST3 doesn't have this either.

[Fred-Vatin]

Guys please vote for Table of content, easy jump to code section #23698 👍

This would add a ToC in this symbols tree view panel we ask here. The ToC items would be sections you create through special comment headings in your file. What an easy way to organize your code and quick jump through those sections. 😉

A must for CSS files.

[naren-m]

+1 for this feature request

[lgelfan]

Probably one of the very few who moved from BBEdit to VS Code, this is one of the features I miss. For reference, BBEdit shows the method you are in that also functions as a drop down (similar to Ctrl/Cmd+Shift+O). I like this non-intrusive feedback that can be persistent.

[stOneskull]

without it, it's a deal breaker, mr. visual studio code.

ninja-ide gets it nice with python. i was hoping for a side bar like this..

[hex13]

Is this feature really that hard to implement in VSCode or has it just very low priority?

Just curious - I noticed that "code outline as separate panel" feature request pops itself through months without any visible progress. I mean, I'm sure that authors of VS Code work very hard on this editor, so there must be reason why often requested feature is not there yet.

BTW maybe this feature could be implemented by community as an extension? If so, what would be best approach to make such an extension in a way that would integrate well with VSCode?

[ilazarte]

Also the smaller font choice is key for the structure pane concept - it allows you to see the file at a glance. Structure panes are a big part of the user friendliness failures these lightweight editors. In fact part of the reason I ditched Eclipse was because not all languages have them so well done - for example, es6 a year ago had no real structure pane that was usable. For Java it did it great though.

[tinypin]

I too have been waiting for this feature for some months now. Really weird that it's still not available (even as an extension). I really like VScode, but without a structure explorer, it's not going to be my daily editor and I'll stick to Brackets. If MS really wants this to be the best editor going to be used by everyone then implement this feature !

[heng4fun]

I really like VScode, but without a structure explorer, it's not going to be my daily editor and I'll stick to pycharm.

[hex13]

Well... I've made the package for Atom which implements similar fuctionality, it's called Lupa: https://atom.io/packages/atom-lupa (it's outline, breadcrumbs and semantic search).

Theoretically it would be possible to port Lupa to VSCode, but I can't do this right now.

Lupa is made from two parts: GUI (made in ReactJS) which could be considered as "good enough", and static analysis part (it parses code and analyze ASTs) and that part needs major overhauling.

So I’m rewriting now static analysis part of Lupa from scratch (which involves building library similar to Tern - so I don’t have time to port anything right now, maybe later.

Although VSCode seems to make a lot of static analysis right now so I suppose it could be possible to connect GUI of my extension to some sort of language service in VSCode? (would it be possible?)

But I'm still not sure if VSCode allows extensions to inject custom HTML into panels (does it?).

[darrenkenny]

The biggest problem that I have with the symbol outline that you get with Ctrl+Shift+O is that it overlays the text of the buffer, meaning that it is more difficult to move around between the symbols and see the underlying text at the same time.

I do also really like the symbol tree that exists in Atom, and would love to see it in VSCode too.

[MartinHaeusler]

I think that there is no need for discussion about CTRL+SHIFT+O here. While it does offer similar information and is a valid and important functionality in and on itself, the use case is a very different one than for a structure tree view. The structure tree view needs to be a panel (i.e. always visible and not overlaying editor content) and a tree (because it displays the Abstract Syntax Tree after all).

It would be nice to get an update on this from the VSCode devs. Several other typescript editors already have this feature.

[ghost]

Yup -- this feature (symbols tree view) -- is a must for serious code editing.

[acidoxee]

Voted for this feature, it is tedious to open up the overlay with the shortcut every time, and it's not quite what you would expect. To my taste, a codemap should always be visible, it helps keeping a clear idea of what's going on and encourages a clean and well-written code with explicit function names, logical order, a separation of concerns... It should support regions as well as expose the input and output types, etc.

I think the best codemap I've ever used is that of the Supercharger plugin for Visual Studio, it's just plain fantastic and has all of those features. I'd love to see one of those in vscode 👍

[igbenic]

Hey guys, I really missed treeview so I gave it a shot with this hackish solution, any input is welcome, I believe it's possible to make it somewhat stable with fixed width panels and some more checks if HTML preview panel is visible to ensure it's present, I put this together last night: https://marketplace.visualstudio.com/items?itemName=igbenic.symbolstreeview https://github.com/igbenic/SymbolsTreeview

[viniciushsantana]

@igbenic I've just started working today and your extension is already helping. Thanks a lot, great work!

[igbenic]

@vegbrasil Thanks man, glad you like it!

[jorups]

@igbenic nice work! One thing to propose is positioning of found symbol in editor. Now it's vertically positioned in bottom of the editor, I guess more convenient would be to scroll it to middle of screen. Thanks!

[MartinHaeusler]

@igbenic I tried it, unfortunately I wasn't able to get past the loading indicator - the panel content always remained blank for me. I am using .tsx files (XML extensions, for React) instead of .ts files, is that somehow related?

[igbenic]

Hi there thank you for your input! @jorups I'll add this to feature requests :), @MartinHaeusler well basically if cmd+shift+o shows you a list of symbols they should be in my extension also. Other than that I am working on some hot fixes for when to trigger symbols refresh for next version so there might be a solution

[johnhamm]

How is this not a higher priority?! This feature seems to be extremely popular and most of the pieces already exist so it shouldn't be too resource-intensive to implement. Come on vscode team - come through for us!

[Ziao]

As much as I love VSCode, the lack of this feature has pushed me back to using Webstorm. Sorry guys, it's too essential.

[patrys]

I've put this together last night using the new APIs introduced in 1.13: Code Outline. It's pretty basic so contributions are welcome.

[hex13]

Good job, although I have some remarks. I don't see Github site of your extension so I'll write this here.

1. Enabling outline is not intuitive. As a user I would like to click View -> Show Outline or 1. press Cmd + Shift + P 2. write 'outline' 3. press enter. I just didn't see at the beginning "how I can enable this". It's very small part of left panel's accordion:

2. after clicking on entity in outline there is no visual indicator "where given entity is" It may e.g. move cursor to it or highlight this in editor. Also it would be nice to focus editor after clicking. Without this, it's not very useful (I clicked and I couldn't write code right away).

[farcaller]

I tired to figure how to enable / find it for some time, so I googled up the source repo. Overall, great job, though. Looks super-useful.

[patrys]

@hex13 as of 0.0.2 clicking items should now activate the editor. Let's move feedback to the extension page or its GitHub repo though so we don't spam all of these nice people subscribed to this thread.

[Danieleeee]

@patrys Opened issue on Visual indicator on code, it's similar to what @hex13 says

[heng4fun]

@patrys I love it !!!

[boboshu]

we need symbols tree like monodeveloper!

[jens1o]

As of 1.14, this is possible using this extension: https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline

[boboshu]

@jens1o thanks my friend！i like it！

[nurp]

An option would be to use Notepad++'s functionList.xml so that we can customize the pattern matching. Because vscode doesn't even show @ symbols for some popular languages, such as perl. so I doubt that a separate view will be useful for everyone.

[patrys]

@nurp Open a separate issue if your language is not supported by VSCode. A feature like this one is not language-specific. It's up to the language plugin to provide symbols necessary to construct the outline.

[rankun203]

There is a small upgrade to Go to Symbol feature which added a great potential on how we can inspect the code outline:

Go to Symbol

You can navigate symbols inside a file with ⇧⌘O. By typing : the symbols will be grouped by category. Just press Up or Down and navigate to the place you want.

Personally this is great enough for me, also I can peek the code definition like before.

[zjjott]

@rankun203 awesome! but how can I config a keypress shortcut? and can it config with "Group by Class"? I also hope symbols in functions can grouped by function,symbols in class can grouped by class,function in class can grouped by class too

[caiofcm]

@jens1o thank you, this extension works great for python code

[ilazarte]

@jens1o This is a great start. One issue I see for es6 is that it picks up let definitions on method level as class level. Maybe a filter to not include variable definitions at all, instead just methods, and finally the font would be smaller in order to see more of the overview at one time. Thanks for contributing.

[jens1o]

@ilazarte you may want to file this issue here: https://github.com/patrys/vscode-code-outline

[mikesmullin]

this is the number 3 most thumbs-up'ed feature request in the github issues list! and there are duplicate issues open like https://github.com/Microsoft/vscode/issues/14473 keep mashing that thumbs button :)

[GhostMech]

Everyone has already covered it, but I also use Notepad++ and I also miss having a function list in VSC. Other than that, I am loving the switch over.

[karolyi]

+1

[xgfone]

Ctrl+Shift+O is UGLY, which will disperse my attention. Since it has supported the code outline, I don't understand why not display in a tree view.

[fuzzy76]

Minimap was actually prioritised over this?

[phea]

+1 for a symbol table, the minimap is useless on smaller screens.

[xueyunquan]

A native outline view is definitely needed. Although the Code Outline plugin provides the functionality in a quite nice way, there are still some issues:

• The Code Outline plugin responses very slowly when switching between source files, i.e. the Code Outline view takes a lot of time to update.

• The Code Outline view cannot be moved freely to other places in VSC. For example, I cannot replace the minimap with the Code Outline view provided by the plugin. Nor can I "create" a second side bar holding the Code Outline view, along with the existing side bar.

Please consider adding the outline view & functionality to VCS . Thank you.

[patrys]

@xueyunquan FWIW I've made version 0.0.12 much faster.

[Yanpas]

Current outline is flat which is useless with a large files. Also it shows local variables which is extra IMO. If VSCode provided tree-like structure instead of list of everything things would be much better

[patrys]

@Yanpas Code Outline is a tree. If it's flat it probably means your language does not report proper symbol ranges.

[Yanpas]

@patrys I guess the problem is api limitations: SymbolInformation contains location and containerName members.

location's range doesn't have to denote a node range in the sense of a abstract syntax tree

containerName can't be used to re-infer a hierarchy for the document symbols

There should be some parent member or something.

In fact there are no tree outline for: C#, C++, Haskell and Rust

---

UPD: I've added console.log("sym: ", currentNode.symbol.name, currentNode.symbol.location.range) inside updateSymbols method and here is what I saw :

C++ LSP returns range "from start of the name to the end" instread of "from { to }". I guess the same applies to other LSP's which work the same and as a result cannot provide tree-like outline. Is it concrete lsp's bug or lack of information in the standard ?