How to show code outline in Visual Studio?

Question

This kind of stuff exists in Eclipse:

alt text

But I've not found it in Visual Studio yet. Is there such a window to show code outline at all?

I tried both Document Outline and Class View windows. The Class View is close, but it only shows class information, can it come up with function info also?

There is an Outline window, interestingly, present in Visual Studio Code, which is free. One should also note that the feature can somehow be achieved by using Visual Studio combo boxes that stand right above the code editor window. — Veverke, Jan 28 '21 at 12:16

score 54 · Answer 1 · edited Feb 23 '19 at 06:37

54

Also non-free, but Jetbrains Resharper provides a File Structure Window, what perhaps is what you are searching for.

To display this dockable window, select from the menu: ReSharper → Windows → File Structure (default shortcut Ctrl+Alt+F

edited Feb 23 '19 at 06:37

bugybunny

477
4
13

answered Jan 28 '14 at 12:01

Sebastian

4,893
3
40
59

score 53 · Answer 2 · edited Mar 13 '17 at 08:49

53

One great plugin for VS is CodeMaid. It is powerful and it is open source! You can also sort your methods within the CodeMaid Spade view.

Here is a screenshot.

Code outline

edited Mar 13 '17 at 08:49

LosManos

6,117
5
44
81

answered Mar 12 '14 at 09:29

jiasli

6,601
4
29
28

May be for the file that I have, CodeMaid Spade is an empty window! – SarjanWebDev Sep 08 '14 at 01:30
1

Thanks a lot! I like the outline of CodeMaid best. It has its own view (in contrast to AxTools) and can be docked everywhere. Just like in Eclipse! Perfect! – rene Sep 25 '14 at 11:30
1

+1! Wow, this is a truly awesome extension. Didn't knew about it. Giving that's free i would say that everybody should at least try it, really. – plunntic iam Jun 12 '15 at 21:37
1

The Spade window also doesn't show anything for JS files which is a major bummer. – Polshgiant Jan 03 '17 at 23:49
@SarjanWebDev I have encountered this too; sometimes Codemaid spade stops showing itself. For now I remedy it by restarting VS2015. – LosManos Mar 13 '17 at 08:48
The keyboard support is horrible though. I wouldn‘t recommend it if you just want to quickly jump to code. Someone asked about keyboard support here https://github.com/codecadwallader/codemaid/issues/447 that has a short explanation but it is not great. Too much pressing of tab to get the focus to the right element when you want to search and then select. Nothing close to Eclipse’s Ctrl+O unfortunately :/ – bugybunny Nov 16 '18 at 07:47
as @Polshgiant said The Spade doesn't show anything for js files and that is the most important ability I need. On the other hand, I love Spade for splitting code regions and calculating the complexity of the code although can't see anything about how to calculate that or accuracy. – QMaster Dec 31 '18 at 08:56
The Spade window becomes empty for C++ file when we jump to a header file using "Go to Definition" option and that file is present in another Project within the same solution but somehow VS finds that file in "external dependencies". You can check this using "sync with active document" option. The workaround is to close this file then browse to that Project in Solution Explorer and then open the file from there. There is a VS bug for this https://developercommunity.visualstudio.com/content/problem/324991/sync-with-active-document-finding-file-in-external.html – Mandeep Singh Mar 30 '20 at 12:37
what should i do after i install to see the outline? – Nathan B May 25 '21 at 09:12

score 16 · Answer 3 · answered Jun 22 '18 at 20:32

16

This question was asked quite a while ago and before Visual Studio Code existed but I found it when searching for how to do this with Visual Studio Code so I thought others might stumble on this question too so I thought I'd share my solution. Here's how to do it in Visual Studio Code. I'm using TypeScript but it works for JavaScript, too.

1) View -> Open View

2) select (or type) Outline

3) You'll now get an Outline palette that shows full information on the class including properties and functions.

answered Jun 22 '18 at 20:32

gomisha

1,786
1
18
28

