Method List in Visual Studio Code

Question

I've recently started using the Visual Studio Code editor. I'm really loving it, but there's one critical feature (for me) that I haven't been able to find. Is there a method list, similar to the Navigator in NetBeans or Member dropdown in Visual Studio?

See https://code.visualstudio.com/docs/editor/editingevolved — simhumileco, Aug 22 '17 at 22:00
This missing feature is being tracked at https://github.com/Microsoft/vscode/issues/5605 — foz, Apr 25 '18 at 09:04
Released! https://code.visualstudio.com/updates/v1_24#_outline-view — fkupper, Jun 13 '18 at 08:06
I don't have an answer, and couldn't get anything suggested on this page to work, so I use the free version of CodeLobster, and have for years. It's very easy to learn, and has plenty of framework intellisense, too. It also shows functions and methods for pages with different scripting languages, too, ie PHP and Javascript. — alfadog67, Aug 14 '20 at 16:49
Unfortunately, neither Outline in the sidebar nor the `Ctrl+Shift+O+:` seem to be able to filter the symbols by their visibilities(e.g., only the `public` ones). There are also issues([issue](https://github.com/microsoft/vscode/issues/103305) & [issue](https://github.com/microsoft/vscode/issues/113238) for instance) on vscode's GitHub, but they are both closed because _it is said that_ they are duplicates, while I couldn't find the main issue. Could anyone find the main issue so that I can support it? — aderchox, Sep 20 '21 at 13:31

score 419 · Answer 1 · edited Dec 12 '22 at 13:41

419

Yes, there is the workbench.action.gotoSymbol command. On Windows and Linux it's set to CTRL+Shift+O by default, on Mac it's Cmd+Shift+O.

If this command isn't available for the file types you are working with then you should take a look at the VSCode extensions. Not all languages support this feature.

edited Dec 12 '22 at 13:41

Zoltán

21,321
14
93
134

answered Mar 22 '16 at 12:27

Wosi

41,986
17
75
82

4

Hmm, not the behavior I was hoping for. I tried a couple of file types: In a C++ file, it says "Unfortunately we have no symbol information for the file" and in Python it says "There was an error in the Python extension". – Jim Carr Mar 22 '16 at 12:38
Well, dang, looks like I'm out of luck. I tried a different Python extension, now I'm getting the "no symbol information" error. :( Thanks for the info, though. – Jim Carr Mar 22 '16 at 12:52
8

This is [symbols for PHP](https://marketplace.visualstudio.com/items?itemName=linyang95.php-symbols). – ariefbayu Feb 14 '17 at 03:03
Works great in javascript, shortcut can be different when using other shortcut keymaps – Ray1618 Jun 12 '17 at 08:34
113

Adding to this one, if you press `:` after `Ctrl+ Shift + O`, the results will be group by type, which will list all the functions in one sublist. – Aditya Vikas Devarapalli Mar 12 '18 at 23:35
7

For macOS users its `Cmd + Shift + O` – Pranav Nov 21 '19 at 21:02
is there a way to do a global lookup, not just in the file i'm in? – stackjlei Jun 09 '20 at 19:58
`Ctrl + T` does a global symbol lookup – sgarg Oct 30 '20 at 20:39
Is there a way to only list the public methods? – aderchox Sep 20 '21 at 13:15
Vscode 活动文本编辑器不提供符号信息 – CS QGB Jul 16 '22 at 05:14

score 311 · Answer 2 · edited May 03 '19 at 08:26

311

Update: As stated in the comments by @jeff-xiao this extension is Deprecated and it's now a built in feature of Visual Studio code. It should be available at the bottom of file explorer as "Outline" view.

Previous text: There is now an Extension that supports this. Code Outline creates a panel in the "Explorer" section and for JavaScript, will list variables and functions in a file. I've been using this for a while now and it scratches the itch I had. Other commenters have mentioned it supports Python and PHP well.

It still seems to be in development but I haven't had any issues. Development version available on GitHub. If you're the author reading this - thanks!

This is how it looks:

If Code Outline is not visible, you can show it by:

edited May 03 '19 at 08:26

user3731622

4,844
8
45
84

answered Sep 18 '17 at 19:30

Stuart Brock

3,596
1
22
21

5

Good call, works well with JavaScript & no hunting for hidden keyboard shortcuts, nice. – Julian Knight Sep 29 '17 at 09:40
11

The extension is deprecated: DEPRECATED. Please use the [Outline view](https://code.visualstudio.com/updates/v1_24#_outline-view) that comes with Visual Studio Code. – XoXo Jul 26 '18 at 13:06
Am I correct that doesn't support viewing all the methods of a class in Python? – Eric Auld Jul 31 '18 at 20:58
I guess sometimes outline view doesn't show anything for python files. – nurp Dec 07 '18 at 08:27
Is there such an option for C++? – Dikla Mar 25 '20 at 07:24
The new Outline view does not work for me.... even Java classes read `No symbols found in ClassNameHere.java` any idea how to fix that? – dko Feb 25 '21 at 20:30
@dko You may need to edit the file first. See this question: https://stackoverflow.com/a/66921231/10792235 – Chris Collett Apr 02 '21 at 15:01
By the way, if you don't like the Outline dropdown being at the bottom, you can drag it to the icon bar at the left for full access. – Tony D Sep 03 '21 at 22:23
Is there a way to show only the name of the methods when using this shortcut? So in your screenshot it will list only the names with the purple icon and not the rest referring to the params of each method – ltdev Mar 23 '23 at 11:13

score 162 · Answer 3 · edited May 09 '18 at 13:04

162

Invoke Code's Go to symbol command:

macOS: cmd+shift+o (the letter o, not zero)
Windows/Linux: ctrl+shift+o

Typing a colon (:) after invoking Go to symbol will group symbols by type (classes, interfaces, methods, properties, variables). Then just scroll to the methods section.

edited May 09 '18 at 13:04

AStopher

4,207
11
50
75

answered Mar 10 '17 at 06:42

Yiling

2,817
2
21
27

3

Confirmed it also works on PHP too, but please notice I have PHP intellisense plugin installed. I don't know if it makes any difference. – Ignacio Segura Dec 14 '17 at 22:17
2

There must be an easy way to just see the methods. It's kind of a pain to scroll through the list of a bunch of other stuff to find the methods section. Someone should make a plug-in to do that if it isn't possible otherwise. – orrd Jun 03 '18 at 19:06
1

type @ instead of : for Go functions listing – Altimac Jul 09 '18 at 07:54
2

If not working for PHP then make sure you have 'PHP Symbols' plugin and will work for sure. – Nono Feb 07 '19 at 11:36

score 85 · Answer 4 · answered Apr 29 '20 at 07:54

85

In 2020 version of VSCode
Cmd+P

# - Find symbol across files
@ - Find symbol within file
@: - Group symbols within a file

answered Apr 29 '20 at 07:54

maverickm

1,179
1
14
25

2

Thanks, that's pretty handy! – Oliver Jan 18 '21 at 20:19
This is not I initially looking, but it is much better – sumit sharma Jul 26 '21 at 14:10

score 34 · Answer 5 · answered May 29 '19 at 11:08

34

In VSCode 1.24 you can do that.

Right click on EXPLORER on the side bar and checked Outline.

answered May 29 '19 at 11:08

Hossein

3,755
2
29
39

1

I cannot explore methods of a js class using outline! – Legends Jan 17 '20 at 17:27
works fine for Java! I'm using vscode 2020 updated version – oshan2csd May 05 '20 at 04:41
1

But that's an outline which shows way more than just the methods, like the convenient dropdownbox right above your edit window. Without having to resort to shortcuts and extra typing to get what I want. `edit` Hmm.. Breadcrums is actually what is more in line with it, if you're already in a routine, you can just click on the breadcrum and it'll popup a dropdownbox.. – SuperDre Oct 29 '21 at 09:16
1

This **OUTLINE** tab shows Java methods only after installing Ms Extension Pack for Java. It doesn't list anything for Kotlin files, I guess I need to get an extension for every single thing... save me Jebus! – andreszs Jun 06 '22 at 11:42

score 24 · Answer 6 · answered Jun 13 '18 at 08:05

24

There is a new release that can do that! Check here the latest release notes regarding code outline

answered Jun 13 '18 at 08:05

fkupper

520
3
9

Nothing is shown until the proper extensions are installed. I got the Ms Extension Pack for Java and it lists Java methods now, but no Kotlin methods. Installing an extension for every little thing is simply idiotic. – andreszs Jun 06 '22 at 11:44

ddsultan · Answer 7 · 2019-05-27T08:01:11.367

20

UPDATE: The extension features are now built-in and the extension itself is now deprecated

I have found this extention: Code Outline. This is how it looks like:

I believe that is what you have been looking for.

edited May 27 '19 at 08:01

answered Feb 28 '18 at 09:45

ddsultan

2,027
1
19
19

2

This extension no longer exists. I think it has been unpublished because the feature is now built into VSCode. – Gama11 May 25 '19 at 12:10

score 14 · Answer 8 · edited Aug 17 '17 at 09:37

14

There's no such feature today, the CTRL+SHIFT+O == CTRL+P @ doesn't work for all languages.

As a last resort you can use the search panel - although it is not so fast an easy to use as you'd like - you can enter this regex in the search panel to find all functions:

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

edited Aug 17 '17 at 09:37

meJustAndrew

6,011
8
50
76

answered Jan 02 '17 at 08:12

Picard

3,745
3
41
50

That won't work as we can write `name = function`, `name: function` (inside object) and arrow function in JavaScript – Sagar V Oct 19 '21 at 12:13

Nono · Answer 9 · 2019-02-13T11:52:09.783

13

For PHP users :)

Make sure you have 'PHP Symbol' plugin then you can get all methods and class in 'OUTLINE' Sidebar's Bottom.
Press ⌘ command + ⇧ shift + O in "macOS" or Ctrl + Shift + O while using "Windows"

OUTLINE:

@Symbol:

edited Feb 13 '19 at 11:52

answered Feb 07 '19 at 11:57

Nono

6,986
4
39
39

This works perfectly. – DragonFire Jan 13 '22 at 03:30

Grant Shannon · Answer 10 · 2022-04-22T17:44:36.850

12

For python in Explorer View, click on OUTLINE as below:

edited Apr 22 '22 at 17:44

answered Nov 15 '21 at 13:28

Grant Shannon

4,709
1
46
36

For an eclipse like experience you can also drag that tab over the right hand gutter! – SGTMcClain Jul 07 '23 at 17:59

score 9 · Answer 11 · answered Apr 27 '22 at 09:26

9

Watch this link: https://code.visualstudio.com/updates/v1_40#_type-filters-for-outline-and-breadcrumbs

Explorer -> OUTLINE, you can choose what you want to show (only methods and functions in your case) and the result is similar to Netbeans:

answered Apr 27 '22 at 09:26

Nacho

628
1
12
19

RBT · Answer 12 · 2020-04-08T14:45:28.717

Visual Studio Code market place has a very nice extension named Go To Method for navigating only methods in a code file.

Hit Ctrl+Shift+P and type the install extensions and press enter

Now type Add to method in search box of extensions market place and press enter.

Click install to install the extension.

Last step is to bind a keyboard shortcut to the command workbench.action.gotoMethod to make it a real productivity thing for a developer.

score 5 · Answer 13 · edited Jan 08 '18 at 13:28

5

Open symbol by name : CTRL+T might be what you are looking for. Works perfectly with my TypeScript project.

edited Jan 08 '18 at 13:28

wonea

4,783
17
86
139

answered Oct 25 '17 at 10:43

wodzu

3,004
3
25
41

score 5 · Answer 14 · answered Dec 31 '18 at 16:52

It is an extra part to the answer to this question here but I thought it might be useful. As many people mentioned, Visual Studio Code has the OUTLINE part which provides the ability to browse to different function and show them on the side.

I also wanted to add that if you check the follow cursor mark, it highlights that function name in the OUTLINE view, which is very helpful in browsing and seeing which function you are in.

score 4 · Answer 15 · edited Apr 29 '19 at 18:03

4

ctrl+shift+o // This should work for javascript files by default

For PHP install the extension PHP SYMBOLS

FOR PYTHON install the extension PYTHON

On Reload, this will work fine

edited Apr 29 '19 at 18:03

David Oliver

2,424
1
24
37

answered Jul 26 '18 at 07:56

Moh .S

1,920
19
19

3

You could also do `Ctrl+P` and type `@` - this lists all functions/symbols in the file. And when typing `@function_name` does a fuzzy string search on the symbols. – Roopak A Nelliat Sep 12 '18 at 06:32
1

yes nice suggestion.. but you know it requires two steps, where as ctrl+shift+o is single step. :) – Moh .S Sep 14 '18 at 06:39

score 4 · Answer 16 · answered Aug 27 '21 at 11:05

4

in-built code OUTLINE available now with VS code

answered Aug 27 '21 at 11:05

Amol Ghatol

179
3
8

BK0090 · Answer 17 · 2018-10-12T15:52:43.787

2

There is a plugin called show functions which lists all the function definitions in a file. It also allows you to sort the function so can search them easily.

edited Oct 12 '18 at 15:52

answered Oct 12 '18 at 15:40

BK0090

59
7

2

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Zoe Oct 12 '18 at 15:43

score 1 · Answer 18 · edited Aug 23 '17 at 05:33

1

CTRL+F12 (CMD+F12 for Mac) - opens for me all methods and members in PHP class.

edited Aug 23 '17 at 05:33

simhumileco

31,877
16
137
115

answered Jun 08 '17 at 03:13

Alex Mazaltov

29
2

1

Didn't work, are you sure you are not using any extension? – Mohammed Atif Sami Mar 30 '19 at 16:47
This only worked for me in `Intellij Idea`, but not for `Visual Studio Code`. – Guilherme Abacherli Aug 22 '23 at 00:08

score 1 · Answer 19 · answered Mar 12 '20 at 22:39

1

For find method in all files you can press CTRL + P and then start search with #

example : #signin

answered Mar 12 '20 at 22:39

Hamed Naeemaei

8,052
3
37
46

score 0 · Answer 20 · answered May 17 '18 at 14:24

Take a look at Show Functions plugin. It can list functions, symbols, bookmarks by configurable regular expressions. Regular expressions are a real saver, expecially when you're not using a mainstream language and when CodeOutline doesn't do the job. It's ugly to see a split window with these functions (CodeOutline seems to be better integrated) but at least there's something to use

score 0 · Answer 21 · answered Aug 19 '22 at 15:53

0

If you are using typescript you can use this extension "Code navigator for typescript".

I have been trying it and found it useful to list my typescript class methods.

answered Aug 19 '22 at 15:53

kimy82

4,069
1
22
25

score 0 · Answer 22 · answered Mar 14 '23 at 08:57

0

Go to vs-code preferences, search for: Breadcrumbs: Symbol Sort Order:

And choose "By type."

answered Mar 14 '23 at 08:57

Sunny127

265
3
8

score 0 · Answer 23 · answered Apr 07 '23 at 06:21

0

If you still can't figure where outline is then Click View->Open View -> outline

Or in command palette (Ctrl + P) the type: view Outline

Your outline will now be visible.

answered Apr 07 '23 at 06:21

EmbeddedEngr

13
4

How is this different from the existing Answers? – ryanwebjackson Apr 18 '23 at 13:19
@ryanwebjackson There was no outline window on my VS (don't know how it disappeared :) ) and I was struggling on getting it back. – EmbeddedEngr May 19 '23 at 05:59

Method List in Visual Studio Code

23 Answers23

Linked