Olá Web Developers! O VS Code está sendo cada vez mais usado no mundo do desenvolvimento. Porém, o que faz dele uma ótima ferramenta é a grande quantidade de extensões que podemos instalar para facilitar nosso trabalho. Aqui veremos as melhores extensões para trabalhar com Front-End.
1 - Tw Dev Server
Já tivemos aqui um post bem completo sobre o Tw Dev Server e como ele pode te ajudar em testes e estudos.
Ele é uma ferramenta que serve como um servidor de arquivos estáticos com Live Reload e BrowserSync, ou seja, o navegador atualiza assim que você alterar um arquivo e o que você fizer em um navegador vai refletir em outros navegadores. Desse modo será muito mais simples testar diferentes navegadores e diferentes resoluções.
Além disso, o Tw Dev Server também funciona como um simulador de back-end com API e banco de dados. Portanto, caso você esteja estudando ou testando algo que precisaria de uma API e banco de dados, basta ativar o Tw Dev Server e você terá tudo pronto!
A saber, ele está disponível não só como extensão do VS Code, mas também como pacote do NPM.
2 - REST Client
O Rest Client é uma extensão que permite executar requisições diretamente do VS Code a fim de testar APIs. Ele é bem simples de utilizar: basta abrir um arquivo e escrever o comando de requisição. O resultado aparecerá ao lado.
Curso
HTML5 + CSS3 - Fundamentos
Conhecer o curso
3 - Auto Rename Tag
Quando estamos trabalhando com HTML e precisamos renomear uma Tag, basta renomear uma delas. O VS Code já faz isso para nós.
Porém, quando estamos usando React e estamos escrevendo JSX, o VS Code ainda não renomeia ambas as tags.
A fim de economizar tempo, basta instalar o Auto Rename Tag. Ele funciona perfeitamente com React.
4 - Color Highlight
O Color Highlight é uma ótima extensão para front-ends. Ela identifica quando você escreve o código de uma cor e a exibe no editor. Assim fica fácil de saber de qual cor se trata cada código.
5 - Indent-rainbow
A extensão Indent Rainbow adiciona cores à sua indentação, a fim de facilitar a identificação dos blocos de código.
6 - Rainbow Brackets
Assim como o Indent-Rainbow, o Rainbow Brackets também adiciona cores ao seu editor. Mas dessa vez é nos parênteses, chaves e colchetes.
Conforme podemos ver na imagem acima, cada par de parênteses possui uma cor. Assim fica fácil saber onde cada um começa e termina.
7 - vscode-styled-components
Algo que vem ganhando força são os Styled Components. Eles são componentes que utilizam Template String para estilizar o seu componente.
Como estamos escrevendo CSS dentro de uma String, ficaria difícil entender o código. Porém, com essa extensão, o VS Code irá entender a sintaxe do CSS dentro da String que você escrever.