Yes, I found the same. But now I need to collapse to just the functions/methods names. I don't want to list all of the properties. Any ideas???? The editor keeps reverting to displaying the properties, I click the 'Collapse all' button which I found, but I would like an user setting to default to 'collapse all'. – muz the axe Jul 23 '18 at 03:37
I haven't found a way to keep them collapsed all the time. – gomisha Jul 23 '18 at 11:37
I just found it! Uninstall "PHP Intellephense" and install the extension "PHP IntelliSense". It shows a list of functions in the outline and is also less invasive during code completion - I like it better. – muz the axe Jul 24 '18 at 16:53
That's great that you found it. I don't use PHP with VS Code - I'm using TypeScript so I don't think that will work for me. – gomisha Jul 24 '18 at 17:43

score 14 · Answer 4 · answered Apr 06 '16 at 06:16

In newer Visual Studio versions (e.g. 2015) you can see this directly in the solution explorer. Simply expand the .cs file and you will get the list of the methods in the order they are listed in the file. This is exactly the same as the Outline in Eclipse.

If you want to see the stuff alphabetically, open the file and between the tab pane and the editor, there is a row showing the project name, the class name with namespace, and a drop down with the available methods and properties.

This is cool, except Form classes only expand to show the associated files (.resx and .designer.cs), and don't show the class info. — Alan Baljeu, Apr 05 '17 at 20:41

score 14 · Accepted Answer · answered Sep 25 '10 at 15:08

14

not free, but if you install Visual AssistX, each document gets a dropdown box listing all methods in a file (alphabetically or in the order they occur)
check Class View again, it does show functions (but not per document). Also check out the Code Definition Window, extremely nice when combined with Class View.

answered Sep 25 '10 at 15:08

stijn

31,563
13
95
145

1

I'm also using Visual AssistX, and I can really recommend it. It's actually quite essential if you're developing C++ in Visual Studio. – Patrick Sep 25 '10 at 17:04
1

not that I know of, but as said, Class View is the closest match – stijn Sep 29 '10 at 13:29
class view should suffice! – Aritra Chatterjee Aug 19 '18 at 01:44
the outline window is interestingly present in Visual Studio Code, which is free. – Veverke Jan 28 '21 at 10:54

score 6 · Answer 6 · answered Sep 25 '10 at 13:08

6

You can use the Class View Window, or you can use outlining to collapse the code window to definitions (Ctrl-M-O and Ctrl M-L in the standard keyboard set up)

answered Sep 25 '10 at 13:08

Ray

20,503
5
43
59

score 6 · Answer 7 · answered Mar 09 '12 at 15:54

6

There is now a free add-in available through the add-in manager in VS2010 that works quite well. It also has a dark theme.

VS10x Code Map v2

Screenshot:

Screenshot of the code map

answered Mar 09 '12 at 15:54

Spoike

112,352
42
133
155

1

Free for 30 days, but operates with limited functionality thereafter. Having said that... it's very reasonable. See: [http://www.axtools.com/purchase.php](http://www.axtools.com/purchase.php) – Anthony Walsh Feb 05 '13 at 12:28

score 5 · Answer 8 · answered Sep 25 '17 at 10:38

5

Trick is to call Ctrl+F2, then Tab, then Tab, then Down arrow. I've done it with this simple AutoHotkey script when I hit Ctrl+o:

#IfWinActive ahk_exe devenv.exe
^o::
  Send ^{F2}
  Send {Tab}
  Send {Tab}
  Send {Down}
  return
#IfWinActive

It will show dropdown that is closest to Quick Outline in Eclipse or others.

answered Sep 25 '17 at 10:38

Ciantic

5,156
3
50
47

Creative solution :) – bugybunny Nov 08 '18 at 10:24

score 4 · Answer 9 · answered Aug 12 '17 at 16:48

4

Go To "Solution Explorer" and select your project; then select a class file you want to outline, then expand the little triangle just below that class (as shown in the figure below)

answered Aug 12 '17 at 16:48

sbillah

106
5

score 4 · Answer 10 · edited Jul 23 '18 at 17:36

4

In VS2017 you can navigate between items in the file directly from the upper right corner of the Editor.

Screenshot

edited Jul 23 '18 at 17:36

Mihai Chelaru

5,844
14
34
43

answered Jul 23 '18 at 16:34

Daniele Diodati

41
4

Ctrl+F2 then Tab and again Tab to access it via keyboard – bugybunny Nov 08 '18 at 10:28
1

