DEV Community 👩‍💻👨‍💻

NuryCaroline for Dev Girls Mentor

Posted on

Extensões para VSCode

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.

Code Time

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.

Image

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 ( ' 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

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

Image

Auto Rename

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

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

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.

Omni Theme - Visual Studio Marketplace

Ballerini Theme - Visual Studio Marketplace

Material Theme Icons - Visual Studio Marketplace

Pink-Cat-Boo Theme - Visual Studio Marketplace

Nyan Cat - Visual Studio Marketplace

Power Mode - Visual Studio Marketplace

Clippy - Visual Studio Marketplace

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