Visual Studio Code

Visual Studio Code
Editor de códigos gratuito e Open Source

Baixe o Visual Studio Code

O Visual Studio Code é um editor de código-fonte leve e poderoso. É uma ferramenta multiplataforma disponível para Windows, macOS e Linux. Vem com suporte interno para JavaScript, TypeScript e Node.js e possui um rico ecossistema de extensões para outras linguagens como C ++, C #, Java, Python, PHP, Go. Foi desenvolvido pela Microsoft sendo gratuito e tem seu código fonte aberto Open Source. É um software leve e pode ser instalado em máquinas com poucos recursos. Sua interface é simples mas seus recursos são numerosos. Você pode instalar extensões (plugins) e personalizar sua IDE de acordo com as linguagens de programação que você vai utilizar.

Para a instalação no Windows, depois de feito o download, execute o instalador e siga as instruções. Um ponto importante, é não esquecer de marcar a opção “Add to path” para que o VS Code fique disponível nas suas variáveis de ambiente. Após a instalação, se tudo ocorrer bem, basta abrir o editor. Para ter acesso ao Visual Studio Code pelo terminal, você precisa executar mais um passo! Abra seu VS Code e na tela inicial abra o Command Palette ou usando o atalho Cmd+Shift+P e busque a opção Shell Command: Install


Prontinho, você já consegue acessar o Visual Studio Code pelo comando code no terminal.

Para abrir um projeto, na realidade você irá abrir alguma pasta do seu computador. Usando a opção Open Folder, você conseguirá abrir uma janela do Visual Studio Code exclusivamente para aquela pasta. Para você entender melhor o que estou dizendo, faça duas vezes o processo de Open Folder, usando pastas diferentes, e você verá que não acumula as pastas e sim abre janelas exclusivas para cada uma. Além do Explorer, que já ajuda muito a transitar entre arquivos, existe também uma forma rápida de alternar entre os arquivos abertos e que você está usando mais naquele momento. Para isso, clique Ctrl + Tab e irá aparecer uma janela com uma lista de arquivos abertos, para alternar entre eles, vá pressionando Tab até encontrar o arquivo que você deseja ter o foco, solte o Ctrl e pronto.

De acordo com a sua área de atuação e o projeto que você irá utilizar o Visual Studio Code, existe uma infinidade de extensões que podem te ajudar. Dentre elas:
• Live Server > Essa extensão é muito interessante para quando você precisa testar aqueles projetos Front End que tem HTML, CSS e Javascript.
• Prettier > é uma extensão que te ajuda a formatar e padronizar códigos! Tem suporte a algumas linguagens, como Typescript, JSX, Vue, Angular, CSS, GraphQL, Java, PHP, Ruby, entre outras.
• Code Runner > Com a extensão Code Runner você consegue rodar pedaços de código ou arquivos inteiros de diferentes linguagens dentro do próprio VS Code.
• ESLint > é uma ferramenta de análise de código, que busca por erros comuns ou quanto a padrões de escrita e te mostra onde eles estão no seu projeto para que você possa corrigir.
• Visual Studio IntelliCode > Essa é uma ferramenta de autocomplete para Python, TypeScript/JavaScript e Java, que combina as informações do seu contexto de código junto com inteligência artificial para deixar tudo ainda mais personalizado para o seu código, seu contexto e com isso aumentar sua produtividade.





Configurações
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.

Código:


    "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.

Ícones e Temas
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.