Blog

VSCode Extensions

Nov 3, 2021

Hello dev! Here’s a selection of VSCode extensions to help you day to day and make you more productive.

Measuring productivity

Before we can improve our productivity, we first need data on where it stands. To get that data, I know these three extensions:

Wakatime

Just like Code Time, this extension helps you measure your activity while you develop day to day: how much you work in each language and plenty of other information.

Code Time

Besides having an animal paw as its icon, which is surely very cute lol, it gives you a dashboard of how you work day to day, which hours you’re most productive, among other information.

100 days of code

The same creators of Code Time built this extension to help you reach your challenges, earning badges with every achievement.

Snippets

Something that keeps me very productive day to day is using shortcuts to build standard code, for example creating React components, style files, or an API configuration file.

For React and React Native development, there are these 2 extensions from Rocketseat:

Rocketseat ReactJS

Rocketseat React Native

The shortcuts I use the most are:

rnfc → React Native Functional Component: creates the structure of a React Native component
rfc → React Functional Component: creates the structure of a React component
styled-react → Styled React: creates an initial structure with styled components
api → Creates an Axios configuration structure.

Each extension’s page has a list of the available commands.

Helpers

SVG Viewer

When we open an .svg in VSCode it shows us its code, but most of the time we want to see the image itself, and that’s what this extension does.

This is an extension I really like, to leave comments in my code about things I still have to implement so I don’t forget any rule. Just add a comment like // TODO: or // FIXME: and the extension highlights it, making it more visible and harder to forget when you review your changes before pushing. It also builds a tree with the files where you added them.

Template String Converter

With modern JS we can easily concatenate strings using Template Literals, but it can be annoying to keep switching from quotes to backticks, and this extension helps with that: as soon as you type ${} inside quotes, they change to backticks.

Brackets Pair

You know when we forget to open or close a parenthesis or brace and can’t figure out where it goes?! This extension gives a different color to each open and close pair, making it easier to find what’s missing.

Blockman

I believe this extension has the same goal as Brackets Pair, but with a different way of visualizing it. It draws a border around each open and close pair, making it a bit easier to find where a parenthesis or brace is missing and also making each block easier to see.