Visual Studio Code

Uma das decisões que precisamos tomar antes mesmo de iniciar o desenvolvimento dos nossos códigos é qual Editor de Texto utilizar para desenvolver e escrever meus códigos? Hoje em dia existem diversas opções, entre elas temos o Atom, Sublime Text, Notepad++, Brackets, Visual Studio Code, entre outros.

O VSCode que tem se tornado muito popular no meio dos desenvolvedores, por isso o utilizaremos nesse artigo.

O Visual Studio Code é um editor de texto, desenvolvido pela Microsoft e que facilita bastante no momento de desenvolvimento e, um dos motivos dessa facilidade, são as extensões que temos disponíveis dentro dele.

Um cuidado que temos que ter ao realizar a instalação é que a Microsoft possui dois produtos com nomes bem similares: o Visual Studio e o Visual Studio Code. Nós iremos utilizar o Visual Studio Code, que é o Editor de Texto.

Instalação

Você pode baixar o VSCode diretamente do site. Clique aqui para acessar o site.

Ao acessar o site, do seu lado esquerdo terá a opção pra você selecionar o seu sistema operacional. Geralmente o site já detecta seu sistema operacional automaticamente. Mas caso ele não reconheça, basta seguir o passos conforme imagem abaixo.

Após baixar o pacote correto para o seu Sistema Operacional, basta você abrir ele.

Primeiro contato com VS Code

Supondo que você já tenha o editor instalado, ao abri-lo pela primeira vez, irá se deparar com a imagem abaixo: uma página de boas vindas. Desmarque no canto inferior esquerdo a opção Show welcome page on startup e feche a aba Welcome.

Em seguida, aperte Ctrl + J para mostrar o painel inferior do Visual Studio Code. Nesse momento, você deve conseguir visualizar dois blocos importantes do VSCode: a sidebar (vermelho) e o painel (azul). Simbora conhecê-los um pouco mais.

Painel

O Painel reúne 4 funcionalidades, sendo a mais importante o Terminal:

• Problems: Agrupa e apresenta alguns problemas que o seu código possui, informando a mensagem do erro, a linha e o que está acusando o erro (ex.: ESLint, Prettier).
• Output: Agrupa e apresenta o output de diversas coisas, principalmentes extensões (ex.: ESLint, Settings Sync). Muito útil para debuggar o funcionamento do ESLint e da integração VSCode + Git.
• Terminal: Definitivamente a parte mais importante do painel. É aqui que você pode trabalhar diretamente com o seu Terminal dentro do VSCode! Ele ainda inclui algumas funções úteis como o split de terminais na mesma janela ou a adição de novos em outras abas.
• Debug Console: Centraliza e apresenta as informações relacionadas ao processo de Debug do VSCode.

Nos próximos seis tópicos, vou explicar um pouco sobre algumas seções do VSCode, o que elas são e para que serve. Mas caso você queira pular, pode ir diretamente para as extensões, onde iremos mostrar algumas extensões que costumamos utilizar

Sidebar

A Sidebar reúne (inicialmente) 5 funcionalidades importantes do Visual Studio Code. Ao instalar algumas extensões, serão adicionados novos elementos na barra.

Explorer

Essa a opção que você vai mais utilizar, basicamente porque ela é a responsável pelo gerenciamentos dos arquivos do seu projeto. É nela que você consegue visualizar e editar todos os arquivos, verificar quais abas do editor estão abertas e outras coisas como Outline (classes, métodos e variáveis presentes no arquivo) e Timeline (commits relacionados ao arquivo).

Search

Responsável por fazer exatamente o que o nome diz: realizar uma pesquisa em todo o seu projeto (exceto arquivos ignorados como a node_modules). Nele é possível buscar utilizando filtros e RegEx. Além disso, é possível substituir as palavras encontradas por outras de acordo com a sua necessidade, basta informar no campo Replace.

Source Control

O Visual Studio Code, por padrão, tem uma integração fantástica com o Git. Nessa aba, podemos usufruir da maioria dessas funcionalidades. Monitorar as alterações dos arquivos, realizar commits, pull e pushes e gerenciar os branches são algumas delas.

