As a web developer, you spend most of your day in front of your IDE. My choice for this is Microsoft's Visual Studio Code. One of the great things about it is, that there are many extensions that you can just install on the IDE, and many of them could make your life a whole lot easier.

Here are some of my favorite extensions, that sometimes make you feel you have superpowers, loaded right into your code editor.

GitLens

👉 GitLens at VS Code marketplace

When you work with Git (which you should) in a team, questions about the author of a specific piece of code arises. "I have no idea what's going on here, and I'd like to speak with the author of it to clarify things".

Well, that is one thing that GitLens does for you... in-line. There are many more features such as code heatmaps, powerful commit/compare/stash/history commands, and rich sidebar views for repository, file history, compare, etc.

🦸‍♂️ Superpower it gives you: You can look into the soul of your repository right from the comfort of your code editor.

Better Comments

👉 Better Commends at VS Code marketplace

With long files with many comment sections, it's helpful to have a color distinction between different comment types such as Todo, Important, Highlighted, Question. This extension adds this intuitive color coding to your editor - zero configuration required.

🦸‍♂️ Superpower it gives you: Gives you eagle-sight for must-see comments.

Prettier - Code formatter

👉 Prettier - Code formatter at VS Code marketplace

If not using a code formatter, chances are you produce or can't find bugs because of wrong indention on a daily basis. Having your code clean and well-spaced/indented is good for the developer's peace of mind and working in a team.

Prettier formats your code in a way you can customize. For example:

• Identions should be spaces with a width of 4
• Use a space between brackets and it's content
• Code lines should not be longer than 80 characters
• Transform double-quotes into single-codes
• Automatically add semicolons to end of lines

🦸‍♂️ Superpower it gives you: Gives you the power to convert your messy code into a unified, beautiful code with a single snap of a finger (no gauntlet required).

Quokka.js

👉 Quokka at VS Code marketplace

Before knowing this extensions, I opened the Chrome Developer Tools if I wanted to quickly try something in JavaScript. Quokka gives you a scratchpad for trying JavaScript code, without even leaving your editor.

🦸‍♂️ Superpower it gives you: Ability to create a safe bubble to try your code without affecting the outside world.

Bookmarks

👉 Bookmarks at VS Code marketplace

If you work on larger files where you need to switch from one place to another, and need to switch around (e.g. in Vue.js if you write on the JavaScript and template) you'd have to scroll (and not find immediately) the other parts you are working on.

Bookmarks lets you set a bookmarks per line of code, so you can switch to the next important line pretty quickly.

🦸‍♂️ Superpower it gives you: Teleportation to the next relevant line of code in zero-time.

ESlint

Writing JavaScript code is easy because it's a forgiving language (most of the times). But there are mistakes, wrong uses, oversights that the engine does not complain about, but which should not be made.

ESlint (as the most popular JavaScript linter) in VS Code warns you about syntax errors, suspicious constructs, style errors, and other mistakes before executing the code. It is highly configurable and can help you be a better developer.

🦸‍♂️ Superpower it gives you: Gives you spidy-sense about bad code while typing it.

Bonus: REST Client

👉 REST Client at VS Code marketplace

Does not give you superpowers, but is a very handy tool in your belt nonetheless.

When you write backend, chances are you are exposing an API for the backend to consume. Sometimes you just want to make a quick request to the API without having to start Postman (or another REST API client).

This extension lets you do this with a quick write up in an empty file, and off you go. The response appears as split-screen on another tab. It even lets you save snippets for requests you make more frequently.

Summary

There are many great extensions out there and this is just the tip of the iceberg. If you are curious, check out the Visual Studio Code Marketplace for more amazing extensions.

Photo by Esteban Lopez on Unsplash