Conheça o Visual Studio Code (VS Code), o ambiente de desenvolvimento do momento

Se você é desenvolvedor, provavelmente já sabe como um ambiente de desenvolvimento integrado (do inglês Integrated Development Environment, IDE) facilita a vida. Claro que sempre é possível programar “na raça”, com um editor de texto e um terminal, mas um bom IDE agiliza o desenvolvimento principalmente por meio de recursos como depuração (debugging) e completação de código (code completion). E se você trabalha em diferentes projetos que usam diferentes linguagens de programação, ou em um projeto que usa várias linguagens – como é comum com sites e sistemas web, que usam HTML, CSS, JavaScript, PHP, etc. – um IDE que suporta essas diferentes linguagens permite que você trabalhe com todas elas em uma única ferramenta.

Trabalhando com desenvolvimento, eu já usei alguns IDEs, a exemplo de Eclipse, NetBeans e PhpStorm, mas os que mais tenho usado ultimamente são o Visual Studio Code (comumente abreviado VS Code) e seu equivalente software livre, o VSCodium (não apenas eu os tenho usado, como também 73% dos desenvolvedores que responderam ao 2024 Stack Overflow Developer Survey).

É parecido com o que acontece com a Google, que desenvolve o navegador Chromium que é software livre e fornece a base de código para o Chrome, que é gratuito, mas proprietário, porque adiciona alguns componentes proprietários.

A Microsoft desenvolve o VS Code no repositório vscode no GitHub. Seu código-fonte é aberto e disponibilizado sob a licença MIT. Portanto, é um software livre. Você poderia clonar esse código, compilá-lo no seu computador e usá-lo livremente. Ou poderia baixar o programa já pronto para uso do site do VS Code, o que é mais conveniente, mas aí tem um detalhe: esse programa é compilado pela Microsoft com o código daquele repositório mais configurações personalizadas da Microsoft – por exemplo, telemetria – e é disponibilizado sob essa outra licença proprietária. Para algumas pessoas, isso é uma questão, e por isso foi criado o projeto VSCodium, que clona o repositório vscode original, compila e disponibiliza o programa para download em seu site sob a licença MIT, sem telemetria. Note que o VSCodium não é um fork do VS Code: o repositório vscodium contém, na verdade, os scripts para clonar e compilar o vscode da Microsoft.

O que torna o VS Code interessante é que é um IDE bastante leve, rápido, enxuto, que, a princípio, parece não muito mais que um editor de texto inteligente com realce de sintaxe e um terminal integrado, mas pode ter sua funcionalidade estendida por incontáveis extensões que você pode instalar conforme sua necessidade. Vai programar com PHP? Então instala a extensão do PHP. Vai programar com Python? Então instala a extensão do Python. Vai trabalhar com Docker? Então instala a extensão do Docker, e assim por diante.

Também tenho percebido que o VS Code tem recebido bastante atenção da comunidade de desenvolvedores na Internet, sendo que, pesquisando, você encontra tutoriais de como fazer praticamente tudo com o VS Code.

Se você já trabalha com programação há um tempo, já deve ter ouvido falar dos mais antigos Visual Studio e Visual Studio Express. Não confunda o Visual Studio Code (VS Code) com esses outros produtos. Uma das diferenças é que com eles é possível desenhar a interface gráfica dos aplicativos. Para chegar ao Visual Studio Code, a Microsoft enxugou bastante as funcionalidades do Visual Studio, mas chegou a um produto final leve e versátil.

Nesse tutorial, você verá como instalar o VS Code e o VSCodium no Linux Kamarada 15.6, que será a distribuição Linux que usaremos como referência, assim como algumas dicas de como usá-los no dia a dia.

Vale observar que você pode instalar os dois IDEs no mesmo sistema e inclusive usá-los ao mesmo tempo, como preferir. No entanto, note que alguns recursos, a exemplo da extensão Dev Containers, estão disponíveis apenas para o VS Code.

Nota: de agora em diante, vou me referir a ambos VS Code e VSCodium apenas por VS Code. Quando houver diferença entre os dois, deixarei isso claro.

Instalando o VS Code

