Method List in Visual Studio Code

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?

See code.visualstudio.com/docs/editor/editingevolved

This missing feature is being tracked at github.com/Microsoft/vscode/issues/5605

Released! code.visualstudio.com/updates/v1_24#_outline-view

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.

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 & issue 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?

wonea

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

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.

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

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.

This is symbols for PHP.

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.

For macOS users its Cmd + Shift + O

user3731622

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!

https://i.stack.imgur.com/D24i7.jpg

https://i.stack.imgur.com/ZaR8d.png

Good call, works well with JavaScript & no hunting for hidden keyboard shortcuts, nice.

The extension is deprecated: DEPRECATED. Please use the Outline view that comes with Visual Studio Code.

Am I correct that doesn't support viewing all the methods of a class in Python?

I guess sometimes outline view doesn't show anything for python files.

Is there such an option for C++?

AStopher

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.

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.

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.

type @ instead of : for Go functions listing

If not working for PHP then make sure you have 'PHP Symbols' plugin and will work for sure.

maverickm

In 2020 version of VSCode Cmd+P

# - Find symbol across files

@ - Find symbol within file

@: - Group symbols within a file

https://i.stack.imgur.com/emfR4.png

Thanks, that's pretty handy!

This is not I initially looking, but it is much better

Hossein

In VSCode 1.24 you can do that.

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

I cannot explore methods of a js class using outline!

works fine for Java! I'm using vscode 2020 updated version

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

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!

fkupper

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

https://i.stack.imgur.com/f5iEo.png

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.

ddsultan

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:

https://i.stack.imgur.com/ONbKd.png

I believe that is what you have been looking for.

This extension no longer exists. I think it has been unpublished because the feature is now built into VSCode.

meJustAndrew

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

That won't work as we can write name = function, name: function (inside object) and arrow function in JavaScript

Nono

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:

This works perfectly.

RBT

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

https://i.stack.imgur.com/Rt8Vd.png

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

https://i.stack.imgur.com/2xb9M.png

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.

wonea

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

Ahmad Ghadiri

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.

https://i.stack.imgur.com/iXDfc.png

Grant Shannon

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

https://i.stack.imgur.com/x0q7h.png

David Oliver

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

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.

yes nice suggestion.. but you know it requires two steps, where as ctrl+shift+o is single step. :)

Amol Ghatol

https://i.stack.imgur.com/88tvQ.png

BK0090

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.

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link 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.

simhumileco

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

Didn't work, are you sure you are not using any extension?

Hamed Naeemaei

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

example : #signin

https://i.stack.imgur.com/r7JBX.gif

Nacho

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:

https://i.stack.imgur.com/Oscod.png

Ben

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

Method List in Visual Studio Code

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US