My VS Code

For those working with JavaScript, React, Node, or React Native, it's no surprise that the most popular editor is Visual Studio Code, or simply - VS Code. Today, I want to share three configurations that are indispensable in my VS Code and that you might also find useful.

Clean Layout

In the screenshot above, we see the default appearance of VS Code. Just below, there's a screenshot showing some customizations. If you look closely, you'll notice that I don't use the default left sidebar of the editor. Instead, I use an extension called Activity Bar, which places shortcuts like Search, Explorer, or Debugger in the bottom left bar.

Terminal

To further enhance a clean layout, the terminal fills the entire bottom area, providing more useful space in the editor. To activate this feature, click on the terminal bar, go to the Align Panel option, and select Justify.

Parameters Hints

One of the most useful settings in VS Code, which few people use, is parameter hints.

Basically, labels are added around the function or component that inform input parameters, as well as returns. Observe the gray text in the screenshot below. This feature is common in paid IDEs like WebStorm and extremely useful in daily work. Oh, and it works with both TypeScript and JavaScript.

To enable this feature in VS Code, simply add the following snippet to your configuration file:

 "editor.inlayHints.fontSize": 14,
 "editor.inlayHints.padding": true,
 "editor.inlayHints.enabled": "on",
 "javascript.inlayHints.parameterNames.enabled": "all",
 "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
 "typescript.inlayHints.parameterNames.enabled": "all",
 "typescript.inlayHints.parameterTypes.enabled": true,
 "typescript.inlayHints.variableTypes.enabled": true,        

These are the main configurations I make in VS Code. Feel free to try them out, and don't forget to leave your feedback! ??

Until next time! ??