Dicas e truques do VSCode para usuários avançados

Por que eu gostaria de ser um usuário avançado do Visual Studio?

Tornar-se um usuário avançado é outra maneira de se manter à frente. Os desenvolvedores costumam falar sobre como se mantêm no topo de seu jogo e como aprendem constantemente coisas novas e continuam aprimorando suas habilidades. Essa é uma pergunta frequente em entrevistas, pois os empregadores tendem a preferir talentos dedicados a ampliar seu conjunto de habilidades. Dominar seu IDE e seu computador pode ser um dos melhores investimentos em seu desenvolvimento profissional.

Os desenvolvedores estão sempre procurando um novo blog que os torne melhores em seu trabalho. Seja qual for o IDE que você está usando, provavelmente tem um blog: Subscribe!

Outra razão é que ele simplesmente economiza tempo. Investir tempo na melhoria do seu fluxo de trabalho pode resultar em maior produtividade ou mais tempo para se divertir. Hoje, examinaremos mais de perto o Visual Studio e o VSCode e discutiremos maneiras de melhorar suas habilidades a ponto de se tornar um usuário avançado.

Como me torno um usuário avançado do VSCode?

Aqui está o que distingue um usuário comum de um usuário avançado :

• Conhecimento íntimo do seu IDE: o VSCode possui uma excelente documentação, leia!
• Personalização: os usuários avançados adaptam seu fluxo de trabalho para atender às suas necessidades específicas.
• Automatize todas as tarefas chatas e repetitivas.
• Melhore continuamente seu fluxo de trabalho e acompanhe a evolução do seu IDE.

Neste artigo, pretendo explicar como abordei cada um desses pontos e equipá-lo com o conhecimento para fazê-lo por conta própria. O que eu faço não necessariamente funcionará para você, pelo menos não totalmente. As pessoas trabalham em ambientes e projetos diferentes (para mim, está trabalhando principalmente com React.js e TypeScript no Windows), mas a abordagem geral é válida para todos.

Testando com Jest

Eu escrevo um teste de cada vez, o que significa que preciso de uma maneira de executar um teste de cada vez. No entanto, a solução regex nativa é bastante desajeitada. É por isso que eu uso Jest Runner. Essa extensão útil permite executar ou depurar suítes ou testes individuais.

O vídeo abaixo mostra que tudo que você precisa fazer é clicar com o botão direito do mouse no nome do teste e usar o menu de contexto para executá-lo.

Testando com Pacto

A parte mais demorada de escrever um teste de contrato é, sem dúvida, a correspondência. Resolvi isso criando trechos úteis para automatizar ações repetitivas. Estes são alguns que eu fiz, sinta-se à vontade para usá-los (ou seja, basta copiá-los e colá-los no /snippets/typescript.json do /snippets/typescript.json ).

O vídeo abaixo mostra como usar esses snippets:

1. Selecione todas as ocorrências do mesmo tipo, ou seja, selecione todas as strings, hora e outros valores.
2. Use a combinação de teclas predefinida ou invoque Insert Snippet e selecione o snippet relevante ou apenas comece a digitar o prefixo do snippet que deseja usar.

Git

A maioria dos desenvolvedores usa o Git e o GitHub diariamente, e eu também. No entanto, tento evitar usar o terminal ou o github.com.

O GitHub Pull Requests and Issues me permite abrir, editar e revisar PRs no conforto do VSCode. Acho meu IDE um lugar melhor para revisar o código do que os aplicativos web ou desktop do GitHub. Alguns desenvolvedores podem discordar, mas eu aprecio a consistência e o conforto de fazer isso no meu IDE.

O Git pode fazer muito, mas memorizei tão poucos de seus comandos. Mas por que memorizar qualquer coisa em primeiro lugar? Memorizar muitos aspectos granulares de sua rotina não é muito produtivo.

O GitLens expõe uma infinidade de recursos incríveis ao seu alcance. Graças a isso, raramente preciso acessar o terminal para usar o Git.

Personalização de terminais

Independentemente do sistema operacional que você usa, você pode fazer melhor do que o terminal padrão. Estou usando o Windows Terminal + cmder. Se você for um usuário Unix, procure iTerm (macOS) ou Oh My Zsh (Linux e macOS). Eu os integrei ao VSCode e adicionei muitos aliases (atalhos) que me poupam tempo de escrever comandos.

Por exemplo:

• ys = yarn start - me ajuda a iniciar um aplicativo com apenas dois caracteres
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - exclui o diretório fornecido e mostra uma mensagem de sucesso quando terminar
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - exclui todos os branches locais, exceto master

Salvar alguns caracteres aqui e ali pode parecer bobo, mas esses recursos de economia de tempo aumentam a longo prazo. Acho uma vantagem secundária em fazer aliases — gastar menos tempo digitando-os me ajuda a manter o foco e não perder minha linha de pensamento porque não estou tentando lembrar como invocar o comando.

Geração de código

Criar um novo componente, página, etc. é algo que faço com frequência e é bastante simples, como a maioria dos leitores saberá. Mas criar uma nova pasta e inicializar arquivos nela pode ser tedioso. Então, eu automatizei esse processo.

