How to show code outline in Visual Studio?

This kind of stuff exists in Eclipse:

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?

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.

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

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.

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.

• 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.

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)

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.

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:

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)

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

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:

• http://wildermuth.com/2008/06/06/The_Document_Outline_in_Visual_Studio_2008
• http://dotnetkicks.com/tipsandtricks/Visual_Studio_2008_Document_Outline_Split_View

Hope this answers your question.

I've started using VSCommands 10.

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

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

Ctrl+Shift+O comes closest to what you want

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

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.

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

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

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

shortcut: CTRL+ Shift + ALT +

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:

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