loading...
Cover image for 6 VS Code Extensions That Give You Superpowers πŸ¦Έβ€β™‚οΈ

6 VS Code Extensions That Give You Superpowers πŸ¦Έβ€β™‚οΈ

themarcba profile image Marc Backes πŸ₯‘ Originally published at marc.dev ・4 min read

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

GitLens

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

Better Comments

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

Quokka.js

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

REST client

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

Posted on by:

themarcba profile

Marc Backes πŸ₯‘

@themarcba

Web Developer πŸ’» Β· Freelancer πŸš€ Β· Traveler 🌎 Β· Tech enthusiast πŸ™Œ Β· Espresso lover ✌️ Β· Happily married ❀️ Β· Polyglot

Discussion

markdown guide
 

The REST client extension deserves much more praise. It has native support for .env variables, shorthands, all types of requests, I have completely replaced postman with this extension, as now I can store a .http file inside each repo and source control my API tests.

 

What I'm missing about REST client (or I didn't find out how to do it yet) is custom code.
In Postman I can log in to my service, save the token in a variable and attach the token to future API calls.

Do you happen to know if that's possible with REST client?

 

I would imagine you could accomplish this by making a request to get a token, add that token to your .env file, and then make sure you're adding that token to all your requests that need auth by referencing that variable with the {$dotenv variableName}.

Let me know if that made any sense at all lol

That does make sense. I'll just have to find out how to get the answer (token) to the .env file.

 

I just wanted to add that while not an extension, emmet inside of VSC is worth looking into.
some good commands are:

! enter = html boilerplate

element + (# or .) + element label enter = html element with labels so for example ........

div.hero enter = <div class="hero"> </div>

or something like

span#banner enter = <span id="banner"> </span>

tr*5 enter = <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr>

plus you can nest.
theoretically you could lay out a whole pages frame with a single line plus enter.

I really need to look deeper into Emmet. It's a time saver.

 

You are right, emmet is a real superpower. However it's not an extension. As you said it's built-in to VS Code.

 

Careful with Quokka as you can mess up if you make your main code a playground ;)
Still prefer to use Dev tools or online sandboxes for that ;) Nice list, btw :)

 

I think you forgot one superpower: Power Mode πŸŽ‰

 

I'm a superman now ❀️🎈

 

One more that I like a lot is DocumentThis extension. It generates a really nice documentation template to basically anything, a method, a class.
And who doesn't appreciate well documented APIs!