VisualStudio Code: instalação, teclas de atalho, plugins e integrações

Introdução

Preciso admitir que nos últimos dois anos, por mais que entre uma atualização ou outra alguma coisinha ficasse estranho eu praticamente não consigo me imaginar sem o VSCode. Eu uso ele como se fosse uma extensão do meu braço praticamente, isso é ruim quando estou pareando com alguém que usa outro editor… Mas enfim isso é assunto para um outro post, a ideia aqui é tentar passar um pouco de como o VsCode com suas features hoje me ajuda a ser produtivo ainda passando uma listinha de plugins e integrações que ele tem (Acredite, é possível codar em Java).

E se você quiser ver mais conteúdos meus, assim que terminar o post da uma conferida nos vídeos sobre JavaScript lá no meu canal no YouTube :)

Por onde começar?

Para baixar o editor basta acessar o site na área de download, o suporte hoje está bem bacana.

Muita gente pensa que o VsCode só é para Front Enders, mas isso é uma falácia, claro que cada linguagem possui uma ferramenta escolhida pela comunidade mas o VSCode se encaixa bem em vários casos como eu cito nessa sessão aqui do post.

Como começar e atalhos que farão você voltar nesse post no futuro

• Como buscar arquivos? Ctrl + P ou Command + P, é super útil para projetos grandes ou com muitos arquivos, quando eu trabalhei com Angular era o que me salvava.

• Como rodar comandos? Ctrl + Shift + P ou Command + Shift + P, eu uso bastante para rodar o comando para aplicar o lint no arquivo que estou trabalhando e para dar um force refresh quando sinto que alguma coisa no VsCode está travando.

• Como selecionar multiplas linhas?

• Com o mouse: Alt + Click ou option + Click
• Com as setas para cima e para baixo: Alt + Ctrl + Click ou option + Command + Click
• Como fazer só find para próxima ocorrência Ctrl + D ou Command + D, é sem dúvidas um dos comandos que eu mais uso no dia a dia, por facilitar alterações de coisas repetidas na página.

• Como fazer refatorações no código? F2 É o comando que eu mais tenho usado quando preciso alterar nomes de variáveis e funções, o mais legal é que o VSCode é bem espertinho para lidar com escopos e imports em outros arquivos (em boa parte dos casos).

• Como usar o terminal integrado? Hoje em dia é super comum precisarmos do terminal para tarefas como rodar testes, alguma tarefa de build e o VSCode possui um terminal integrado que pode ser bem útil para evitar muita troca de abas e aumentar a produtividade. Esse aqui eu vou deixar um link para a documentação, pois lá tem um tutorial bem mais legal de como trocar de terminal entre outros pontos.

Caso queira outras dicas, recomendo fortemente acessar a documentação do VsCode.

A integração com git é boa mesmo?

Confesso que durante muito tempo eu tinha o sonho de ser um ninja no Git, queria saber todos os comandos de cor e salteado; e ser o maior hackerman na hora de resolver conflitos e tudo mais, porém, o tempo vai passando e hoje em dia para ser mais produtivo, após ter consolidado minha base eu vou usando os recursos que o VsCode fornece para facilitar processos que eu já fazia por padrão:

Review pré commit

Hoje em dia eu acho bem mais fácil revisar todos os arquivos que eu mexi antes de fazer um commit dado a coloração que o VSCode faz em cima do que você apagou e do que foi adicionado, toma cuidado com esse recurso pq pode deixar bem mais difícil trocar de ferramenta em um futuro (e foi assim que eu não consegui me adaptar ao Web Storm).

Imagem direto da documentação do VSCode

Resolução de conflitos mais clara

Quem nunca resolveu conflito de merge errado que atire a primeira pedra. Eu já me perdi muito com isso e hoje usando o VSCode eu me sinto bem mais seguro, novamente a interface deles para interagir com processos do git brilha! Da uma olhada nessa imagem e já deixo o convite para testar com algum conflito que você pode estar resolvendo agora (ou mais tarde).

Imagem direto da documentação do VSCode

Suportes

• Flutter: Esse aqui é meu xodó, você pode até ver esse post que tem um vídeo meu mostrando como usar.
• JavaScript/TypeScript: Esse é sem dúvida o melhor suporte, acho que melhor que o VsCode para trabalhar hoje com JS só se você usar algo como o WebStorm.
• Java
• Go
• Python
• Clojure: Para clojure eu ainda prefiro o IntelliJ Community
• Extras:
  • Debugger: Se você trabalha com Back End e tem saudade de um debug maneiro, o VsCode conta com um suporte bem bacana para trabalhar com Node.JS, Java e várias outras ferramentas, só procurar como configurar

Plugins legais

No geral eu evito plugins, na época do sublime eu era muito viciado e acabei sofrendo quando formatei o computador e perdi tudo... Uma das vantagens do VSCode pra mim é ele ter muita coisa nativamente e eu praticamente não sentir a necessidade de colocar coisas extras, o que eu uso e que talvez faça sentido para você são as extensões abaixo.

• Quit Control: Essa extensão é OBRIGATÓRIA, caso você não queira se frustrar apertando Command + Q ou o equivalente no windows e perder o que você estava trabalhando.
• Git Lens: Esse plugin é basicamente um Git Blame integrado com o seu código, você consegue saber quem adicionou deterimnado código e quando, isso me ajuda muito a em caso de dúvida pingar a pessoa ou alguém que trabalhou junto.
• Gitignore: Esse aqui adiciona um suporte bacana para trabalhar com gitignore dentro da ferramenta, no geral você acaba usando em poucos momentos no projeto, mas commo eu falei que ia deixar tudo oque eu uso então ele segue na lista
• Quokka JS: Esse aqui eu uso para ter um feedback visual dos dados entre as variáveis que estou mexendo quando estou resolvendo problemas de maratona de programação.
• EsLint: Linter é vida e poder rodar ele usando o Command + Shift + P é uma maravilha e me deixa mais confortável do que ficar arrumando tudo manualmente, ou rodando o eslint via terminal.

Conclusão

Existe muita briga entre a linha do que é uma IDE e o que é um editor de texto, mas na prática o que faz diferença de verdade é o quão produtivo você é com a ferramenta. Para quem curtir outros editores ou quiser ver um pouco sobre tudo o que tivemos ao longo dos anos no desenvolvimento, da uma olhada neste episódio do Hipsters Ponto Tube que eu gravei junto com o Paulo Silveira.

Se você curtiu, não deixe de seguir minhas redes sociais procurando por @omariosouto e dar uma olhadinha no meu site que sempre ta saindo algo novo por lá https://mariosouto.com.br

Até a próxima :)