Para instalar o VS Code, você pode baixar o pacote RPM do site oficial ou do repositório da Microsoft seguindo as instruções que estão na documentação do VS Code. Eu tomei a liberdade de, com base nessas instruções, criar uma instalação com 1 clique (1-Click Install), que você pode fazer clicando no botão abaixo:

Instalação com 1 clique — VS Code

Se você prefere o terminal, executar os comandos a seguir tem o mesmo efeito:

1
2
3
# zypper addrepo https://packages.microsoft.com/yumrepos/vscode vscode
# zypper ref
# zypper in code

Se você usa Flatpak, saiba que até existe um pacote do VS Code no Flathub, mas eu não recomendo a instalação dele por ser problemático.

Logo após a instalação, você já deve ser capaz de iniciar o VS Code.

Instalando o VSCodium

Para instalar o VSCodium, você pode baixar o pacote RPM do GitHub ou de um repositório seguindo as instruções que estão no site oficial do VSCodium. Eu tomei a liberdade de, com base nessas instruções, criar uma instalação com 1 clique (1-Click Install), que você pode fazer clicando no botão abaixo:

Instalação com 1 clique — VSCodium

Se você prefere o terminal, executar os comandos a seguir tem o mesmo efeito:

1
2
3
# zypper addrepo https://download.vscodium.com/rpms/ vscodium
# zypper ref
# zypper in codium

Se você usa Flatpak, saiba que até existe um pacote do VSCodium no Flathub, mas eu não recomendo a instalação dele por ser problemático.

Logo após a instalação, você já deve ser capaz de iniciar o VSCodium.

Iniciando o VS Code (ou o VSCodium)

Se você usa a área de trabalho GNOME (padrão do Linux Kamarada), pode iniciar o VS Code (ou o VSCodium) da mesma forma como iniciaria qualquer outro aplicativo, por meio do menu Atividades:

Essa é a tela inicial do VS Code, por enquanto sem nenhum projeto aberto:

A tela inicial do VSCodium é praticamente igual:

Abrindo uma pasta

Uma vez aberto o VS Code (ou o VSCodium), você pode ir no menu File > Open Folder para abrir uma pasta.

Você também pode iniciar o VS Code a partir do terminal, usando o comando code e passando como argumento a pasta do projeto que deseja abrir:

1
$ code /caminho/para/projeto/

Ou mude para a pasta do projeto usando o comando cd e rode o comando code passando a pasta atual como argumento:

1
2
$ cd /caminho/para/projeto/
$ code .

Você também pode iniciar o VSCodium a partir do terminal das mesmas formas. Apenas use o comando codium em vez do comando code.

Se essa é a primeira vez que você abre essa pasta, o VS Code pergunta se você confia nos autores dos arquivos dessa pasta. Essa pergunta é uma medida de segurança do VS Code: com base na sua resposta, ele pode ou não executar código nessa pasta. Responda que sim clicando no botão Yes, I trust the authors (Sim, confio nos autores):

Agora a view (visão) Explorer (Explorador) à esquerda mostra a pasta e seus arquivos:

Você pode usá-la para gerenciar arquivos e pastas do projeto (criar, renomear, mover, excluir, etc). Faça duplo clique em um arquivo para abri-lo no editor.

Dica: se seu projeto tem vários arquivos, conforme você navega na árvore de arquivos e pastas, ela pode ficar muito longa. Para reduzi-la ao estado inicial, você pode usar o botão Collapse Folders in Explorer (Recolher Pastas no Explorador).

A título de curiosidade, o projeto que estou usando como exemplo é o firstboot, no branch 15.6-dev.

Paleta de Comandos (Command Palette)

A Paleta de Comandos (Command Palette) do VS Code é uma mão na roda: você pode fazer muitas coisas por meio dela. Ela pode ser usada de duas formas.

Uma delas serve para abrir arquivos do projeto. Use o atalho de teclado Ctrl + P e comece a digitar um pedaço do nome do arquivo que deseja abrir:

Muitas vezes, isso pode ser mais prático do que tentar localizar o arquivo na view Explorer.

A outra forma permite executar comandos para que o IDE faça alguma coisa. Você pode usar o mesmo atalho Ctrl + P e começar digitando > (maior que), ou usar o atalho Ctrl + Shift + P, ou ainda ir no menu View > Command Palette (Ver > Paleta de Comandos), e na sequência começar a digitar o comando desejado:

