Method List in Visual Studio Code
Visual Studio-CodeVisual Studio-Code Problem Overview
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?
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
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.
Solution 2 - Visual Studio-Code
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][2] 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][3]. If you're the author reading this - thanks!
This is how it looks:
[![Code Outline plugin for VSCode][5]][5]
If Code Outline is not visible, you can show it by: [![enter image description here][4]][4]
[2]: https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline "Code Outline" [3]: https://github.com/patrys/vscode-code-outline [4]: https://i.stack.imgur.com/ZaR8d.png [5]: https://i.stack.imgur.com/D24i7.jpg
Solution 3 - Visual Studio-Code
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.
Solution 4 - Visual Studio-Code
In 2020 version of VSCode
Cmd+P
- # - Find symbol across files
- @ - Find symbol within file
- @: - Group symbols within a file
Solution 5 - Visual Studio-Code
In VSCode 1.24 you can do that.
Right click on EXPLORER
on the side bar and checked Outline
.
Solution 6 - Visual Studio-Code
There is a new release that can do that! Check here the latest release notes regarding code outline
Solution 7 - Visual Studio-Code
UPDATE: The extension features are now built-in and the extension itself is now deprecated
I have found this extention: [Code Outline][1]. This is how it looks like:
[![This is how it looks like][2]][2]
I believe that is what you have been looking for.
[1]: https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline/ "Code Outline" [2]: https://i.stack.imgur.com/ONbKd.png
Solution 8 - Visual Studio-Code
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*\(
Solution 9 - Visual Studio-Code
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"
Solution 10 - Visual Studio-Code
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.
Solution 11 - Visual Studio-Code
Open symbol by name : CTRL+T might be what you are looking for. Works perfectly with my TypeScript project.
Solution 12 - Visual Studio-Code
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.
Solution 13 - Visual Studio-Code
Solution 14 - Visual Studio-Code
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
Solution 15 - Visual Studio-Code
Solution 16 - Visual Studio-Code
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.
Solution 17 - Visual Studio-Code
CTRL+F12 (CMD+F12 for Mac) - opens for me all methods and members in PHP class.
Solution 18 - Visual Studio-Code
Solution 19 - Visual Studio-Code
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
Solution 20 - Visual Studio-Code
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: