Comece com o Visual Studio Code

Se existe alguma ferramenta que um desenvolvedor de software precisa, é um editor. Um editor pode ser tão simples quanto o Notepad++ ou tão completo quanto o IDE do Microsoft Visual Studio. Mas não seria ótimo se você pudesse escolher quanto editor precisar, dependendo do projeto, e não precisar trocar de programa?

Em 2015, a Microsoft lançou sua resposta a essa pergunta: Visual Studio Code. No fundo, o VS Code é um editor de texto, baseado na estrutura multiplataforma Electron do GitHub. Mas seu design aberto permite que ele se adapte facilmente ao trabalho de desenvolvimento em qualquer linguagem ou com qualquer sintaxe de código.

Se tudo que você precisa é de um editor de texto com uma boa seleção de recursos modernos, o Visual Studio Code pode fazer isso como está. Porém, onde o VS Code brilha é como sua galáxia de extensões pode transformá-lo em um ambiente para qualquer número de linguagens, estruturas, tipos de dados ou serviços: não apenas C#, Go ou Python, mas também Salesforce e AWS.

O Visual Studio Code também hospeda front-ends e espaços de trabalho para ferramentas que os programadores esperam rotineiramente em um ambiente de desenvolvimento – coisas como integração de controle de origem (git e GitHub), gerenciando bancos de dados em um projeto ou gerenciando outros utilitários externos, como pipelines de CI/CD.

Configurando o código do Visual Studio

Embora o Visual Studio Code seja um produto da Microsoft, ele está disponível para as três principais plataformas de desenvolvimento: Microsoft Windows, Linux e macOS. Se você visitar a página de download do VS Code, verá links de download para pacotes de instalação para cada plataforma.

Código VS no Microsoft Windows

A maneira mais comum de configurar as coisas no Windows é igual a qualquer outro aplicativo do Windows: baixe o instalador do site oficial e execute-o. Se tiver necessidades específicas, você pode personalizar o processo de configuração usando um método diferente:

Se vocês são o único usuário em um determinado sistemao pacote “System Installer” instala o VS Code em todo o sistema e, portanto, evita o trabalho de configurá-lo para vários perfis de usuário.
Se você estiver instalando o VS Code apenas para um usuário específicobaixe o pacote “User Installer” e execute-o.
Se você deseja instalar e gerenciar o VS Code por meio de ferramentas de linha de comandovocê pode usar Winget (winget install vscode), Chocolate choco install vscodeou Colher scoop install vscode para fazer as coisas funcionarem.

IDG

Figura 1. Na primeira inicialização, o VS Code apresenta ações comuns a serem executadas, incluindo links para recursos de aprendizagem.

Código VS no Linux

A instalação de software no Linux tende a ser feita por meio do gerenciador de pacotes de uma determinada distribuição Linux e de seus repositórios. Muitas distribuições Linux oferecem VS Code como item padrão. Você também tem a opção de instalar o VS Code manualmente, o que pode ser feito de várias maneiras:

Se você deseja baixar e instalar .deb ou .rpm pacotes (para Debian/Ubuntu e Red Hat/Fedora/SUSE, respectivamente), você pode obtê-los na página de download do VS Code.
Se você usa pacotes Snap, pode obter o VS Code na Snap Store.
Se você quer apenas um .tar.gz arquivo para descompactar e configurar manualmente ou usar um script CLI, que também está disponível na página de download.

Código VS no macOS

Ofertas de código VS .zip pacotes para arquiteturas nativas de silício da Apple, Intel e universais, juntamente com instaladores de linha de comando para essas arquiteturas. Também é possível usar o popular gerenciador de pacotes Homebrew: brew install --cask visual-studio-code.

Executando o VS Code em modo portátil

Outra maneira útil de executar o VS Code é no modo portátil. No modo portátil, o VS Code não modifica o sistema em que está instalado e mantém todos os seus dados em seu próprio diretório. Para executar o VS Code no modo portátil, use o .zip downloader. O baixado .zip O arquivo pode ser descompactado e executado em qualquer diretório.

