VSCODE: extensões épicas, para se tornar um super-herói e salvar o dia (a última extensão é a melhor).
Tags: javascript, react, vscode, womenintech
Published: 2020-05-08 21:16:45


Hei Devs,

Hoje irei trazer algumas extensões épicas para `visual studio code`, entre todas a última é sensacional, sempre pesquisei bastante sobre isso e com as experiências do dia-a-dia, algumas extensões salvaram meu dia, espero que ajude vocês também, desejo a todos uma boa leitura.




## Better Comments

Esta extensão ajuda muito na visualização de informações importantes nos `comentários`, como `tarefas`, `alerta`, `perguntas`, `parâmetros`, se você escreve muitos comentários em suas `funções` e `métodos`, essa extensão é ideal.

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/i/859lc85cpy2cfi5c0vme.gif)
Saiba mais acesse o site da extensão: [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)


## Color Highlight

Simples e precisa, mostra, cores em volta do hexadecimal, escrito com `CSS`. 

![Color Highlight](https://dev-to-uploads.s3.amazonaws.com/i/5b76muqmwxkc221rs0da.gif)
Saiba mais acesse o site da extensão: [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

## Bookmarks

Por que não Marcar trechos de código, a extensão`Bookmarks` facilita a navegação marcando blocos de código bem como `funções`, `métodos` e até `classes inteiras`, assim facilita seu trabalho de visualização inclusive se você trabalha com arquivos de `log`.

![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/i/p8d60aa48lj8x33pdeu1.gif)
Saiba mais acesse o site da extensão: [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

## Eslint

O que dizer esta extensão ela é incrível, quando bem configurada está extensão atua epicamente buscando erros comuns no código, de tal modo, adicionando aquele ponto e virgula no final de linha `;`, ou aquela tipagem de variável que esquecemos com frequência, o `ESlint` é como um `x9` ,não te deixa esconder nada.

O `ESlint` pode ser utilizado como formatador, também,  em outra postagem  irei exemplificar melhor sobre como configurar essa extensão incrível.



Saiba mais, acesse o site da extensão: [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Prettier Code Formatter

Esta extensão  como o próprio nome já diz, faz a formatação do código, deixa ele mais harmônico. Inclusive quando configurado para trabalhar com o `ESlint`, você tem duas ferramentas `poderosíssimas` na mão.

Saiba mais, acesse o site da extensão: [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## GitLens

Essa extensão poderosa proporciona uma experiência completa e visual, é épica. Ela auxilia você que trabalha com versionamento de código, entre suas funcionalidades existem: histórico das alterações recentes, auditoria de código, pesquisa.

![Git Lens - demo ](https://dev-to-uploads.s3.amazonaws.com/i/kwsjqzeacle81g95h1p3.gif)


Saiba mais, acesse o site da extensão: [GitLens - Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## VSCode HackerTyper

Extensão muito divertida, gravação de macros no seu código, depois de gravadas as, `macros` são entre suas funcionalidades existentes estão: reprodução de macros, velocidade de reprodução, inserção de breakpoints.
![HackerTyper](https://dev-to-uploads.s3.amazonaws.com/i/dqtgjny3yt5h50ockxey.gif)

Saiba mais, acesse o site da extensão: [VSCode Hacker Typer](https://marketplace.visualstudio.com/items?itemName=jevakallio.vscode-hacker-typer)

## Docker

Está extensão facilita muito, a criação e gerenciamento de contêineres, pois te apresenta as informações de forma muito intuitiva no `visual studio code`.

![Docker-demo](https://dev-to-uploads.s3.amazonaws.com/i/z5sqqe40cdp4k1qjjgba.gif)

Saiba mais, acesse o site da extensão: [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)

## Live Server

Isso mesmo você não leu errado `Live Server`, é uma extensão que basicamente cria um servidor ao vivo `fake`, para rodar sua aplicação (site), sem a necessidade de se comunicar com um `servidor (backend)`.

![Live Server](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)

Saiba mais, acesse o site da extensão: [ Clique aqui Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

## VSCODE POWER MODE!!!

Por último, porém não menos importante nas imagens acima, você deve ter visto, algumas `chamas(flames)` no momento de digitação do código, este efeito é possível com a extensão `VSCODE POWER MODE`, com ela a dopamina vai longe.


Saiba Mais, acesse o site da extensão: [Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)


<figcaption>Cover Photo by Dlanor S on Unsplash</figcaption>