Meu TOP 10 (+1) Extensões do VsCode!

Olá, pessoal!

Estou passando para compartilhar meu TOP 10(+1) Extensões do VSCode. Existem diversos vídeos ou postagens sobre as melhores extensões na internet, com isso, resolvi pegar o que encontrei de melhor nesses vídeos e passar para vocês.

São as extensões que eu gosto de utilizar para me tornar mais produtivo e me deixar mais tranquilo na hora de codificar, se voltando principalmente ao desenvolvimento web. Vamos lá!

1 - Community Material Theme

Existem milhares de temas por ai, mas gosto de utilizar o Material pela quantidade de opções normais e em alto contraste. Gosto da diferença de cores entre meu editor de código e meu terminal / explorador de arquivos, então é uma boa escolha para mim.

Caso você não goste das opções, posso indicar o tema Dracula que é sempre sucesso!

2 - Error Lens

Esse aqui tem a proposta bem simples: te avisar o que (provavelmente) está errado e onde.

Por exemplo:

Você vê um erro sendo informado pela cor vermelha em baixo do texto, mas pode não saber exatamente do que se trata (mesmo que esse seja algo simples, fica mais para exemplo mesmo). Após instalar a extensão, esse será o retorno:

Além de explicar o possível erro, se torna bem mais visual de identificar.

3 - Indent-Raibow

É simples: deixe seu código com uma indentação certa e ainda fica bonito.

Um exemplo com mais informação:

O vermelho mostra uma quebra de indentação.

4 - Duplicate selection or line

Como o nome já diz, você poderá duplicar uma seleção ou linha. Esse acaba sendo mais rápido que copiar e colar, já que é só usar o Ctrl+D. É uma função de outras IDEs que eu senti falta.

5 - Code Spell Checker

Ele vai checar sua escrita. Quando estamos começando a estudar ou pegando o jeito com o inglês, é normal errar algumas palavras. Isso pode acabar quebrando alguma coisa, tirando as vezes que esbaramos em alguma tecla e aquela opção deixa de funcionar.

Com isso, essa extensão irá te avisar o que está errado:

É possível instalar o pacote para escrita em Português também, algo que recomendo, caso você trabalhe com muito texto.

6 - Live Server

Conhecido de quase todo mundo que já estudou HTML e CSS, o Live Server irá abrir seu arquivo e atualizar as alterações após salvá-lo, sem a necessidade de atualizar o arquivo no navegador.

7 - Prettier - Code Formatter

Como o nome diz, é uma extensão para formatar seu código de acordo com certos padrões. Para utilizá-lo, pressione: Ctrl + Shitf + i. 

8 - Material Icon Theme

Bons ícones para uma melhor identificação.

Segue o exemplo de como os arquivos ficam:

Caso queira testar, o vscode-icons também é uma opção legal, tem alguns ícones mais específicos, mas prefiro esse aqui.

9 - Colorize

Como gosto bastante de mexer com CSS, ter uma visibilidade maior da cor é interessante para mim. Com a extensão, sempre que uma cor for utilizada, ela ficará assim:

10 - Favorites

Como a descrição diz, marque o que quiser como favorito e tenha um acesso rápido. Ao instalar a extensão, você terá um espaço com as opções que mais utiliza.

Para um projeto pequeno talvez não seja tão útil, mas quando se tem que trabalhar com várias pastas e arquivos, ficar navegando por elas pode levar tempo, ai é só favoritar. A extensão também adiciona um ícone no menu lateral.

11 (Extra) - VS Code Pets

Por se tratar de um extra, é apenas para customização. Adicione bichinhos ao Explorer do seu VSCode.

Você vai ter várias opções de animais e 3 temas para escolher e deixar lá!

É isso pessoal, espero que gostem e possam pegar algumas extensões úteis. Se sentiu que faltou alguma importante, adiciona ai nos comentários. Vlw!