Como funciona o Visual Studio Code

  • 4 minutos

Agora que você está familiarizado com os principais recursos do Visual Studio Code, vamos ver como o Visual Studio Code funciona — quais recursos você obtém da caixa e o que você pode adicionar por meio do Extensions Marketplace.

O Visual Studio Code tem uma pegada leve. Pronto para uso, o Visual Studio Code fornece:

  • Interface do usuário com os recursos Editor, Explorer, Pesquisa, Depurador, Controle do código-fonte, Terminal e Extensões.
  • Suporte para várias linguagens, incluindo HTML, CSS, JavaScript e TypeScript.
  • Integração com Git para controle de código-fonte.
  • Integração com Node.js para execução e depuração de JavaScript.

Para alguns desenvolvedores, tudo o que é necessário é essa instalação inicial para começar seus projetos de aplicação web. Mas a maioria dos desenvolvedores deseja adicionar mais ferramentas e suporte para outros idiomas instalando extensões.

O que são extensões?

As extensões são pacotes de código que se conectam à interface do usuário do Visual Studio Code e adicionam suporte para recursos como:

  • Temas para alterar a aparência do esquema de cores da interface do usuário ou o estilo dos ícones de arquivo exibidos no Explorer.
  • Ferramentas de produtividade como Linters ou embelezadores de código.
  • Outras linguagens de programação, como C++, Python e centenas mais.
  • Suporte à depuração.

Você pode adicionar o que precisa ao Visual Studio Code rapidamente e deixar de fora o que não precisa.

Onde você obtém as extensões?

Você pode pesquisar, baixar e instalar extensões do Extensions Marketplace no Visual Studio Code, que se integra ao Visual Studio Marketplace. Por exemplo, você pode pesquisar por categorias como formatters, linguagens de programação ou temas. A captura de tela a seguir exibe algumas das muitas extensões disponíveis na categoria "formatters". Quando encontrar uma extensão que deseja adicionar, selecione Instalar.

Captura de tela do Visual Studio Code com o modo de exibição Extensions Marketplace exibido e a extensão Prettier no modo de exibição.

Quem construiu as extensões?

A Microsoft publica muitas extensões populares, incluindo C/C++, Python e Docker. Terceiros, como indivíduos ou empresas como a Red Hat, também criam e publicam extensões para o Marketplace. A maioria das extensões são gratuitas. No entanto, alguns provedores cobram uma taxa para baixar e usar suas extensões. O editor está listado abaixo do nome da extensão.

Captura de tela do Visual Studio Code com o modo de exibição Extensions Marketplace exibido e a extensão Python publicada pela Microsoft no modo de exibição.

Cenário

Agora, vamos aplicar esse conhecimento sobre como o Visual Studio Code funciona e ver como podemos configurar o Visual Studio Code em nosso cenário.

Lembre-se de que, na primeira parte do cenário, você deseja criar um site para um restaurante local. Para fazer isso, você decide criar um aplicativo Node.js.

Aqui está o que você faz:

  1. Primeiro, você baixa e instala a versão do Visual Studio Code apropriada para a plataforma do seu computador (Windows, macOS ou Linux).

  2. Em seguida, inicie o Visual Studio Code e, usando o terminal interno, instale um pacote de Node.js que ajuda a criar um aplicativo Node.js básico. O andaime cria vários arquivos necessários para executar um aplicativo Node.js.

  3. Usando o espaço de trabalho do editor, você edita esses arquivos. O IntelliSense integrado no editor ajuda-o a escrever e editar código, fornecendo sugestões para a conclusão do código. Esse recurso ajuda você a economizar tempo e garantir que a sintaxe do seu código esteja correta.

  4. À medida que você trabalha, você pode verificar seus arquivos no GitHub usando a visualização de controle do código-fonte integrada ou emitindo comandos Git a partir do terminal integrado. Ao integrar com o GitHub, você pode manter versões do seu trabalho que o ajudam a gerenciar melhor as alterações no seu código ao longo do tempo.

  5. Agora que você está se familiarizando com o Visual Studio Code, você decide instalar uma extensão do Visual Studio Code que pode aumentar sua produtividade, tornando o formato do seu código mais fácil de ler. Você procura e instala a extensão Prettier .

  6. Quando estiver pronto, você poderá testar seu aplicativo e ver sua aparência usando o depurador interno.

Depois de iniciar o site do restaurante, você pode continuar usando o Visual Studio Code para os outros projetos em que está trabalhando para o restaurante.

Para se preparar para desenvolver o aplicativo de inventário, baixe e instale a extensão Microsoft C/C++ e o conjunto de ferramentas do compilador Microsoft Visual C++ (MSVC). Esta configuração permite-lhe executar e depurar código C++ no seu computador.

Para configurar o Visual Studio Code para executar análises de dados para o restaurante, baixe e instale a extensão Python, que também contém a extensão Jupyter. Se você ainda não tem o Python instalado no seu computador, você também precisa baixar e instalar um interpretador Python.

Depois de instalar algumas extensões, um compilador e um interpretador, o Visual Studio Code é configurado para que você possa desenvolver vários aplicativos diferentes. Além disso, você manteve seu editor de código leve adicionando apenas os recursos necessários.