Issue #46 (Function Definitions and Peeks)03/08/23
Developer-friendly eSignature API
Add eSignatures to your software. Empower users to sign, send, and track documents without leaving your website, CRM, or app. Get 250 legally-binding signature for free with our free trial.
|
|
|
A couple of useful tips to know when writing JavaScript in VS Code (which will also apply to other languages, but I'll use JS for these examples) are related to
functions and their definitions.
As you probably know, when you hover over any function reference, you get a little tooltip with some basic info on the function's definition.
That's a little bit helpful, but like any good IDE, VS Code lets you go even further when you need to. If you right-click on any function reference (i.e. where a function is called), you have a number of
options on getting info on the source of the function, including:
- Go to Definition
- Go to Type Definition
- Go to Implementations
- Go to References
- Go to Source Definition
- Peek (with multiple sub-options)
So there's lots you can do in a large codebase to see where a function is originally defined, used, and so on. The "Peek..." option is a particularly useful one because it allows you to
stay in the same editor and "peek" the definition in a larger format compared to the simple info that appears in the tooltip. The "Go to References" option works similarly, keeping you in the same editor window.
You can also quickly access any function's definition by holding CTRL/CMD and clicking the definition, and you can quickly
peek a definition using the keyboard shortcut ALT-F12. You can even edit a function definition directly inside the inline peek or references window, should the need arise.
By default, CTRL/CMD-clicking to go to a function definition will either jump to the current part of the file where the definition is written, or will open the external file (as in the case of ES modules). If you prefer the "peek" view for all definitions by default, you can change this in your settings. Use the keyword "definition" to search and
check the box "Definition Link Opens in Peek".
Personally, I like the "peek" UI because it allows you to see and edit the function's definition without leaving the context in which you're working.
There are a number of other "definition" related settings you can look at while searching that term, so you may find some other customizations in there that you'll want to consider.