Ferramentas VS Code – Melhores extensões para Front-End – Parte 1

Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos.

Akira Hanashiro 24 de março de 2021

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

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

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

VS Code - 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.

HTML5 + CSS3 - Fundamentos
Curso de HTML5 + CSS3 - Fundamentos
CONHEÇA O CURSO

3 – Auto Rename Tag

VS Code - 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

VS Code - 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

VS Code - 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

VS Code - 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.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

7 – vscode-styled-components

VS Code - 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.

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Akira Hanashiro
    Akira Hanashiro

    Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

    Posts desse Autor

Artigos relacionados