10 Dicas para Dominar o Visual Studio Code e Aumentar sua Produtividade

O Visual Studio Code destaca-se como um dos editores de código mais eficientes disponíveis atualmente. Para muitos desenvolvedores, ele superou o Sublime Text como a ferramenta de escolha. Desenvolvido com base em JavaScript e na plataforma Electron, este aplicativo demonstra uma notável agilidade e desempenho, contrariando a reputação de lentidão frequentemente associada a aplicações baseadas em JavaScript.

Para aqueles que questionam sua natureza, o VS Code é um projeto de código aberto, com seu código-fonte acessível no GitHub. A seguir, apresentamos algumas dicas fundamentais que podem otimizar seu fluxo de trabalho e aumentar sua produtividade ao usar o Visual Studio Code.

1. Explore a Paleta de Comandos

Similar ao Sublime Text (e ao TextMate antes dele), o VS Code incorpora a paleta de comandos. Este recurso permite o acesso a diversos comandos por meio da simples digitação, eliminando a necessidade de navegar pelos menus com o mouse.

A paleta de comandos pode ser ativada através do atalho de teclado Ctrl + Shift + P (ou Cmd + Shift + P). Basta começar a digitar o comando desejado (por exemplo, “salvar”) para que as opções sejam filtradas em tempo real. Alguns comandos são organizados em categorias como “Arquivo”, “Git” e “Terminal”, facilitando sua localização.

2. Defina um Diretório de Trabalho

Ao clicar no ícone do Explorer na barra lateral, um novo painel é exibido. Este painel é composto por duas seções (pode ser necessário clicar no menu de três pontos e selecionar “Abrir Editores” para vê-lo): “Editores Abertos” (arquivos e documentos atualmente em uso) e “Nenhuma Pasta Aberta”. É esta última que nos interessa.

Ao clicar em “Abrir Pasta” (ou navegando até Arquivo > Abrir Pasta na barra de menu), selecione um diretório no seu sistema. Isso o define como o “projeto de trabalho atual” no VS Code, facilitando o acesso a todos os arquivos e subpastas, eliminando a necessidade de alternar entre o editor e o explorador de arquivos.

3. Visualize Vários Arquivos Simultaneamente

A maioria dos editores modernos permite trabalhar com múltiplos arquivos simultaneamente, alternando entre eles por meio de uma interface de abas. Editores mais avançados oferecem edição lado a lado, recurso também disponível no VS Code (ainda que apenas horizontalmente).

A edição lado a lado pode ser limitada em telas menores, como laptops ou monitores mais antigos. É aqui que o VS Code se destaca com seus painéis dinâmicos. Se um painel de documento aberto for muito estreito, ele se expande automaticamente ao ser ativado (ao colocar o cursor nele). Usuários com resoluções próximas a 720p apreciarão bastante este recurso.

4. Edite Múltiplas Linhas Simultaneamente

Se necessitar inserir ou remover trechos de texto em várias partes de um documento, pode criar múltiplos cursores. Isso é feito mantendo a tecla Alt (ou Option no Mac) pressionada e clicando em diferentes partes do texto. Cada clique adiciona um novo cursor.

Este recurso é especialmente útil em HTML, onde pode precisar adicionar várias instâncias da mesma classe ou modificar o formato de vários hiperlinks. Aprenda a utilizá-lo e otimize seu trabalho.

5. Navegue para a Definição

Ao programar, frequentemente nos deparamos com variáveis ou métodos desconhecidos. Em vez de gastar tempo procurando manualmente, selecione a variável/método com o cursor e pressione F12 para ir diretamente à sua definição. Outra opção é selecionar a função ou variável e pressionar Ctrl ou Cmd, seguido de um clique, para acessar a definição.

Alternativamente, use o atalho Alt + F12 (ou Cmd + F12) para visualizar a definição em linha, sem abrir o arquivo de origem. Para navegar na direção oposta, selecione uma variável ou método e use o atalho Shift + F12 para encontrar todas as referências a ele, também exibidas em linha.

Para que esses recursos funcionem corretamente, é essencial abrir o diretório de trabalho apropriado (conforme a dica nº 2).

6. Renomeie Todas as Ocorrências

A refatoração é fundamental para manter a qualidade do código, mas pode ser trabalhosa, especialmente em projetos extensos. Em vez de procurar manualmente por múltiplas ocorrências de uma variável ou método, deixe o VS Code realizar essa tarefa por você.

Ao selecionar uma variável/método e pressionar F2, pode editar o nome, e isso atualizará automaticamente todas as instâncias no projeto atual. Se deseja alterar apenas no arquivo atual, use Ctrl/Cmd + F2 para criar um cursor em cada ocorrência.

7. Pesquise em Múltiplos Arquivos

Se trabalhar com arquivos que não são de código, os recursos de localização de símbolos (dica nº 5) não estarão disponíveis. Nesses casos, pode usar a função de busca padrão.

Ctrl/Cmd + F permite pesquisar no arquivo atual, enquanto Ctrl + Shift + F (ou Shift + Cmd + F) possibilita a pesquisa em todos os arquivos do projeto, incluindo subpastas.

8. Utilize a Linha de Comando no VS Code

O VS Code oferece um terminal integrado. No Windows, este é o prompt de comando; no macOS e Linux, o terminal Bash. Ele é iniciado no diretório do projeto atual ou, caso não haja, na pasta pessoal do usuário.

É possível ter múltiplos terminais independentes. Use o botão de adição (+) no canto superior direito para abrir novos terminais e o ícone da lixeira para fechar os atuais. O menu suspenso facilita a alternância entre eles.

9. Instale um Novo Tema no VS Code

O VS Code permite personalizar o tema da sintaxe de texto e código. Embora não permita alterar a interface em si, a personalização da sintaxe é crucial. Um bom tema pode aumentar a produtividade mais do que imagina.

Pode encontrar novos temas no Mercado de código VS (gratuitos) ou pesquisar diretamente no VS Code. Consulte recomendações de temas para o VS Code.

10. Instale Extensões de Terceiros

A extensibilidade do VS Code através de extensões de terceiros é uma de suas maiores vantagens. Assim como os temas, as extensões estão disponíveis no Mercado de código VS (gratuitamente) ou podem ser encontradas diretamente no VS Code. O painel de extensões pode ser acessado pelo atalho Ctrl + Shift + X (ou Shift + Cmd + X).

As extensões são fundamentais para otimizar sua produtividade. Há diversas ferramentas disponíveis, incluindo linters, depuradores, snippets, melhorias na interface do VS Code e até mesmo extensões que utilizam o ChatGPT para auxiliar na programação.

Visual Studio Code: Uma Excelente Ferramenta

Embora seja amplamente elogiado, o VS Code não é perfeito para todos. É importante lembrar que ele é um editor de texto, não um IDE completo. Recomendamos que o experimente com a mente aberta. Acreditamos que suas funcionalidades podem surpreendê-lo.