Reputation: 5433

Method List in Visual Studio Code

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?

Upvotes: 519

Answers (25)

dmitry_romanov

Reputation: 5425

If you use vim-mode, gO (goto Outline) opens the list of local methods and variables.

It is the same to hitting Ctrl + P and then typing @ (as described in https://stackoverflow.com/a/61496844/774971 answer above), but fewer keystrokes.

Upvotes: 1

YurkinPark

Reputation: 179

So, read all the threads, checked all the methods described and i can say: everything is working but have one big limit: there is no possibility to go to parent methods. This is critical point for me and PHP Intelephense plugin doesn't have such feature

Upvotes: -1

EmbeddedEngr

Reputation: 33

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.

Upvotes: 2

Sunny127

Reputation: 283

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

And choose "By type."

Upvotes: 0

Wosi

Reputation: 45163

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.

Upvotes: 470

kimy82

Reputation: 4465

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.

Upvotes: 0

Nacho

Reputation: 658

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:

Upvotes: 11

Grant Shannon

Reputation: 5055

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

Upvotes: 13

Amol Ghatol

Reputation: 319

in-built code OUTLINE available now with VS code

Upvotes: 5

maverickm

Reputation: 1269

In 2020 version of VSCode
Cmd+P

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

Upvotes: 93

RBT

Reputation: 25877

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.

Upvotes: 7

Hamed Naeemaei

Reputation: 9638

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

example : #signin

Upvotes: 1

Hossein

Reputation: 4539

In VSCode 1.24 you can do that.

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

Upvotes: 38

ddsultan

Reputation: 2257

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.

Upvotes: 20

Stuart Brock

Reputation: 3892

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:

Upvotes: 338

Moh .S

Reputation: 2090

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

Upvotes: 5

Nono

Reputation: 7302

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:

Upvotes: 15

Ahmad Ghadiri

Reputation: 331

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.

Upvotes: 6

BK0090

Reputation: 59

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.

Upvotes: 2

fkupper

Reputation: 544

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

Upvotes: 25

Ben

Reputation: 33

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

Upvotes: 0

Yiling

Reputation: 2965

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.

Upvotes: 173

wodzu

Reputation: 3172

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

Upvotes: 5

Alex Mazaltov

Reputation: 29

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

Upvotes: 1

Picard

Reputation: 4102

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*\(

Upvotes: 15

Method List in Visual Studio Code

Answers (25)

Related Questions