O modo portátil também é útil se você precisar limpar o sistema. Você pode manter uma instância portátil do VS Code em uma unidade que não seja do sistema e, depois de redefinir a unidade do sistema, você pode simplesmente continuar a usá-la sem precisar reinstalá-la. As instalações existentes também podem ser convertidas em portáteis e vice-versa.

Observe que a versão em modo portátil do VS Code não é atualizada automaticamente. Você precisa baixar uma versão mais recente e copiar seus arquivos de configuração nela. Além disso, o modo portátil requer alguma configuração antes de ser usado. Caso contrário, ele tentará procurar seus dados de configuração no próprio sistema, e não em seu próprio diretório. Portanto, se você já tiver o VS Code instalado nesse sistema, o padrão será que Em vez disso, as configurações do VS Code.

Extensões de código do Visual Studio

A extensibilidade e flexibilidade do VS Code vêm de extensões—complementos de terceiros que transformam o VS Code de dentro para fora.

A primeira coisa a fazer com o VS Code é equipá-lo com recursos para trabalhar nas linguagens de programação de sua escolha, incluindo extensões para Python, Java, Go, Rust. Mas as extensões fazem mais do que apenas transformar o VS Code em um ambiente para trabalhar em uma linguagem de programação específica. Eles também podem alterar o tema do VS Code, gerenciar ferramentas externas como CMake, usar o VS Code como interface para serviços ou até mesmo trabalhar com tipos de arquivos que não são texto editável – por exemplo, o SQLite Viewer.

As extensões também podem ser ativadas ou desativadas, não apenas para todos os projetos, mas projeto por projeto. Uma tática inteligente é desativar todos extensões por padrão, exceto aquelas que você provavelmente usará em qualquer lugar (por exemplo, git extensões) e, em seguida, ativá-los seletivamente para um determinado projeto. Isso mantém tudo funcionando rapidamente e evita que as extensões interfiram umas nas outras.

Código VS com a extensão Python. — Figura 2. O mercado de extensões do Visual Studio Code oferece milhares de maneiras de expandir o comportamento do VS Code e alterar sua aparência. Quase todas as linguagens amplamente utilizadas – por exemplo, Python, mostrada aqui – possuem uma extensão para VS Code.

Trabalhando com código VS

Quando você inicia o VS Code pela primeira vez, a interface vem equipada com alguns componentes comuns a quase todas as configurações do editor. Eles estão disponíveis nos ícones da barra de atividades no lado esquerdo da tela. Algumas extensões adicionam seus próprios ícones a esta área, mas os discutidos aqui são os padrões.

Explorador

Ao abrir um diretório de disco ou um projeto de vários diretórios no VS Code, todos os arquivos disponíveis são mostrados em formato de árvore. Se você deseja abrir vários diretórios como um único projeto ou “espaço de trabalho”, use File | Add Folder to Workspace e Save Workspace As para salvar o espaço de trabalho como um arquivo de projeto que você pode reabrir mais tarde.

Também listados para qualquer arquivo selecionado no Explorer estão dois outros painéis recolhíveis:

Contorno mostra uma visão geral do arquivo atual, se houver algum disponível. Extensões para um determinado tipo de arquivo ou linguagem de programação geralmente fornecem uma visão geral.
Linha do tempo mostra uma lista de todas as edições feitas no arquivo atual, tanto no editor quanto por meio de qualquer sistema de controle de revisão configurado no VS Code (normalmente git). Se você salvar algo localmente e esquecer de fazer check-in gitmuitas vezes você pode voltar na linha do tempo para encontrar uma cópia anterior.

Linha do tempo no VS Code Explorer. — Figura 3. A visualização Explorer (árvore à esquerda) mostra arquivos em sua área de trabalho. Selecionar um ponto na Linha do tempo (canto inferior esquerdo) traz à tona as diferenças entre o estado atual do arquivo e suas alterações desde então.

Procurar

