<Blog />

Extensões para VSCode

03/11/2021

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

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.

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

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

Rocketseat React Native

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

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

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.

Template String Converter

Com a atualização do JS, passamos a poder concatenar string facilmente com o Template String, o que pode ser chato no dia a dia, ficar mudando de aspas para acentos graves, e essa extensão vem para nos ajudar nisso, assim que colocamos ${}, dentro de aspas elas mudam para acentos graves.

Brackets Pair

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

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