Visual Studio Code(VS-Code) Inlay Hints

Visual Studio Code

Hints are always useful in any puzzling situation, whether coding or any other situation. VS Code IDE comes up with a very exciting feature to provide various types of hints to developers in order to make them more productive, effective, and efficient.

Inlay Hints

Inlay hints add inline information to the source code to help you understand what the code does. The following type of inlay hints are available in VS Code

• Parameter name inlay hints
• Parameter type inlay hints
• Variable type inlay hints
• Property type inlay hints
• Return type inlay hints

Introduction To Inlay Hints & Corresponding Configuration

Parameter name inlay hints show the names of parameters in function calls. This can help in understanding the meaning of each argument at a glance. This is especially helpful for functions that have parameters that are easy to puzzle during development.

Setting: typescript.inlayHints.parameterNames.enabled

Parameter type inlay hints

Variable type inlay hints show the types of variables that don't have explicit type annotations.

Setting: typescript.inlayHints.variableTypes.enabled

Variable type inlay hints

Property type inlay hints show the types of class properties that don't have an explicit type annotation.

Setting: typescript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

Parameter type inlay hints show the types of implicit typed parameters.

Setting: typescript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

Return type inlay hints show the return types of functions that don't have an explicit type annotation.

Setting: typescript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

Configure Inlay Hints

All the above-mentioned inlay hints can be easily configured either by searching them in the VS Code settings or by adding the specific or all hints in the VSCode settings JSON.

All the above configurations will take boolean values (true/false) except one "parameterNames inlay hint" that will take one of the following values:

• none — Disable parameter inlay hints
• literals — Only show inlay hints for literals (string, number, boolean, or other scalar variables)
• all — Show inlay hints for all arguments

Show/Hide Inlay Hints

Sometimes in a crunch and time-critical situations, these inlay hints can be overwhelming and distracting. VS code allows users to toggle these hints as per will. One can toggle the inlay hints by setting the following configuration in the settings JSON

Setting: editor.inlayhints.enabled

This setting can take one of the following values:

• ON
• OFF
• OnUnlessPressed
• OffUnlessPressed

A MAC — user can easily use the hotkey control + option to show and hide the inlay hints.

Sample Settings JSON With Inlay Hints

Below is the sample settings JSON to enable all the inlay hints for typescript language and to show them all the time during the development

{
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "editor.inlayHints.enabled": "on"
}

It is important to note that the above-mentioned inlay hints are configured for typescript language, but these hints can easily be configured for other languages too like javascript, and settings JSON will look like the following

{
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "editor.inlayHints.enabled": "on" 
}

Conclusion

Inlay hint is a very special feature provided by VS Code in order to speed up the development process. But this feature can be overwhelming under certain circumstances, use it well and judicially.

Let's sit together to find new interesting and efficient ways to make the development process efficient, effective, and a cakewalk.

Thanks :)

Happy Coding :)