VS Code - O que é e por que você deve usar? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 52 Min 03 Seg Tempo restante da oferta: 13 52 03 [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 - O que é e por que você deve usar? [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) # VS Code - O que é e por que você 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. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos.png) Olá, Web Developers! É provável que você já tenha ouvido falar do `VS Code`. Vamos conhecê-lo melhor e certamente entenderá o motivo de programadores no mundo todo usá-lo. ## O que é VS Code? O Visual Studio Code (VS Code) é um editor de código de código aberto desenvolvido pela Microsoft. A saber, ele está disponível para Windows, Mac e Linux. É criado com [Electron](https://www.treinaweb.com.br/blog/o-que-e-electron/ "Electron"), ferramenta criada pelo [GitHub](https://www.treinaweb.com.br/blog/git-e-github-quais-as-diferencas "GitHub") que permite a criação de softwares Desktop com [HTML, CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML, CSS") e [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript "JavaScript"). ## Não confunda com o Visual Studio O [Visual Studio](https://www.treinaweb.com.br/blog/principais-ides-para-desenvolvimento-c/ "Visual Studio") é uma [IDE](https://www.treinaweb.com.br/blog/o-que-e-uma-ide-ambiente-de-desenvolvimento-integrado/ "IDE") desenvolvida pela Microsoft, dedicada ao [.NET Framework](https://www.treinaweb.com.br/blog/processo-de-execucao-de-um-codigo-no-net-framework/ ".NET Framework") e a linguagens como C, C++, [C#](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-c-sharp/ "C#") e [F#](https://www.treinaweb.com.br/blog/o-que-e-f-f-sharp/ "F#"). Por ser uma solução completa, é uma ferramenta bem mais pesada. Já o `VS Code` é um Editor de Código, o qual possui as funcionalidades mais simples como: - edição de código com suporte a várias linguagens de programação; - terminal de comandos integrado; - controle de versão; Por isso é uma ferramenta bem mais leve. Mas não é apenas isso! [ ![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) ## Uma poderosa ferramenta com diversas funcionalidades O VS Code é capaz de fazer muitas coisas que nos ajudam a trabalhar melhor. A princípio ele é uma ferramenta muito simples, mas ele possui uma loja de extensões imensa, e que continua crescendo. Ou seja, com essa enorme coleção de extensões, podemos adicionar diversas funcionalidades ao VS Code de forma bem simples. Dessa maneira, ele pode facilmente ser comparado a grandes IDEs pagas. Qualquer um pode criar uma extensão e publicar na loja. Desse modo, sempre há novas ferramentas que podem ser interessantes para alguém. Já fizemos aqui no blog uma série de posts indicando as [melhores extensões de VS Code](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1/ "melhores extensões de VS Code") para desenvolvedores [Front-End](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end/ "Front-End"). ## VS Code é customizável Certamente é mais agradável usar uma ferramenta que atenda ao seu gosto e necessidades. As necessidades já são supridas pelo enorme número de extensões disponíveis. E o gosto também é atendido, já que o VS Code é bem customizável. Você pode alterar a aparência dele manualmente ou baixar temas na loja de extensões. Além disso, cada funcionalidade (tanto do VS Code quanto das extensões) podem ter seu comportamento alterado na tela de configurações, que é bem simples e intuitiva. ![VS Code - Configurações](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/vs-code-configuracoes.png) Se algo na tela não te agrada, você pode esconder. Acima de tudo, também podemos fazer login no VS Code para manter nossas configurações salvas na nuvem. Dessa forma podemos manter nossas preferências e extensões sincronizadas em computadores diferentes. ## Extra: Dica de ouro de produtividade no VS Code O VS Code possui vários atalhos de teclado que facilitam o nosso trabalho. A saber, esses atalhos podem ser customizados. Além disso, você pode atribuir teclas de atalho para funcionalidades existentes mas que não possuem um atalho definido. Como programadores, quanto mais tempo mantermos as mãos no teclado, melhor. Afinal, pressionar algumas teclas é bem mais rápido do que ir com a mão até o mouse e sair clicando e procurando o que você precisa. Mas você não precisa saber todos os atalhos logo no começo! Pressione `Ctrl + Shift + P` (`Cmd + Shift + P` no Mac) ou `F1`. Isso vai abrir um campo onde você pode procurar pelo comando que quer realizar. Além de permitir executar rapidamente QUALQUER coisa (desde o simples copiar e colar até funções mais complexas), caso essa funcionalidade tenha um atalho, este será exibido. Assim, você poderá executar qualquer comando sem saber seu atalho e vai aprendendo eles aos poucos. ![VS Code - Paleta de Comandos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/vs-code-paleta-de-comandos.png) [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## Por que usar o VS Code? - Ferramenta simples; - Código aberto; - Arquitetura bem planejada; - Possibilidade de customização; - Várias funcionalidades e atalhos; - Rica loja de extensões; - Facilidade em criar e publicar extensões (escritas em JavaScript ou TypeScript); Essas são algumas das razões que tornou o VS Code no editor de código mais usado e querido pelos programadores das mais diversas linguagens de programação. Não deixe de conferir nosso guia de [instalação do VS Code](https://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos/ "instalação do VS Code") para Windows, Linux e Mac. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/sessao-mentoria.jpg) ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?forma=cartao) - [ #VsCode ](https://www.treinaweb.com.br/blog/tag/vscode) - [ #VS Code ](https://www.treinaweb.com.br/blog/tag/vs-code) 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/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/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 - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no MacOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no MacOS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no Linux ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no Linux Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/configurando-ambiente-de-desenvolvimento-spring-boot-no-windows-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no Windows ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-windows) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no Windows 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 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/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/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/2020/12/npm-voce-sabe-o-que-da-para-fazer-com-ele-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 6 anos atrás ## [ NPM - Você sabe o que dá para fazer com ele? ](https://www.treinaweb.com.br/blog/npm-voce-sabe-o-que-da-para-fazer-com-ele) Veja as várias possibilidades do que podemos fazer com o NPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. 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 ## 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 **13h 52min 03s** - 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