5 Extensões essenciais para desenvolvedores Frontend no VS Code
Eis a maior cartada da Microsoft nos últimos anos: Visual Studio Code, ou VS Code pros mais íntimos. Este é o editor de textos ricos da Microsoft, open source, e extremamente extensível. Quando digo extremamente, é literalmente mesmo.
Por ter sido feito utilizando o Electron, uma tecnologia onde utilizamos Javascript, HTML e CSS para construir aplicações desktop, ele consegue ser muito flexível e possibilita aos usuários a criar facilmente extensões.
Hoje trago 5 extensões que julgo ser essenciais no desenvolvimento de qualquer aplicação frontend.
Lembrando que vão listarei extensões visuais, como as incríveis Bracket Pair Colorizer 2, focarei em extensões que de alguma forma ajudem diretamente no fluxo de desenvolvimento.
1. Live Server
Essa extensão ajuda bastante aos devs que precisam escrever num HTML, sem utilizar de frameworks Javascript com funções que criam servidores locais de desenvolvimento. Ela cria exatamente isso: um servidor local para servir seus arquivos e com isso as mudanças destes. Adicione elementos ou mude cores do seu HTML e acesse o localhost para acompanhar as mudanças.
2. Live Share
Com o Live Share você poderá criar sessões remotas colaborativas com outros desenvolvedores para desenvolver num mesmo workspace / projeto, possibilitando assim um pair coding remoto e melhorado, onde os devs trabalham juntos, simultaneamente.
Não limita-se a apenas dois desenvolvedores, e você poderá compartilhar sessões de debug, instancias de terminais apps rodando localmente na máquina do usuário host , entre outros, tudo isso interagindo com os outros usuários, vendo em tempo real a posição do mouse deles.
3. Git Lens
Essa é uma das minhas favoritas. O Git Lens é o seu aliado para trabalhar com versionamento Git. Ele melhora as habilidades nativas do VS Code para acessar informações sobre versionamento de um projeto, como visualizar autoria de códigos, traz a tona o famoso Git Blame, traz funções comparativas, entre outros. Podemos até mesmo ver linha por linha de um arquivo informações sobre o commit que originou o código, o autor, data, entre outros. Um verdadeiro must-have no seu leque de extensões.
4. Path Intellisense
Simples e direta ao ponto, essa extensão é uma verdadeira mão na roda para lidar com o autocomplete de caminhos de arquivos, pois convenhamos, é um saco acessar arquivos muitas vezes tentando lembrar exatamente onde que o arquivo está.
5. Debugger for Chrome
Por fim mas não menos importante temos essa extensão que auxilia no processo de debug de aplicações no próprio VS Code. Funciona de forma simples: marque seus breakpoints, aperte o novo botão de play que ele adiciona à interface do VS Code ou aperte F5 e então uma nova janeja do Chrome é aberta, com um porém: você agora terá acesso ao debug console no VS Code para debugar à vontade cada trecho do seu app.
Considerações finais
O VS Code é um monstro no quesito customização: podemos alterar cada pedacinho do editor, deixando-o a nossa cara. Abaixo segue uma lista de mensões honrosas de mais alguns que não vou discorrer muito mas que valem muito dar uma olhada. Até o próximo post!