Dica: observe que a Paleta de Comandos mostra o atalho de teclado associado a cada comando. Você pode aproveitar para aprender o atalho de teclado e de uma próxima vez usá-lo em vez de abrir a Paleta de Comandos. Por exemplo, para comentar a linha atual (comando Add Line Comment), você pode teclar Ctrl + K e depois Ctrl + C.

Extensões

Como eu já havia comentado na introdução, existem várias extensões na loja (Marketplace) do VS Code que podem ser instaladas para acrescentar funcionalidades ao IDE, incluindo o suporte a várias linguagens de programação.

Como o projeto que estou usando como exemplo tem um código em Python, vou demonstrar como instalar uma extensão no VS Code usando, como exemplo, a extensão do Python.

A Barra de Atividades (Activity Bar), por padrão à esquerda, permite alternar entre diferentes views. Mude para a view Extensions (Extensões):

(observe o atalho de teclado que você pode usar alternativamente: Ctrl + Shift + X)

Pesquise pela extensão, selecione-a na lista à esquerda, veja mais informações sobre ela à direita e clique em Install (Instalar):

Normalmente, você já pode começar a usar a extensão logo após instalá-la.

Dica: o próprio VS Code pode sugerir a instalação de extensões dependendo de certos arquivos que ele detecta no projeto (nos meus testes, isso acontece apenas no VS Code, e não no VSCodium).

Traduzindo a interface

O VS Code vem por padrão em Inglês, mas é possível traduzi-lo para outros idiomas, dentre eles o nosso Português Brasileiro.

Nota: nos meus testes, só consegui fazer isso no VS Code. No VSCodium, não.

Para mudar o idioma da interface do VS Code, tecle Ctrl + Shift + P para abrir a Paleta de Comandos, comece a digitar display e, por fim, clique no comando Configure Display Language (Configurar Idioma de Exibição):

Selecione o idioma que deseja:

A título de curiosidade, os Pacotes de Idiomas (Language Packs) do VS Code são extensões. Caso o pacote de idioma selecionado ainda não esteja instalado, o VS Code o instalará.

Ao final, o IDE será reiniciado e sua interface aparecerá traduzida:

Acredito que no meio dos desenvolvedores é mais comum usar as ferramentas em Inglês, por isso darei sequência a esse tutorial com a interface padrão em Inglês. Você pode usar o mesmo caminho apresentado aqui se quiser traduzir a interface de volta do Português Brasileiro para o Inglês (English).

Salvando automaticamente

Aqui está outra mão na roda do VS Code: você pode configura-lo para salvar os arquivos automaticamente. Com isso, quando você começa a digitar e depois para, o próprio IDE já salva o arquivo modificado no segundo seguinte.

Ative essa funcionalidade indo no menu File > Auto Save (Arquivo > Salvamento Automático):

Usando o terminal integrado

