VS Code - Melhores extensões para Front-End - Parte 1 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 33 Min 43 Seg Tempo restante da oferta: 02 33 43 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) VS Code - Melhores extensões para Front-End - Parte 1 [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/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 ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end.png) 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-previa.gif) Já tivemos aqui um post bem completo sobre o [Tw Dev Server](https://www.treinaweb.com.br/blog/tw-dev-server-como-ele-pode-te-ajudar-a-estudar-programacao "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](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end "back-end") com [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api "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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-rest-client.gif) O Rest Client é uma extensão que permite executar requisições diretamente do VS Code a fim de testar [APIs](https://www.treinaweb.com.br/blog/rest-nao-e-simplesmente-retornar-json-indo-alem-com-apis-rest/ "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](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ## 3 - Auto Rename Tag ![VS Code - Auto Rename Tag](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-auto-rename-tag.gif) 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](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-color-highlight.png) 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-indent-rainbow.png) A extensão Indent Rainbow adiciona cores à sua indentação, a fim de facilitar a identificação dos blocos de código. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/sessao-mentoria.jpg) ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?forma=cartao) ## 6 - Rainbow Brackets ![VS Code - Rainbow Brackets](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-rainbow-brackets.png) 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 ![VS Code - Styled Components](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/vs-code-styled-components.png) 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. - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #plugins ](https://www.treinaweb.com.br/blog/tag/plugins) - [ #VsCode ](https://www.treinaweb.com.br/blog/tag/vscode) - [ #VS Code ](https://www.treinaweb.com.br/blog/tag/vs-code) - [ #extensões ](https://www.treinaweb.com.br/blog/tag/extensoes) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## 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. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 3 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-3) Conheça mais uma lista de extensões do VS Code que ajudarão a melhorar a sua produtividade e facilitar o seu trabalho. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 2 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-2) Veja mais uma lista com as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - O que é e por que você deve usar? ](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar) O VS Code é um dos editores de código mais utilizados no mundo. Conheça melhor essa ferramenta e entenda o motivo de sua popularidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/dicionario-programador-iniciante-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ Dicionário básico para quem está iniciando na programação ](https://www.treinaweb.com.br/blog/dicionario-basico-para-quem-esta-iniciando-na-programacao) Você está iniciando na programação e está perdido nos termos e siglas que você lê ou ouve falar por aí? Confira neste artigo um guia rápido para você começar a se familiarizar com esse universo da TI. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Instalação do VS Code no Windows, Linux e MacOS ](https://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos) Neste artigo veremos o que é o VS Code e como podemos realizar a sua instalação nos sistemas operacionais Windows, Linux e MacOS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02163514/vscode-remote-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Desenvolvendo seus projetos com o VS Code Remote Development ](https://www.treinaweb.com.br/blog/desenvolvendo-seus-projetos-com-o-vs-code-remote-development) Preparar nosso ambiente local de desenvolvimento pode ser uma tarefa bastante demorada. Pode levar horas, ou até dias para configurar todo o ambiente. Uma alternativa é utilizar um ambiente remoto para o desenvolvimento, porém sua experiência pode não ser a mesma que ao trabalhar em ambiente local. Isso tudo pode mudar com o VS Code Remote Development. Vamos entender nesse artigo como ele funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 6 anos atrás ## [ Como configurar o VSCode para debug de código PHP ](https://www.treinaweb.com.br/blog/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php) Aprenda como configurar o Visual Studio Code para trabalhar com debug de código PHP. Veremos como instalar e ativar a extensão Xdebug na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media Query. Colocando em prática seu uso. ](https://www.treinaweb.com.br/blog/media-query-colocando-em-pratica-seu-uso) Neste artigo, nós iremos aprender sobre o uso de Media Query no CSS3, na prática aprendendo como utilizar na criação de cards responsivos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/CONFIGURAÇÃO-AMBIENTE-MACOS-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no macOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-macos) Veja neste artigo como configurar seu ambiente de desenvolvimento macOS para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/configurando-ambiente-de-desenvolvimento-python-no-linux-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no Linux ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-linux) Veja neste artigo como configurar seu ambiente de desenvolvimento linux para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/configurando-ambiente-de-desenvolvimento-python-no-windows-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no Windows ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-windows) Veja neste artigo como configurar seu ambiente de desenvolvimento Windows para desenvolvimento rest com Django. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **02h 33min 43s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58