Extensões do VS Code

[Letícia Garcez]

A extensão Turbo Console Log é ótima pra quem debuga o código imprimindo coisas na tela (como eu hehe). Utilizando um atalho de teclado, essa extensão insere um console.log indicando valores de variáveis, parâmetros, etc.
Clique aqui para acessar.

 

[Letícia Garcez]

Para quem tem que trabalhar com múltiplas instâncias do VS Code ao mesmo tempo, pode dar uma olhada na extensão Peacock clicando aqui.
Essa extensão permite que você mude a cor das instâncias da sua IDE, o que facilita muito a identificação de qual janela da IDE está trabalhando com qual projeto.

 

[Marlliton]

Para você que não está se sentindo tão produtivo e precisa de mais foco trago a extensão pomodoro para o vscode que você pode conferir aqui. As vezes ela me ajuda bastante.

 

[Letícia Garcez]

Gostei muito dessa extensão: Live Preview
Ela permite que você abra as páginas web que está desenvolvendo diretamente pela IDE. Isso evita que você tenha que ficar trocando de janela para visualizar o seu projeto e editá-lo.

 

[Lorenzo]

Agora que eu voltei a usar VSCode baixei uma extensão pra modificar os ícones no projeto: VSCode icons

 

[Marlliton]

Se você se perde na indentação do seu código, a extensão indent-rainbow veio para te ajudar colorindo cada nível de indentação do seu código. Deixando-o assim mais fácil de identificar cada nível do código.

 

[Letícia Garcez]

A extensão CodeMetris calcula a complexidade de arquivos Javascript, Lua e Typescript.

 

[Lorenzo]

Pra quem usa o VSCode pra Java e usa o Springboot, essa extensão inclui o Spring Initializer direto na IDE e mais umas coisas: https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack

 

[Letícia Garcez]

A extensão colorize colore automaticamente códigos de cores em arquivos como o CSS (tanto em forma rba quando em hexadecimal), assim você consegue ver com facilidade quais cores estão sendo utilizadas na sua aplicação.

 

[Lorenzo]

A extensão colorize colore automaticamente códigos de cores em arquivos como o CSS (tanto em forma rba quando em hexadecimal), assim você consegue ver com facilidade quais cores estão sendo utilizadas na sua aplicação.

Legal! Vou testar hj

 

[Marlliton]

Se você gosta de compartilhar código e usa ferramentas como o carbon para isso, a extensão que trago hoje resolve seus problemas.
Snipped é uma extensão que tira belas screenshots do seu código e te disponibiliza para download dentro do seu vscode.

 

[Letícia Garcez]

Se você gosta de compartilhar código e usa ferramentas como o carbon para isso, a extensão que trago hoje resolve seus problemas.
Snipped é uma extensão que tira belas screenshots do seu código e te disponibiliza para download dentro do seu vscode.

View attachment 586

Muito mais prático do que estar copiando o código para outros lugares

 

[Lorenzo]

Eu sei que tem uma galera que usa tailwind, acho que esse cheatsheet pode ser útil: https://flowbite.com/tools/tailwind-cheat-sheet/

 

[Marlliton]

Eu sei que tem uma galera que usa tailwind, acho que esse cheatsheet pode ser útil: https://flowbite.com/tools/tailwind-cheat-sheet/

Ainda nessa pegada do tailwind css, existe uma extensão para vscode que ajuda bastante com o autocomplete das classes. É uma opção interessante para quem usa o tailwind!
ext install bradlc.vscode-tailwindcss

 

[Letícia Garcez]

Ainda nessa pegada do tailwind css, existe uma extensão para vscode que ajuda bastante com o autocomplete das classes. É uma opção interessante para quem usa o tailwind!
ext install bradlc.vscode-tailwindcss
View attachment 589

Nossa, essa extensão teria me poupado umas boas horas catando qual a classe que eu precisava pro projetinho que eu estava desenvolvendo essa semana hehe

 

[Letícia Garcez]

A extensão Highlight Matching Tag marca as tags correspondentes de maneira que fica mais fácil visualizar o que está dentro de qual tag, especialmente em aplicações mais complexas.

 

[Marlliton]

Uma extensão que pode ajudar na produtividade é a Visual Studio IntelliCode, essa extensão te ajuda com autocomplete de trechos de código, a extensão usa de inteligência artificial para fazer as sugestões.
ext install VisualStudioExptTeam.vscodeintellicode

 

[Letícia Garcez]

Os atalhos do Visual Studio Code são realmente maravilhosos, porém pessoas que estão acostumadas a utilizar os atalhos de uma outra IDE podem ter alguns problemas para de adaptar aos novos atalhos. Caso você seja uma pessoa que desenvolve no Netbeans ou Eclipse, saiba que você pode adicionar uma extensão que adiciona no Visual Studio Code os atalhos que você já está acostumado a usar em outra IDE:
Eclipse keymap
Netbeans keymap

 

[Letícia Garcez]

A extensão Javascript Booster adiciona algumas funcionalidades extras na IDE permitindo que você consiga performar algumas tarefas no código de maneira simples e rápida.

 

[Marlliton]

A extensão Import Cost permite que você veja o tamanho de um módulo importado no JavaScript. Ela ajuda você a avaliar se importar uma biblioteca inteira é realmente necessário ou apenas um utilitário específico necessário.
ext install wix.vscode-import-cost