Visual Studio Code - Instalação e Customização
O Visual Studio Code é um editor de código criado pela Microsoft, com grande adoção pelas comunidades de diversas linguagens e tecnologias. Neste guia, você instala o editor no Windows, no Mac e no Linux e, em seguida, deixa o ambiente igual ao usado nos cursos do balta.io.
O caminho segue uma ordem simples. Primeiro, os requisitos; depois, a instalação em cada sistema; por fim, extensões, configurações, ícones e temas.
Requisitos do Visual Studio Code
O Visual Studio Code ficou famoso pela leveza na execução. De fato, ele é um dos editores mais leves e rápidos do mercado.
Segundo a página oficial de requisitos, o mínimo é um processador de 1,6 GHz e 1 GB de RAM. Além disso, o download fica abaixo de 200 MB e a instalação ocupa menos de 500 MB em disco.
Esses números, no entanto, representam o mínimo para abrir o editor. Para acompanhar os cursos, recomendamos uma máquina com pelo menos um Intel Core i3 dual core, 8 GB de RAM e 128 GB de disco.
Essas recomendações vêm da execução dos nossos cursos. Portanto, se o seu cenário for diferente, elas podem variar.
Recomendamos também manter o sistema operacional sempre atualizado. No Windows, use a versão 10 ou superior.
A documentação oficial lista os sistemas suportados:
- Windows em 64 bits, nas versões que ainda recebem suporte da Microsoft
- macOS na versão mais recente e nas duas anteriores com atualizações de segurança
- Linux baseado em Debian, a partir do Ubuntu Desktop 20.04 e do Debian 10
- Linux baseado em Red Hat, a partir do Red Hat Enterprise Linux 8 e do Fedora 36
Por outro lado, o editor não roda no Windows Server nem em máquinas virtuais não persistentes. Por isso, vale conferir a lista antes de instalar em ambientes corporativos.
Instalação do Visual Studio Code no Windows
A instalação no Windows é simples. Basta acessar o site oficial do Visual Studio Code e clicar no botão "Download for Windows" para baixar a última versão.
Em seguida, execute o instalador e siga as instruções na tela. Não esqueça de marcar a opção "Add to PATH", que adiciona o editor às variáveis de ambiente.
Instalador de usuário ou de sistema
Existem dois instaladores para Windows no site. O User Setup instala o editor em %LOCALAPPDATA%\Programs\Microsoft VS Code e não exige permissão de administrador.
O System Setup, por sua vez, instala em Program Files para todos os usuários da máquina. Nesse caso, tanto a instalação quanto as atualizações pedem elevação.
A documentação recomenda o User Setup para a maioria das pessoas, porque ele oferece a experiência de atualização mais tranquila. Quem prefere a linha de comando também pode instalar com o winget, como mostra o artigo sobre ambientes de desenvolvimento no Windows com o winget.
# Instala o editor pelo gerenciador de pacotes do Windows
winget install -e --id Microsoft.VisualStudioCode
Testando o comando code
Finalizada a instalação, feche todos os terminais abertos e abra um novo, no PowerShell ou no Windows Terminal. Depois, digite o comando abaixo.
code --version
Se tudo ocorrer como esperado, a versão instalada do Visual Studio Code aparece no terminal. A partir daí, o ambiente está pronto para seguir.
O terminal precisa ser reaberto porque ele carrega as variáveis de ambiente apenas na inicialização. Quem quiser personalizar o terminal encontra dicas no artigo sobre o Windows Terminal.
Instalação do Visual Studio Code no Mac
No Mac, o processo também é simples. Acesse o site oficial e clique em "Download for Mac" para baixar a última versão.
Abra o arquivo baixado e arraste o aplicativo para a pasta Applications. Pronto, a instalação está feita.
Hoje, o site oferece uma versão Universal, que funciona tanto em Macs com Intel quanto em Macs com Apple silicon. Também há builds específicos para cada arquitetura, que ocupam menos espaço.
Para manter o editor no Dock, clique com o Control pressionado sobre o ícone. Em seguida, escolha Options e depois Keep in Dock.
Adicionando o Visual Studio Code ao PATH no Mac
Também é possível adicionar o Visual Studio Code ao PATH para usar o comando code no terminal. Dessa forma, você abre pastas no editor diretamente pela linha de comando.
Abra o editor pelo menu de aplicativos e pressione F1 ou Cmd+Shift+P para abrir a paleta de comandos.
Em seguida, procure pelo comando Shell Command: Install 'code' command in PATH e execute.
Depois, reinicie o terminal. A partir daí, o comando code . abre a pasta atual no editor.
# Abre a pasta atual no editor
code .
Instalação do Visual Studio Code no Linux
No Linux com Ubuntu, a instalação segue o mesmo começo. Acesse o site oficial e clique em "Download for Linux", escolhendo o pacote .deb.
O download gera um pacote .deb na pasta Downloads. Então, abra um terminal, navegue até essa pasta e execute o comando abaixo, trocando o nome pelo arquivo baixado.
# Instala o pacote baixado com o apt
cd ~/Downloads
sudo apt install ./code_latest_amd64.deb
Pronto, a instalação está concluída e o editor aparece no menu de aplicativos. Segundo a documentação, o pacote também oferece instalar o repositório da Microsoft e a chave de assinatura, o que permite atualizar o editor pelo próprio apt.
Em distribuições mais antigas, o apt pode não aceitar o caminho local. Nesse caso, a documentação indica o par de comandos abaixo.
# Alternativa para distribuições antigas
sudo dpkg -i code_latest_amd64.deb
sudo apt-get install -f
O comando code no Linux
No Linux, não é preciso repetir o passo de PATH do Mac. Afinal, a instalação pelo pacote .deb já disponibiliza o comando code no terminal, enquanto o comando Shell Command da paleta existe apenas no macOS.
Portanto, basta abrir um terminal novo e rodar code --version para confirmar. Se o comando não responder, reinstale o pacote e verifique se a instalação terminou sem erros.
Quem desenvolve no Windows com Linux também pode usar o editor junto com o WSL, abrindo pastas da distribuição diretamente no VS Code.
Extensões do Visual Studio Code
As extensões são uma espécie de aplicativo complementar instalado dentro do Visual Studio Code. Com elas, o editor ganha funcionalidades extras, como suporte a linguagens, depuração e integração com nuvem.
Existem muitas extensões criadas e novas chegam todos os dias. Neste artigo, porém, cobrimos apenas as usadas nos cursos.
Com o editor aberto, pressione Ctrl+Shift+X, ou Cmd+Shift+X no Mac, ou clique no ícone de extensões na barra lateral. Uma nova tela se abre para pesquisar e instalar os itens abaixo.
| Extensão | Identificador do pacote | Uso |
|---|---|---|
| C# | ms-dotnettools.csharp | Suporte à linguagem C# e ao .NET |
| Azure | ms-vscode.vscode-node-azure-pack | Pacote de extensões para o Azure |
| Docker | ms-azuretools.vscode-docker | Imagens, containers e Dockerfiles |
| Flutter | dart-code.flutter | Desenvolvimento com Flutter e Dart |
| Beautify | hookyqr.beautify | Indentação de CSS, HTML e JavaScript |
Como podem existir extensões com nomes iguais ou parecidos, procure sempre pelo identificador do pacote. Ou seja, digite ms-dotnettools.csharp na busca, e não apenas "C#".
Se você não trabalha com Flutter no momento, por exemplo, não precisa instalar essa extensão. Assim, o editor fica com apenas o que você realmente usa.
A extensão Beautify serve para indentar códigos CSS, HTML e JavaScript de forma otimizada. Ela é opcional, porém recomendada.
Instalando extensões pelo terminal
O comando code também instala extensões. Isso ajuda a preparar uma máquina nova rapidamente, porque o mesmo script serve para toda a equipe.
# Instala as extensões usadas nos cursos
code --install-extension ms-dotnettools.csharp
code --install-extension ms-vscode.vscode-node-azure-pack
code --install-extension ms-azuretools.vscode-docker
code --install-extension dart-code.flutter
code --install-extension hookyqr.beautify
# Lista as extensões instaladas
code --list-extensions
C# Dev Kit para projetos .NET
Para quem trabalha com .NET, a Microsoft também oferece o C# Dev Kit. Segundo a documentação do C# Dev Kit, ele funciona junto com a extensão C# e adiciona gerenciamento de soluções, templates e descoberta de testes.
A extensão C# continua fornecendo os serviços básicos da linguagem. Por outro lado, o C# Dev Kit traz conceitos do Visual Studio para o editor e exige login com uma conta Microsoft, conforme o FAQ oficial de licenciamento.
Configurações do Visual Studio Code
O Visual Studio Code permite muitas configurações, e você tem liberdade para experimentar. Mesmo assim, listamos abaixo as configurações que utilizamos nos cursos.
Para acessar as configurações, pressione Ctrl+vírgula, ou Cmd+vírgula no Mac. Em seguida, aparece uma interface gráfica para pesquisar e modificar cada opção.
No canto superior direito dessa tela, o botão Open Settings (JSON) exibe o JSON com as configurações atuais. Esse arquivo aceita comentários, por isso as linhas abaixo trazem uma explicação ao lado de cada chave.
Para manter as configurações iguais às nossas, utilize o JSON abaixo.
{
"editor.formatOnSave": true, // Formata o código sempre que salvamos
"editor.fontFamily": "Source Code Pro", // Fonte
"editor.fontSize": 18, // Tamanho da fonte
"workbench.colorTheme": "Atom One Dark", // Tema
"workbench.iconTheme": "vscode-icons", // Pacote de ícones
"workbench.startupEditor": "newUntitledFile", // Abre sempre um arquivo em branco
"editor.minimap.enabled": false, // Desabilita o minimapa
"workbench.panel.defaultLocation": "right", // Deixa o terminal à direita
"terminal.integrated.cursorStyle": "underline", // Cursor do terminal como sublinhado
"terminal.integrated.fontSize": 18, // Tamanho da fonte do terminal
"git.enableSmartCommit": true, // Habilita o Smart Commit do Git
"git.autofetch": true // Habilita o Auto Fetch do Git
}
Para usar a mesma fonte, o mesmo tema e os mesmos ícones, é preciso instalá-los antes. Portanto, siga os passos das próximas seções antes de salvar essa configuração.
O que cada configuração faz
A opção editor.formatOnSave formata o arquivo a cada salvamento. Com isso, o código segue sempre o mesmo padrão sem esforço manual.
As chaves editor.fontFamily e editor.fontSize definem a fonte e o tamanho do editor. Já workbench.colorTheme e workbench.iconTheme apontam para o tema e o pacote de ícones.
A opção editor.minimap.enabled desliga o minimapa lateral, o que libera espaço horizontal. Além disso, workbench.startupEditor abre um arquivo em branco ao iniciar.
As chaves de terminal ajustam o cursor e o tamanho da fonte do terminal integrado. Por fim, git.enableSmartCommit e git.autofetch agilizam o trabalho com Git, que você configura seguindo o guia de Git e GitHub.
O editor muda ao longo das versões, e algumas chaves podem ser descontinuadas. Quando isso acontece, o próprio Visual Studio Code sublinha a chave no arquivo JSON e mostra a alternativa sugerida.
Onde fica o arquivo de configurações
As configurações de usuário ficam em um arquivo chamado settings.json. O local muda conforme o sistema operacional.
| Sistema | Caminho |
|---|---|
| Windows | %APPDATA%\Code\User\settings.json |
| macOS | $HOME/Library/Application Support/Code/User/settings.json |
| Linux | $HOME/.config/Code/User/settings.json |
Além disso, cada projeto pode ter um .vscode/settings.json próprio. Nesse caso, as configurações do projeto valem apenas para aquela pasta e se sobrepõem às do usuário.
Instalando a fonte Source Code Pro
A fonte que utilizamos é a Source Code Pro, disponível para download no Google Fonts. Após o download, instale a fonte no sistema e reinicie o Visual Studio Code.
Se a fonte não estiver instalada, o editor usa a fonte padrão sem exibir erro. Portanto, se o visual não mudar, confira primeiro a instalação da fonte.
Ícones e temas no Visual Studio Code
O Visual Studio Code permite usar ícones customizados, que facilitam muito a identificação dos arquivos. Tanto os ícones quanto os temas são instalados como extensões.
Então, repita o processo de instalação de extensões e procure pelos itens abaixo.
| Item | Identificador do pacote |
|---|---|
| VS Code Icons | vscode-icons-team.vscode-icons |
| Atom One Dark Theme | akamud.vscode-theme-onedark |
Depois de instalados, os nomes vscode-icons e Atom One Dark usados no JSON passam a funcionar.
Também é possível trocar de tema pela paleta de comandos, com a opção Preferences: Color Theme.
Lembre-se de que essas são apenas sugestões, baseadas no que usamos nos cursos. Talvez você encontre um tema que agrade mais, então fique à vontade para experimentar.
Sincronizando o Visual Studio Code entre máquinas
Quem usa mais de um computador pode repetir todos os passos em cada máquina. No entanto, o editor oferece o Settings Sync, que sincroniza configurações, extensões e atalhos.
Para ativar, clique no ícone de conta na barra lateral e entre com uma conta Microsoft ou GitHub. Dessa forma, a próxima instalação do Visual Studio Code já chega com o seu ambiente configurado.
Conclusão
Instalar o Visual Studio Code leva poucos minutos em qualquer sistema operacional. No Windows, a opção Add to PATH resolve o comando code; no Mac, o Shell Command da paleta faz esse papel; no Linux, o pacote .deb já entrega tudo.
Em seguida, as extensões, o JSON de configurações, a fonte, o tema e os ícones deixam o ambiente igual ao dos cursos. Com isso, você acompanha as aulas sem diferenças visuais e foca no que importa: o código.
Por fim, lembre-se de que o editor é seu. Ajuste fonte, tema e extensões até o Visual Studio Code ficar confortável para o seu dia a dia.
FAQ
O Visual Studio Code é gratuito?
Sim. Ele é gratuito e pode ser baixado no site oficial para Windows, macOS e Linux.
Qual a diferença entre User Setup e System Setup no Windows?
O User Setup instala só para o seu usuário, sem permissão de administrador. O System Setup instala para todos os usuários e exige elevação.
Por que o comando code não funciona depois da instalação?
Normalmente, o terminal foi aberto antes da instalação. Feche todos os terminais, abra um novo e, no Windows, confirme se a opção Add to PATH estava marcada.
Preciso instalar todas as extensões da lista?
Não. Instale apenas as extensões das tecnologias que você usa no momento.
O tema e os ícones são obrigatórios?
Não. Eles são sugestões baseadas nos cursos, e você pode escolher qualquer tema do Marketplace.