VS Code - Melhores extensões para Front End - Parte 2 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 08 Horas 31 Min 31 Seg Tempo restante da oferta: 08 31 31 [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 2 [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) # VS Code - Melhores extensões 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. [ 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! No post anterior vimos algumas [extensões para o VS Code](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1/ "extensões para o VS Code"). Aqui nesse post nós vamos continuar com a nossa lista de melhores extensões para [Front-End](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end "Front-End"). ## 1 - Visual Studio IntelliCode ![VS Code - IntelliCode](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/vs-code-intellicode.gif) Uma das características de um bom editor de código é nos ajudar a escrever nossos códigos mais rapidamente, sugerindo opções para completar automaticamente o que estamos escrevendo. Porém, o VS Code foi criado para ser uma ferramenta simples e leve. Ou seja, suas sugestões padrão não são tão inteligentes. Com o intuito de melhorar essas sugestões, a própria Microsoft criou a extensão `Visual Studio IntelliCode`. A saber, essa extensão utiliza Inteligência Artificial para trazer as melhores sugestões para você. ## 2 - Surround ![VS Code - Surround](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/vs-code-surround.gif) É provável que já tenha acontecido de você escrever um código e depois pensar: “este trecho deveria ir dentro de um IF/FOR/TRY/Função/etc”. Certamente muitos iriam recortar o trecho, criar a estrutura e colar o código lá dentro. O `Surround` foi criado a fim de facilitar esses casos. Com ele podemos selecionar um trecho de código e mandar criar uma estrutura em volta como: If, For, While, Try/Catch, etc. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## 3 - CodeSnap ![VS Code - CodeSnap](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/vs-code-codesnap.png) O CodeSnap não é uma ferramenta que ajuda no desenvolvimento. Ela simplesmente gera uma imagem bonita do seu código, como na imagem acima. Isso é muito útil para quem costuma fazer perguntas em redes sociais ou para criadores de conteúdo, quando querem mostrar um trecho de código. ## 4 - Prettier ![Prettier Logo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/prettier-logo.png) O Prettier é uma ferramenta que formata automaticamente nosso código assim que salvamos o arquivo. Isso é ótimo para manter um padrão de formatação. Além disso, pode ser que você tenha escrito um código que não ficou bem formatado. Ao invés de gastar tempo arrumando, basta salvar o arquivo e a formatação será feita automaticamente. ## 5 - ESLint ![ESLint Logo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/eslint-logo.png) Assim como o Prettier, o ESLint também é uma ferramenta que auxilia na escrita do código. O foco do ESLint é definir determinadas regras que devem ser seguidas de tal forma que ajudam a evitar certos problemas. Dessa maneira, podemos evitar possíveis bugs. ## 6 - EditorConfig ![EditorConfig Logo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/editor-config-logo.png) O objetivo do `EditorConfig` é manter um padrão de formatação de arquivos entre diferentes ferramentas. Um exemplo bem simples é o que você costuma usar para identar seu código: 3 espaços, 4 espaços, tab, etc. Visto que diferentes editores de código possuem diferentes configurações padrão, e cada pessoa possui sua preferência, ter uma ferramenta que padronize isso num projeto ajuda a manter um código mais uniforme. [ ![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) ## 7 - Stylelint ![Stylelint Logo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/stylelint-logo.png) O objetivo do `Stylelint` é bem parecido com o do `ESLint`. Porém, ele foca no CSS. Além de ajudar a definir regras no CSS, também é possível definir certas regras para se seguir boas práticas. Um bom exemplo é sempre declarar uma classe primeiro e só depois as classes filhas. Caso você declare seletores de níveis muito profundos, poderá ter problemas. O Stylelint também pode servir para te impedir de fazer isso. Uma das minhas funcionalidades favoritas do Stylelint é definir quais são os navegadores que quero dar suporte. Ele automaticamente me avisa sobre alguma propriedade que meus navegadores alvo ainda não suportam totalmente. Isso já poupa muito tempo, pois evita que a gente descubra que algo está quebrando em um navegador específico depois de já ter várias coisas prontas. - [ #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 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-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. 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 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/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 **08h 31min 31s** - 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