O Visual Studio Code é um editor de código criado pela Microsoft e que tem uma grande adoção pelas comunidades de diversas linguagens e tecnologias.
- Requisitos
- Instalação no Windows
- Instalação no Mac
- Instalação no Linux (Ubuntu)
- Extensões
- Configurações
- Ícones e Temas
O Visual Studio Code tornou-se famoso por sua leveza na execução, sendo um dos editores de código mais leve e rápidos que temos no mercado.
Desta forma, os requisitos de hardware são baixos, porém recomendamos uma máquina com pelo menos Intel Core i3, Dual Core, com 8GB de Ram e no mínimo 128GB de disco.
Estas recomendações são baseadas na execução dos nossos cursos, então caso seu cenário seja diferente, elas podem varias.
Recomendamos também manter o Sistema Operacional SEMPRE ATUALIZADO, e em caso de uso do Windows, utilizar sempre a versão 10 ou superior.
A instalação no Windows é relativamente simples, basta acessar o site oficial do Visual Studio Code e fazer o Download da sua última versão, clicando no botão "Download for Windows".
Em seguida, execute o instalador baixado e siga as instruções na tela, não esqueça de marcar a opção "Add to Path" para adicionar o Visual Studio Code nas variáveis de ambiente.
Finalizada a instalação, feche todos os terminais abertos e abra um novo (Power Shell ou Windows Terminal) e digite o comando abaixo.
code --version
Se tudo ocorrer como esperado, você verá a versão do Visual Studio Code instalada em sua máquina e estará tudo pronto para prosseguir.
A instalação no Mac é relativamente simples, basta acessar o site oficial do Visual Studio Code e fazer o Download da sua última versão, clicando no botão "Download for Mac".
Abra o instalador e copie o Visual Studio Code para a pasta Applications do seu Mac e pronto, a instalação está devidamente feita.
Podemos ainda adicionar o Visual Studio Code ao PATH para ter acesso ao comando code no terminal, podendo abrir diretamente pastas de lá no Visual Studio Code.
Abra seu menu de aplicativos e inicie o Visual Studio Code e na tela inicial dele pressione F1 para abrir a tela de execução de comandos.
Procure pelo comando Shell Command: Install 'code' command in PATH para adicionar o Visual Studio Code ao PATH do seu sistema operacional.
A instalação no Linux é relativamente simples, basta acessar o site oficial do Visual Studio Code e fazer o Download da sua última versão, clicando no botão "Download for Linux".
Como resultado do Download você terá um pacote .deb na pasta Downloads. Abra um terminal, navegue até a mesma e execute o seguinte comando.
sudo apt install ./ARQUIVO_BAIXADO.deb
Pronto, a instalação do Visual Studio Code está realizada e ele já deve aparecer no menu de aplicativos para você.
Podemos ainda adicionar o Visual Studio Code ao PATH para ter acesso ao comando code no terminal, podendo abrir diretamente pastas de lá no Visual Studio Code.
Abra seu menu de aplicativos e inicie o Visual Studio Code e na tela inicial dele pressione F1 para abrir a tela de execução de comandos.
Procure pelo comando Shell Command: Install 'code' command in PATH para adicionar o Visual Studio Code ao PATH do seu sistema operacional.
As extensão são uma espécie de aplicativos complementares instalados dentro do Visual Studio Code que nos permite acesso a funcionalidades extras.
Existem muitas extensões já criadas e novas chegando a cada dia, porém neste artigo vamos cobrir as utilizadas na execução dos cursos.
Com o Visual Studio Code aberto, pressione CTRL (CMD)+SHIFT+X ou localize o ícone de extensões no menu lateral direito da tela.
Uma nova tela se abrirá, para pesquisarmos as extensões, e vamos instalar as seguintes.
- C# - ms-dotnettools.csharp
- Azure - ms-vscode.vscode-node-azure-pack
- Docker - ms-azuretools.vscode-docker
- Flutter - dart-code.flutter
- Beautify - hookyqr.beautify
Como podem haver extensões com nomes iguais ou similares, procure sempre pelo nome do pacote informado acima.
Se você não estiver trabalhando com Flutter no momento e não quiser instalar a extensão dele agora por exemplo, não precisa. Você pode limitar a instalação das extensões apenas para as que está de fato utilizando.
A extensão Beautify serve para identar códigos CSS, HTML e JavaScript de uma forma mais otimizada. Ela é opcional aqui, porém recomendada.
O Visual Studio Code permite muitas configurações, e você está livre para brincar aqui, porém vamos deixar as configurações que utilizamos nos cursos listada abaixo.
Para acessar as configurações, basta pressionar CTRL (CMD)+VÍRGULA, e você será apresentado a uma interface gráfica onde poderá modificar ou pesquisar uma configuração.
No canto superior direito desta tela, haverá um botão chamado Open Settings (JSON) que irá exibir o JSON das configurações atuais.
Caso queira manter todas as configurações como as nossas, utilize o JSON abaixo em sua configuração.
{
"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 Mini Map
"workbench.panel.defaultLocation": "right", // Deixa o terminal a direita
"terminal.integrated.cursorStyle": "underline", // Deixa o cursor do terminal como underline
"terminal.integrated.fontSize": 18, // Tamanho da fonte do terminal
"git.enableSmartCommit": true, // Habilita Smart Commit do GIT
"git.autofetch": true // Habilita Auto Fetch do GIT
}
Note que para utilizar a mesma fonte, tema e ícones você precisa instalá-los primeiro, então siga os processos abaixo antes de salvar esta configuração.
A fonte que utilizamos é a Source Code Pro e pode ser baixada diretamente do Google Fonts. Após o Download, realize a instalação da mesma e reinicie o Visual Studio Code.
O Visual Studio Code permite uso de ícones customizados, que facilitam muito a visualização dos arquivos.
Tanto os ícones quanto os temas podem ser instalados como uma extensão, então repita o processo de instalação de extensão e procure pelos seguintes itens.
- VS Code Icons - vscode-icons-team.vscode-icons
- Atom One Dark Theme - akamud.vscode-theme-onedark
Lembre-se que estas são apenas sugestões, baseados no que nós utilizamos nos cursos. Talvez você encontre um tema que mais te agrada, fique à vontade.