Run (Debug)

Umas das funcionalidades mais interessantes do VSCode é a sua capacidade de realizar o debugging do código. Eu sei que o console.log() é um amigão, mas as vezes você precisa de mais armamento para encontrar o erro. Com o Run(Debug), você consegue inspecionar a fundo o seu código, como o caminho que ele percorre (stacktrace) e os valores que as variáveis assumem durante esse caminho.

Extensions

Por fim, mas não menos importante, temos a aba de Extensões. Pense nela como uma store, onde você é capaz de pesquisar pelas extensões por nome, popularidade, avaliações e também gerenciar as que você instalou. É por aqui que você vai deixar o seu VSCode equipado com as melhores ferramentas para dar um boost(impulso) na sua produtividade, então nas próximas seções vamos focar nas extensões que recomendamos.

Dracula

Nada melhor do que começar pelo tema do editor. Nós desenvolvedores trabalhamos diariamente, horas e horas, com o editor de código. Por isso, é muito importante escolher uma aparência para o Visual Studio Code que não canse demais os olhos e ao mesmo tempo realce bem o texto. É por isso que a minha recomendação para você é o tema: Drácula 🧛‍♀️

Drácula Theme

Como instalar? ⬇️

Material Icon Theme

O Material Icon Theme é uma extensão que permite a customização dos ícones das pastas por extensões de arquivos, por exemplo, com ele conseguimos customizar um ícone para arquivos typescript, outro para javascript, outro para hml e assim por diante.

Como instalar? ⬇️

Fira Code

Apesar de não ser um tema, e sim uma fonte, acaba entrando no quesito do conforto visual que mencionamos acima. Fira Code é uma fonte que gostamos bastante, não só pelo seu padrão mas por também suportar as font ligatures. (aqueles efeitos especiais que dá nos símbolos do seu código).

Para configurá-las, primeiramente é preciso tê-las instaladas na sua máquina. No link abaixo temos as instruções para download e instalação.

tonsky/FiraCode

A partir daí, aperte as teclas Ctrl + Shift + P e escolha a opção Open Settings (JSON). Será apresentado um arquivo das suas configurações pessoais personalizadas em formato JSON.

Com isso, basta adicionar e salvar as seguintes opções:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 16,

E pronto, o seu editor já estará com as font ligatures da Fira Code habilitadas.

No final a uma seção apenas com extensões que podem lhes interessar, com foco em produtividade e também com aquele cheirinho de perfumaria.

Configurando o arquivo Settings.json

Nesse tópico, nós veremos algumas configurações que podemos utilizar no nosso VSCode, como elas funcionam e o que muda com a inserção delas.

"explorer.compactFolders": false, ⇒ Essa é uma propriedade que está no VSCode desde novembro de 2019 e quem como objetivo compactar folders filhos únicos dentro da pasta pai.

"editor.renderLineHighlight": "gutter", ⇒ Essa propriedade seleciona a linha apenas no canto esquerdo da página, ao invés de selecionar a linha completa.

"workbench.editor.labelFormat": "short", ⇒ Permite a visualização da pasta onde o arquivo aberto está.

"extensions.ignoreRecommendations": true ⇒ Ignora as recomendações de extensões do próprio editor.

"javascript.updateImportsOnFileMove.enabled": "never", e "typescript.updateImportsOnFileMove.enabled": "never", ⇒ Caso você tenha um arquivo X sendo importado em um arquivo Y, se o arquivo X for alterado de pasta, com a opção never o VSCode não tentará arrumar a importação, de forma automática.

"breadcrumbs.enabled": true, ⇒ Mostra a "árvore de pastas".

"editor.parameterHints.enabled": false, ⇒ Desabilita as dicas de documentação.

"explorer.confirmDragAndDrop": false, e "explorer.confirmDelete": false ⇒ Caso você venha a mudar uma pasta de lugar ou deletar, será feito de forma automática sem confirmação.