O vídeo abaixo mostra o Supercharge React em uso. Usando New Component , posso especificar o nome e o local do novo componente. A extensão então executa um script que cria uma pasta e inicializa esse novo componente.

IntelliSense

O VSCode possui o poderoso IntelliSense e, na maioria das vezes, você não precisa pensar em usá-lo. No entanto, ao navegar pelas sugestões, você pode pressionar Ctrl+Espaço para ver a documentação sobre cada opção disponível.

O IntelliSense pode ser personalizado adicionalmente para se adequar ao seu fluxo de trabalho e preferências pessoais.

Atalhos do teclado

Tenho certeza que você usa atalhos como Ctrl+S e Ctrl+F . Eles estão todos bem documentados e, se você não estiver muito familiarizado com a vasta gama de atalhos do VSCode, exorto-o a mudar isso e fazer um esforço extra para dominá-los. Uma certa ligação é muito desajeitada? Um comando que você invoca muitas vezes demora muito para ser digitado? Abra o editor de teclado do VSCode para criar atalhos.

Se você está se perguntando se um comando foi atribuído a uma determinada combinação de teclas, clique no botão do teclado na barra de pesquisa, onde você pode gravar pressionamentos de tecla. Você verá então comandos what/if foram associados a eles.

Atalhos do mouse

Os desenvolvedores costumam ouvir que, para serem produtivos, eles precisam aprender a odiar o mouse e amar o teclado . Isso pode ser válido se você estiver trabalhando em arquivos pequenos e densos. Mas em uma era de formatação automática de código e arquivos que contêm centenas de linhas de código, eu diria que isso é mais uma exceção do que a regra.

Não só uso meu mouse ativamente, mas também o personalizei para se adequar ao meu fluxo de trabalho usando as Opções da Logitech. Programei as teclas especiais do meu mouse para executar determinados comandos no VSCode.

Aqui está como você pode “ensinar” seu mouse a fazer um pouco mais do que simplesmente mover o cursor e clicar:

1. Selecione VSCode no menu superior direito.
2. Clique no botão que deseja personalizar.
3. Selecione Atribuição de pressionamento de tecla na lista de ações à esquerda.
4. Insira um atalho predefinido no VSCode.

Configurações de backup e sincronização

Não há muito sentido em personalizar algo se você não puder fazer backup e reutilizá-lo sempre que precisar novamente.

A solução nativa está disponível apenas para insiders no momento. No entanto, o Settings Sync ajuda você a salvar suas configurações de código como um Gist e permite sincronizar seu fluxo de trabalho entre várias máquinas. Você precisa de um token do GitHub para configurá-lo, mas depois, basta executar um único comando para fazer upload e download de suas configurações.

Extensões VSCode recomendadas

Já mencionei várias extensões e expliquei como as uso. Aqui estão algumas menções notáveis:

• Surround: Precisa envolver algum código selecionado em uma função de seta ou talvez um bloco try-catch? Esta extensão fará isso por você!
• Pesquise node_modules: Mesmo que você não tenha excluído node_modules do explorador do VSCode para aumentar o desempenho, essa pasta é tão grande que é impossível navegar. Esta extensão permite que você pesquise o que estiver procurando, em vez de rolar infinitamente.
• Glean e React Refactor fornecem algumas ferramentas úteis de refatoração para seus arquivos JSX.
• Auto Close Tag adiciona automaticamente a tag de fechamento para arquivos HTML/JSX/TSX.
• File Utils: Uma maneira conveniente de criar, duplicar, mover, renomear e excluir arquivos e diretórios. Também é personalizável.
• O JavaScript Booster automatiza algumas ações comuns de refatoração.

Resumo

Não seja um usuário comum. Seja um usuário avançado em vez disso. Sempre vá um passo além dos outros e veja onde isso o leva. Sempre tome nota das ineficiências e tente mitigá-las.

Minha solução para isso deve ser familiar para a maioria dos desenvolvedores: um quadro Kanban . Toda vez que noto algo que me atrasa, escrevo como uma tarefa. Sempre que tenho algum tempo de sobra, tento encontrar uma solução para isso.

Se você achou este post esmagador e não sabe por onde começar, leia os documentos, ele lhe dará o melhor ROI ! Eu sei que ler a documentação oficial parece chato, mas prometo que valerá a pena a longo prazo. Não só vai te ensinar como ser mais produtivo, mas você vai aprender como a documentação deve ser escrita.

Para facilitar, compilei esta lista de partes obrigatórias dos documentos:

• Dicas e Truques: Alguns são óbvios e você provavelmente já sabe, embora eu possa garantir que você encontrará algo que não conhecia.
• Hacks de edição: Esses hacks de edição são incrivelmente poderosos e aprendê-los irá beneficiá-lo diariamente.
• Encolher/Expandir Código: Experimente este atalho quando estiver emparelhando com outro desenvolvedor, para impressioná-lo!
• Atalhos de teclas: Aprenda como os atalhos de teclado funcionam e como personalizá-los, é um dos pilares para dominar seu IDE.
• Centenas de linguagens de programação suportadas: Saiba quais recursos específicos o VSCode possui para o idioma escolhido.