How to navigate to interface's implementation in VS Code as easily as in WebStorm?

Question

I'm trying Visual Studio Code for TypeScript projects at the moment. So far, I like it, but I'm having an issue with interfaces. I would like to be able to jump to interface's implementation(s) as easily as I can with WebStorm. Just a click on the green button on the left as in the picture below jumps to the implementation (or shows a list of there are multiple implemenations).

Anyone know how to do it in VSCode?

I mean implementation. In case you have multiple implementation, jetbrains/webstorm shows a drop down list of all the implementation. It is quite nice. — JulienCoo, Oct 12 '18 at 10:55
Does this answer your question? [Go to implementation instead of TypeScript declaration](https://stackoverflow.com/questions/46893661/go-to-implementation-instead-of-typescript-declaration) — ThaJay, Sep 12 '22 at 10:38

score 45 · Answer 1 · edited Jan 23 '20 at 17:38

45

You can go to the implementation of an interface by clicking on Ctrl + F12. You can always read more about this in the official documentation.

Go to Definition: Ctrl + Click
Go to Definition (Alternative): F12
Go to Implementation Crl + F12
Go to Implementation ⌘ + F12 (MAC)

edited Jan 23 '20 at 17:38

bpedroso

4,617
3
29
34

answered Sep 16 '19 at 06:52

Sibeesh Venu

18,755
12
103
140

7

Yes, there's such a command. Unfortunately, it works pretty much the same as "Go to Definition", so I can only see type definitions but not the actual code... Wanted to inspect some library's code, but have to find the files manually :\ – Jerry Green Feb 29 '20 at 00:06
2

"Go to implementation" shortcut doesn't seem to work on Linux (Ubuntu 18.04). Might have to do with system keybindings. – Ivo Pereira Aug 01 '20 at 21:24
Confiirmed. Ctrl + F12 does not work on linux ( debian ) – user1077915 Nov 09 '20 at 13:50
@user1077915 you can use shift+F12 to look up of implements. – chudasamachirag Aug 18 '21 at 12:08
How to go implementation for mac Touch Bar user? – Elbo Shindi Pangestu Oct 19 '22 at 07:20

score 7 · Accepted Answer · answered Oct 12 '18 at 14:04

7

VS Code does not have a specific command to find all implementations of an interface method (you could consider filing a feature request), but the "Find All References" command does give you a list that contains the implementations as well as the calls.

answered Oct 12 '18 at 14:04

Matt McCutchen

28,856
2
68
75

I am code with golang and Find All Reference always return one definition at the interface itself. Do I need to make any configuration to make this works? – Hà Link Aug 23 '19 at 09:23

score 6 · Answer 3 · answered Jun 24 '20 at 17:15

You can use Goto implementations (Ctrl-F12) or Find all implementations

I'm currently using Codium but this should make no difference since it is all based on extensions.

Version: 1.46.1
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-19T10:53:55.306Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-37-generic

score 1 · Answer 4 · answered Sep 15 '20 at 07:37

Another way would be to use Regex search for your particular language. For example in PHP the syntax is like this

class Model implements Arrayable, ArrayAccess, Jsonable, JsonSerializable, QueueableEntity, UrlRoutable

So if you wanted to find all classes that implement the Jsonable interface, you could do this:

Regex:

implements(.*)Jsonable

score 0 · Answer 5 · answered Oct 22 '22 at 04:53

0

VS code support that. I use java, vs code support that, I think it's then same with ts, rigth click at the interface or super class, then choose "find all implements".

answered Oct 22 '22 at 04:53

Kicey

43
3

How to navigate to interface's implementation in VS Code as easily as in WebStorm?

5 Answers5