Thanks! I am relatively new to VS and being the GUI very densely populated I did not find it yet. A dedicated tab would be even more useful. – AdRiX Jan 08 '20 at 11:49

score 2 · Answer 11 · edited Feb 16 '15 at 11:18

2

you can have document outline window by going to view-> Other Window -> Document Outline or you can have it using Ctrl+W, U I am using VS-2008. You can have a look at the following links also:

Hope this answers your question.

edited Feb 16 '15 at 11:18

Community

1
1

answered Sep 25 '10 at 13:09

Mohaimen

159
1
3
12

score 1 · Answer 12 · answered May 11 '12 at 12:26

1

I've started using VSCommands 10.

This has support for the most common languages used when developing in Visual Studio 2010, including JavaScript.

answered May 11 '12 at 12:26

Guldager

13
2

score 1 · Answer 13 · answered Jun 19 '14 at 16:04

1

There's an extension provided Free, by Microsoft, that enables this and many other features into Visual Studio. The extension is Productivity Power Tools.

answered Jun 19 '14 at 16:04

elbaloo

116
1
5

2

I cannot find such outline window in Productivity Power Tools. – xmedeko Apr 21 '15 at 08:44
1

@xmedeko, it is not an additional window, it enhances the Solution Explorer to work the way it started working as of VS2012 where it displays the class and its members on each file. – elbaloo Apr 22 '15 at 17:49

score 1 · Answer 14 · answered Sep 10 '16 at 05:38

1

Ctrl+Shift+O comes closest to what you want

If you need more, see: discussion of the Outline Feature on github

answered Sep 10 '16 at 05:38

honzajde

1,754
3
22
33

Note: this is a solution for VSCode while OP asked about Visual Studio. – bugybunny Nov 08 '18 at 10:28

score 1 · Answer 15 · answered Feb 24 '18 at 08:03

Had same need to see Code Outline: it's easier to understand someone's code organisation. Tried Ctrl+Shift+O and didn't like it. Found 2 free plugins in the marketplace. Tried this one by Patryk Zawadzki and found if handy and handsome.

After installation and reload of VSC look in Explorer pane new separator "Code Outline" at the bottom.

score 1 · Answer 16 · answered Mar 12 '20 at 10:00

1

// 2019 answer
There is an free extension for Visual Studio that provide code outline: https://marketplace.visualstudio.com/items?itemName=SamirBoulema.CodeNav

answered Mar 12 '20 at 10:00

Luke

1,126
2
18
25

It doesn't support C++. – cppBeginner Jul 30 '20 at 05:55

score 0 · Answer 17 · answered Aug 23 '18 at 08:04

0

If you use PHP, make sure you install full version as mentioned in the docs

answered Aug 23 '18 at 08:04

Yuri Salimovskiy

416
4
10

score 0 · Answer 18 · answered May 09 '19 at 20:29

Here's how to add a command to one of the toolbars in Visual Studio (or how I know how to do it, anyway):

1.) Click the little down arrow at the end of the toolbar, select "Add or Remove Buttons", then select "Customize..."

2.) Now click the "Add Command..." button on the right.

3.) Click "Edit" in the left scroll list and then scroll down on the right until you see the two "Outline Toggle" commands:

4.) Choose one (I'll choose "Outline Toggle All" to toggle outlining in the entire open document) and click "OK."

5.) Now that command will be apart of the toolbar who you first clicked "Add/Remove Buttons" to. You can re-order the command to put it in different positions in the toolbar. Here's an example where I've added it to the main toolbar that has your typical Save/Undo/Debug commands:

score 0 · Answer 19 · answered Apr 07 '21 at 17:19

0

A list of things you can use:
1.Visual Studio default's ClassView
2.Visual Assist's VA OUTLINE Feature
3.CodeMaid's Spade Feature

answered Apr 07 '21 at 17:19

Gen.L

314
2
10

score -1 · Answer 20 · answered May 04 '16 at 13:43

-1

Resharper has a feature of inspection. You can see incoming and outgoing calls from there.

shortcut: CTRL+ Shift + ALT +

answered May 04 '16 at 13:43

mcgrawhill

17
1
3

How to show code outline in Visual Studio?

20 Answers20

Linked