O recurso Pesquisar permite executar pesquisas baseadas em texto no diretório ou projeto atualmente aberto. Você também pode executar operações de substituição em arquivos, usar expressões regulares em pesquisas e incluir ou excluir arquivos com base em padrões glob. (Se você ainda não conhece expressões regulares, vale a pena aprender pelo menos o básico.) Você também pode limitar a pesquisa apenas aos arquivos abertos no momento clicando no ícone na caixa “arquivos a serem incluídos”.

Visualização de pesquisa no VS Code. — Figura 4. Clique nos resultados da pesquisa (à esquerda) para abrir o arquivo correspondente e ir até essa linha. As barras âmbar na minivisualização à direita mostram todos os locais no arquivo aberto que também correspondem a essa consulta de pesquisa.

Fonte de controle

Se você tem git instalado e um repositório configurado para o seu projeto, o VS Code oferece uma GUI útil para as ações mais comuns: fazer commits, criar ou alterar ramificações, enviar commits para um servidor remoto e assim por diante. O controle de origem padrão cobre apenas um pequeno subconjunto de git funções; para saber mais, você pode instalar uma extensão como GitLens.

Interface de controle de origem padrão do VS Code. — Figura 5. A interface de controle de origem padrão do VS Code é mínima, mas funcional. Aqui é mostrado um commit em andamento, com as alterações do arquivo mostradas nos destaques à direita.

Executar e depurar

Se você instalou extensões para um idioma específico, elas normalmente se conectam aos mecanismos do VS Code para executar código e anexar depuradores. “Executar e Depurar” contém esses comandos, juntamente com links para personalizar como seu código será executado ou depurado no projeto atual.

Extensões

Conforme mencionado acima, é aqui que você adiciona e gerencia extensões para o VS Code. Observe que as extensões normalmente são atualizadas automaticamente, então você receberá notificações sobre atualizações pendentes nesta área.

Observe também que as extensões podem ser descontinuada por seus editores – por exemplo, se alguém parar de trabalhar em uma determinada extensão e outra pessoa criar uma substituta.

Mais componentes do VS Code

Existem mais alguns componentes no Visual Studio Code que vale a pena conhecer.

A paleta de comandos e pesquisa de arquivos

A barra na parte superior central da janela do VS Code é uma função de pesquisa universal para o próprio VS Code. Clique nele e comece a digitar, e você poderá procurar qualquer arquivo em seu projeto ou encontrar qualquer comando ou função pelo nome.

Uma maneira mais rápida de trabalhar com a paleta de comandos é com o teclado. Bater Ctrl-P procurar arquivos no seu projecto; bater Shift-Ctrl-P procurar comandos ou funções.

A paleta de comandos no VS Code. — Figura 7. A paleta de comandos.

O painel do terminal

Imprensa Ctrl-~ (a tecla backtick) e você abrirá o painel do terminal do VS Code. Na maioria das vezes, você usará isso para acessar a janela de terminal integrada do VS Code, que por padrão abre uma sessão shell na raiz do diretório do seu projeto. Ele também pode ser configurado para abrir praticamente qualquer outra coisa para a qual você precise de uma interface de terminal, como o subsistema Windows para Linux, o console de depuração JavaScript e assim por diante.

O painel do terminal também fornece guias para saída de ferramentas em execução no VS Code, como linters de código ou console de depuração. Clique com o botão direito na barra de título do painel do terminal e você verá quais guias estão disponíveis, bem como opções de posicionamento. Aqueles com monitores superlargos, por exemplo, podem querer colocar o painel do terminal ao longo de uma borda vertical da janela do VS Code, em vez de na parte superior ou inferior.

Uma sessão de shell convencional no terminal do VS Code. — Figura 8. O terminal integrado do VS Code hospeda não apenas sessões de shell convencionais (mostradas aqui), mas também saídas informativas de ferramentas dentro do VS Code e problemas identificados no projeto atual.

Guias e janelas

Quando você abre arquivos no VS Code, eles são rastreados em guias separadas. Você pode arrastá-los livremente para reorganizá-los ou arrastá-los para diferentes áreas do editor para dividi-los em sua própria subjanela. Uma adição recente: você pode clicar com o botão direito em uma guia e selecionar “Mover/copiar para uma nova janela” para dividir a guia em sua própria janela mínima.