Powerful VS Code extensions that every developer should have
BG Image — Unsplash
If you’re a developer, you don’t need an introduction to Visual Studio Code, or VS Code, as most people call it. It is one of the most-used code editors among developers around the world. Being a free, open-source, cross-platform code editor backed by one of the biggest names (Microsoft) only adds to its popularity. The more developers using it, the bigger the community it has, which in turn leads to more extensions released for the editor. In this article, we will discuss some very useful extensions specifically for web development.
1. Tabnine Autocomplete AI
We all use language-specific extensions to autocomplete code snippets for us. Most of the time these snippets are predefined and you can use one from the collection of snippets available. But what if there is an extension that can autocomplete any language, learn your coding pattern, and predict the autocompletion required for each scenario?
Tabnine does exactly this by studying publicly shared code and using AI deep learning algorithms. It has the ability to predict your next coding needs and suggest one-click code completion. If you are worried about the privacy of your code, you will be relieved to know that Tabnine’s suggestions are based on models that are trained using millions of lines of open source code, and no part of your code is used to train models or stored anywhere.
Autocompletion with Tabnine
2. Better Comments
Another self-explanatory tool, the Better Comments extension will help you to add more human-friendly comments to your code. It allows you to categorize your comments into alerts, queries, to-dos, highlights, etc. Even code that is commented out can be styled specifically to clearly show that the code shouldn’t be there. It also allows users to add custom comment styles in settings.
Example of comments written using better comments
3. Auto Rename Tag
The name is pretty self-explanatory for this tool. Auto Rename Tag automatically renames tags in your code and helps you save time. If you have ever tried to rename a tag and spent more time finding the other tag in the pair than the actual renaming, then this extension is for you. Change your tag name in one place (opening or closing) and the extension takes care of the other one. No more searching, and no more forgetting to rename tags leading to errors in your code.
Demo of Auto Rename Tag
4. Peacock
We have all been there, having multiple projects open at the same time in multiple VS Code instances. It’s not easy to identify projects while switching between the instances, and in most cases, you have to open it and read the project name or even read the code if project names are similar. Peacock lets you change the color of your VS Code workspace and easily identify projects while switching between windows. It can also be helpful when you are using VS Live Share or VS Code’s remote feature.
Distinctive colors for VS Code instances using Peacock
5. Trailing Spaces
It seems like most of the simple extensions are self-explanatory. Another one on the list is Trailing Spaces. This extension highlights and deletes all the trailing white spaces in your code. You can delete white spaces by pressing F1 and running the Trailing Spaces: Delete command or by creating a VS Code shortcut in the settings that will run the command. It also allows a lot of customization when it comes to handling white spaces, like deleting modified lines only, ignoring syntax, etc.
6. Color Highlight
The Color Highlight extension is so simple that all it needs is one line to understand: It styles CSS/web colors found in your code.
Colors highlighted in CSS
7.Quokka.js
Quokka.js is an extension that allows rapid debugging while writing code in JavaScript or TypeScript. It can add the values of variables next to the variables themselves or print values of console log statements without having to run the code. Runtime values are updated and displayed in your IDE next to your code, as you type. It also has a paid version with many more features.
Quokka.js in action
8. Turbo Console Log
If you are like most developers and depend on a console log for everything from debugging to testing, this is the perfect extension for you. Having multiple console logs can make it confusing to understand what came from which part of the code, and no one has the time or patience to write detailed messages in console logs. Enter Turbo Console Log, an extension that automatically adds console logs that include a message with all the necessary details. Simply select one or more variables and press CTRL+ALT+ L, and it will automatically add a console log that prints the name of class and function the variable belongs to (if it has them), variable name, and its value in the following format:
console.log(“SelectedVariableEnclosingClassName -> SelectedVariableEnclosingFunctionName -> SelectedVariable”, SelectedVariableValue)
Turbo console log adding console logs automatically for multiple variables
9. Polacode
Polacode is a very simple extension that allows you to generate neat-looking screenshots of code snippets without having to leave VS Code. You can select any piece of code and run it using Polacode to generate screenshots that can be shared with fellow developers, blogs, or presentations. It also allows customization in terms of theme and colors.
Generating code screenshot using Polacode
10. Image preview
Image preview is another simple extension that does what it says in the name. Image preview will show you a preview of image assets referenced in code in the gutter or when you hover.
Images displayed on hover
Bonus: Music Time for Spotify
If you have ever searched for that perfect track to help you focus on writing code or wanted to control your music player without leaving VS Code, Music Time for Spotify is the extension for you. The documentation lists tons of features:
- Integrated player controls: Control your music right from the status bar of your editor.
- Embedded playlists: Browse and play your Spotify playlists and songs from your editor.
- AI playlists: Get a personalized AI playlist generated using machine learning to help you focus.
- Metrics profile: Learn how the underlying metrics of music (including tempo, loudness, speechiness, energy, and valence) impact how you code.
- Personal top 40: See your most productive songs, artists, and genres every week in your weekly top 40.
- Weekly music dashboard: See your top songs, artists, and genres each week by productivity score and plays while coding.
- Global top 40: Discover new music from developers around the world in our Software Top 40 playlist.
- Slack integration: Connect Slack to share songs and playlists in channels in your workspace.
Music Time controls in VS Code
Let me end the article by putting up a disclaimer that I am not personally associated with any of the extensions mentioned above nor have I received any incentives to promote them. Feel free to add in the comments more extensions that you think would be useful. You can also read VS Code Extensions to help you write better code published in Better Programming to learn about more very useful extensions.