Extensões para VSCode
Tags: extensions, vscode, productivity
Published: 2021-11-03 20:50:20

---
title: Extensões para VSCode
published: true
description: Aqui está uma seleção de extensões para VSCode para te ajudar no dia a dia e trazer mais produtividade. 
tags: #extensions #vscode #productivity
// cover_image: https://direct_url_to_image.jpg
---

Olá dev! Aqui está uma seleção de extensões para VSCode para te ajudar no dia a dia e trazer mais produtividade. 

# Medir produtividade

Antes de melhorarmos a nossa produtividade, primeiro precisamos ter dados de como ela está. Para obter esses dados, eu conheço essas três extensões: 

### [Wakatime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

Assim como a Code Time, essa extensão ajuda a mediar a sua atividade enquanto está desenvolvendo no dia dia, o quanto esta trabalhando em qual linguagem e várias outras informações.

### [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)

Além de ser uma pata de animal que com certeza á bem fofinha rsrs, com ele você tem um dashboard de como você trabalha no dia a dia, quais horários está mais produtivo, entre várias outras informações.

### [100 days of code](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-100-days-of-code)

Os mesmos criadores do Code Time criaram essa extensão para ajudar você a alcançar seus desafios, e ganhando botons a cada conquista.

# Conjunto de atalhos ( Snippets )

Algo que me deixa bem produtiva no dia a dia, é utilizar alguns atalhos para construção de códigos padrões, por exemplo, criar componentes React, arquivos de estilização, arquivo de configuração de api.

Para desenvolvimento com React e React Native, tem essas 2 extensões da Rocketseat:

**Rocketseat [ReactJS](https://marketplace.visualstudio.com/items?itemName=rocketseat.RocketseatReactJS)**

**Rocketseat [React Native](https://marketplace.visualstudio.com/items?itemName=rocketseat.RocketseatReactNative)**


Os atalhos que eu mais uso são:

- rnfc  → React Native Functional Componente: que cria a estrutura de um componente React Native
- rfc → React  Functional Componente: que cria a estrutura de um componente React
- styled-react → Styled React: que cria uma estrutura inicial com styled componentes
- api → Cria uma estrutura de configuração Axios.

Na página de cada extensão tem uma lista de comandos possíveis.

# Facilitadores

### [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

Quando abrimos um `.svg` no VSCode ele nos mostra o seu código, mas na maioria das vezes queremos ver a imagem em si, e é isso que essa extensão faz.


### [ToDo Three](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Essa é uma extensão que eu gosto de usar bastante, para adicionar comentários no meu código de coisas que ainda tenho que implementar e não esquecer nenhuma regra. Apenas adicionar um comentário como `// TODO:` e `// FIXME:`, a extensão coloca um destaque, que o torna mais visível e mais difícil de esquecer quando estiver analisando as suas alterações antes de enviar. Além disso ela também cria uma árvore, com os arquivos onde você adicionou.

![Image](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)


### [Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)

Com a atualização do JS, passamos a poder concatenar string facilmente com o [Template String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), o que pode ser chato no dia a dia, ficar mudando de aspas ( ' ou " ) para acentos graves (` `), e essa extensão vem para nos ajudar nisso, assim que colocamos `${}`, dentro de aspas elas mudam para acentos graves.

![Image](https://raw.githubusercontent.com/meganrogge/template-string-converter/master/src/images/demo.gif)

### [Brackets Pair](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

Sabem quando esquecemos de abrir ou fechar parênteses ou chaves, e não sabemos onde colocar?! Essa extensão coloca uma cor diferente para cada conjunto de `Abre e Fecha`, facilitando encontrarmos onde está faltando.

### [Blockman](https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman)

Acredito que essa extensão tenha o mesmo objetivo da `Brackets Pair`, mas com uma forma diferente de visualização. Com ela é criado uma borda envolta de cada conjunto de `Abre e Fecha`, facilitando um pouco mais descobrir onde está faltando abrir ou fechar algum parênteses ou chaves e também facilitando a visualização de cada bloco

![Image](https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/main-demo---c2-apng.png)

### [Auto Rename](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

No dia a dia do desenvolvimento web modificamos varias tags e pode ser repetitivo alterar o nome ta tag de abertura e fechamento, e é nisso que essa extensão nos ajuda, ao modificar alguma tag, automaticamente a outra é alterada também.

![Image](https://github.com/formulahendry/vscode-auto-rename-tag/raw/HEAD/images/usage.gif)

### [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

Na maioria das vezes ao desenvolver sites e aplicativos usamos cores `hexadecimais` ou `rgb`, o que dificulta reconhecer qual é a cor. Com essa extensão é criado um destaque em cima do código da cor com a cor

### [Live share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

Está trabalhado com alguém em um mesmo bug, ou criando algo de forma colaborativa, essa extensão vai permitir que ambos compartilharem um mesmo VSCode. 

# Embelezamento

Como passamos o dia olhando para o VSCode, podemos deixar ele mais com a nossa cara, aqui eu separei algumas extensões legais.

[VSCodeThemes - Preview Visual Studio Code Themes.](https://vscodethemes.com)

[Omni Theme - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=rocketseat.theme-omni)

[Ballerini Theme - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=BalleriniServer.ballerini-theme)

[Material Theme Icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)

[Pink-Cat-Boo Theme - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ftsamoyed.theme-pink-cat-boo)

[Nyan Cat - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=zhengrenzhe.nyan-cat)

[Power Mode - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

[Clippy - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=fleshywaffles.vs-code-clippy)



E você, quais extensões você mais utiliza? 
Deixe aqui nos comentários e até mais. 😄