Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
Marc Backes

6 VS Code Extensions That Give You Superpowers

January 30, 2020 Β· by Marc Backes
Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
6 VS Code Extensions That Give You Superpowers 6 VS Code Extensions That Give You Superpowers

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 the 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 the 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:

  • Indentions 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 these 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 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 time). 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 spidey-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.