Mais uma mão na roda do VS Code: ele tem um terminal integrado, que você pode abrir usando Ctrl + ` (crase), ou seja, Ctrl + Shift + ´ (acento agudo):

O terminal integrado é uma das abas do Painel (Panel), que, por padrão, fica na parte inferior da tela. Para exibi-lo, você também pode puxá-lo da parte inferior.

Nesse terminal, você deve ser capaz de executar a maioria dos comandos que conseguiria executar no terminal do próprio sistema operacional.

Executando e depurando

O VS Code é capaz de executar e depurar códigos em diversas linguagens de programação, contanto que as devidas extensões estejam instaladas. A forma exata de executar e depurar pode mudar conforme a linguagem de programação, mas o funcionamento geral é sempre parecido.

Para demonstrar como executar e depurar um código no VS Code, vou usar como exemplo o projeto python-colors, que usa a linguagem de programação Python. Para isso, vamos precisar da extensão do Python, que instalamos previamente. Você pode ler mais sobre esse código no artigo:

• Resolvendo problemas de forma criativa com scripts – comparando paletas de cores usando Python

Você pode clonar esse projeto e preparar seu sistema para rodá-lo com esses comandos:

1
2
3
4
5
$ sudo zypper in git python311 python311-pip
$ python3.11 -m pip install scipy
$ git clone https://github.com/kamarada/python-colors.git
$ cd python-colors
$ code .

Usando a view Explorer ou a Paleta de Comandos, abra o arquivo colors.py.

Para simplesmente executar o programa (sem depurar), use o ícone Run Python File (Executar Arquivo do Python) no canto superior direito da tela:

Alternativamente, você pode usar o atalho de teclado Ctrl + F5.

O programa é executado e sua saída é exibida no terminal:

Para depurar o programa, mude para a view Run and Debug (Executar e Depurar).

Adicione um ponto de interrupção (breakpoint) posicionando o cursor na linha desejada e teclando F9. Alternativamente, você pode passar o mouse perto do número da linha e clicar no ponto vermelho que aparece:

Tecle F5 para iniciar a depuração. Observe que o programa começa a ser executado, mas é interrompido no ponto de interrupção que você definiu:

Você pode verificar o valor de uma variável passando o mouse sobre ela no editor enquanto a execução estiver pausada. Também todas as variáveis e seus respectivos valores são exibidos na view Variables (Variáveis) à esquerda.

Para passar para a próxima linha, tecle F10 ou clique no ícone Step Over (Contornar), na parte superior da tela, onde ficam os controles de depuração:

Para continuar a execução normal do programa até o fim, ou até o próximo ponto de interrupção, tecle F5 ou clique no ícone Continue (Continuar).

Se quiser encerrar a execução do programa antes que ele termine normalmente, clique no ícone Stop (Interromper) ou tecle Shift + F5.

Dica: caso seja do seu interesse monitorar o valor de uma variável específica, você pode adicioná-la à view Watch (Inspeção). Note que você pode monitorar, inclusive, o valor de expressões, como o valor retornado por chamadas a funções.

A depuração do VS Code oferece muitos outros recursos. Para mais informações, consulte a documentação:

• Debug code with Visual Studio Code

Atalhos de teclado

Quem trabalha programando usa muito as mãos para digitar, e realizar tarefas usando atalhos de teclado pode ser mais prático do que tirar a mão do teclado pro mouse pra clicar em algum botão na tela.

Felizmente, o VS Code permite que você execute a maioria das tarefas diretamente do teclado. A seguir, listo alguns dos atalhos de teclado que mais uso (além dos já apresentados anteriormente ao longo do artigo).

Para uma lista completa de atalhos de teclado, consulte a documentação:

• Keyboard shortcuts for Visual Studio Code

Conclusão

O VS Code é um ambiente de desenvolvimento realmente muito bom: leve, com uma interface simples, enxuta e intuitiva, já vem de fábrica com o mínimo que já permite ao programador pelo menos começar a escrever códigos com minimamente um realce de sintaxe (como se fosse um editor de texto melhorado). Mas pode ter suas funcionalidades facilmente expandidas por meio de extensões, que podem ser instaladas conforme a necessidade de cada desenvolvedor, para que o IDE suporte as mais diversas linguagens de programação e tecnologias. A Microsoft acertou em cheio no projeto desse ambiente, tanto que hoje ele é um dos mais usados (senão o mais usado) do mundo. E como é software livre e código aberto, a tendência é que só melhore com contribuições da comunidade.

Espero que esse artigo tenha te ajudado a dar os primeiros passos no VS Code. Como eu o uso todo dia, tentei mostrar o que considero ser mais importante e acrescentar algumas dicas. Mas esse artigo não esgota o assunto, ainda há muito para você descobrir no VS Code.

Você pode dar uma conferida no tutorial oficial, que contém muitas das informações já apresentadas aqui, mas também mais algumas que podem ser do seu interesse:

• Tutorial: Get started with Visual Studio Code

Assim como conferir a documentação oficial:

• Visual Studio Code documentation

Para referência futura, aqui foi utilizada a versão 1.98.0 tanto do VS Code quanto do VSCodium, lançada em fevereiro de 2025.

Se tiver alguma dúvida sobre esse artigo ou sugestão de como melhorá-lo, ou sugestões para próximos artigos, por favor, comente. Até a próxima!