Issue #46  (Function Definitions and Peeks)03/08/23

Advertisement
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.
 
Hovering for a function definition in VS Code
 
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.
 
Peeking a function definition in VS Code

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".
 
Changing link definitions to peek in VS Code

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.
 
Now on to this week's hand-picked links!
 
 

VS Code Tools

Better Folding — Extension to improve the code folding experience in VS Code with the addition of many commonly requested folding-related features.

GitHub Theme — A popular extension that offers a collection of GitHub-like themes (4 darks and 3 lights) for VS Code.

Circular Dependency — Circular dependency detection for JavaScript and TypeScript, with support for ES Modules and CommonJS.

Code-GPT — Another Chat-GPT-based extension for VS Code that provides instant explanations for code right inside your editor.
 

VS Code Articles

How to Set Up OpenGL in VS Code — These steps require installing either C++ or Python, after which the tutorial goes through how to set up OpenGL for 2D/3D graphics.

Refactoring TypeScript React Components in VS Code — Encourages use of VS Code's "Refactor..." menu to help you extract types from a JavaScript object.

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

You've Just Installed VS Code on a New Machine. You Immediately Go to Settings and Change... — A Tweet thread from the VS Code theme. You might find it interesting to see what others said in response to this hypothetical.
 
 

Best of the Rest

Announcing Sandpack 2.0 and a Node.js Runtime for Any Browser — Announcement from the CodeSandbox team with some improvements for Sandpack, the open-source in-browser bundler that powers their main product.

Adrenaline — A chat interface for debugging your code in an online playground, with support for a dozen or more languages, powered by vector search and large language models. Can also be installed locally.

▶ A Video in which Vim Saves Me Hours & Hundreds of Clicks — A YouTube video from 2018 with some Vim tips you might find useful if you're just getting into Vim.


Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.