"editor.rulers": [80, 120] ⇒ Define as regras de caracteres máximo por linha. "editor.semanticHighlighting.enabled": false ⇒ Evita que o editor adicione cores em variáveis de acordo com seu tipo, permanecendo apenas as cores padrões do tema.

— — — Bonus — — —

Algumas extensões que podem interessar para adicionar ao seu VsCode.

Color Highlight

Mostra visualmente a cor que o código representa (HEX, RGB, HSL, etc).

Color Highlight — Visual Studio Marketplace

Docker

Facilita a criação, gerenciamento e debug dos containers do Docker.

Docker — Visual Studio Marketplace

DotEnv

Adiciona ao VSCode o suporte à sintaxe de arquivos dotenv.

DotENV — Visual Studio Marketplace

EditorConfig

Adiciona ao VSCode o suporte à sintaxe de arquivos EditorConfig. Adiciona também a funcionalidade de rápida criação do arquivo de configuração.

EditorConfig for VS Code — Visual Studio Marketplace

ESLint

Integra o ESLint ao Visual Studio Code.

ESLint — Visual Studio Marketplace

GitLens

Adiciona funcionalidades extras do Git que a integração padrão do Visual Studio Code não cobre.

GitLens — Git supercharged — Visual Studio Marketplace

Liver Server

Executa um servidor local a partir do VSCode. Suporta live reload e páginas estáticas/dinâmicas.

Live Server — Visual Studio Marketplace

Live Share

Permite a colaboração em tempo real entre desenvolvedores. Múltiplos clientes tem acesso ao código (edição e leitura), instâncias do terminal, sessões de debug e diversas outras funcionalidades.

Live Share — Visual Studio Marketplace

Project Manager

Permite a fácil troca entre projetos diretamente pelo Visual Studio Code.

Project Manager — Visual Studio Marketplace

Rocketseat Snippets

Pensando na praticidade e produtividade dos desenvolvedores que trabalham com React, a Rocketseat desenvolveu duas extensões que contêm diversos snippets para dar um boost nas suas aplicações ReactJS e React Native.

Rocketseat ReactJS — Visual Studio Marketplace

Rocketseat React Native — Visual Studio Marketplace

Styled Components

Adiciona ao VSCode o suporte à sintaxe de arquivos styled-components.

vscode-styled-components — Visual Studio Marketplace

WakaTime

Essa extensão realiza diversas medições do seu uso do VSCode. Horas por projetos, linguagens mais utilizadas e médias diárias são algumas das métricas que ela disponibiliza.

Ela pode te auxiliar desde a medição das horas estudadas em cada curso até a cobrança das horas trabalhadas naquele freela. Basta criar uma conta no site, baixar a extensão e logar.

WakaTime

WakaTime — Visual Studio Marketplace

Atalhos do Teclado

Ctrl + c (Copy)

Ctrl + x (Cut)

Ctrl + B (Side Bar)

Ctrl + D (Next selection)

Alt + Left Click (Multiple cursors)

Alt + Up or Down (Move line)

Ctrl + Shift + Alt + Up or Down (Copy line)

Ctrl + Shift + ` (Toggle integrated terminal)

Salvando suas configurações na nuvem

Para finalizar, que tal instalar uma extensão que vai salvar todas as extensões e configurações do seu Visual Studio Code em um gist na sua conta GitHub? Isso mesmo, você vai ter que configurar todos esses processos só uma vez, nas outras instalações basta instalar essa extensão, logar na sua conta, escolher o gist de backup e pronto, ela vai fazer todo o resto!

Apesar de simples, é importante verificar se as configurações estão de acordo com o que você quer (auto upload, auto download, etc.). Para isso, basta apertar Ctrl + Shift + P e digitar Sync para ter acesso às configurações da extensão. Recomendamos escolher a opção Sync: Advanced Options e em seguida a Sync: Open Settings. Nesse momento, será apresentada uma janela com todas as suas configurações da extensão.

Settings Sync — Visual Studio Marketplace