Neste artigo, vou falar sobre alguns recursos que os Editores de código e em especial o VS CODE, possuem que podem ser muito úteis para melhorar os tempos de desenvolvimento, depuração e a aderência a padrões de codificação, que podem melhorar muito o desempenho como programadores, realizando tarefas de manutenção e edição do código, bem como extensões específicas que podem melhorar a aderência do editor para uma ou para outra linguagem ou mesmo para toda a pilha de desenvolvimento usada pela equipe. Usar um editor como o VS CODE pode ser muito útil, principalmente por diminuir muito a curva de aprendizagem de diversos ambientes e ferramentas para desenvolvimento em linguagens e plataformas diferentes.
Eu tenho usado o VS Code como meu IDE principal por alguns anos, embora demorei algum tempo antes de começar a USA-LO EFETIVAMENTE, no meu primeiro contato com ele, eu estava simplesmente aproveitando o realce de sintaxe, sugestões de código e alguns Snippets para algumas construções da linguagem ou do framework que utilizava. Então, um dia depois de atualizá-lo, e estar buscando uma funcionalidade em um outro IDE, acabei por ler uma parte do Guia de Introdução e descobrir que o que eu procurava a uns 20 minutos estava ali, bem na minha frente, e eu simplesmente não sabia. Nesse momento passei a entender e usar uma parte do meu tempo para aprender a efetivamente utilizar todos os seus recursos.
Snippets de código – Gerais e Definidos Pela Linguagem
Snippets ou Trechos de código são modelos de código que você pode reutilizar em projetos, ou trechos estruturais que você utiliza com muita frequência, por exemplo, se você constantemente tem que declarar uma classe, você pode criar um snippet que cria o esqueleto, e configura-lo para com o uso de variáveis, ele se adaptar a realidade atual. Ao definir o snippet, o código que repete com frequência aparece como sugestões de código, ou você pode criar atalhos, ou seja, ao digitar o atalho ele será incluído.
Por exemplo, se você costuma criar um loop para iterar arrays, pode criar um snippet para isso, de forma que nunca precise digitá-lo novamente. No VS CODE, os snippets podem ser definidos para projetos locais ou globais em todos os projetos, ou podem ser definidos para certas linguagens de programação, e você pode por exemplo, usar um mesmo snippet em linguagens diferentes, usando o exemplo anterior, você pode usar um atalho :IteraArray que cria o snippet, e digamos que você usa esse mesmo treçho no PHP e no JAVASCRIPT e também no PYTHON, ao digitar o atalho, o VS CODE já tendo a identificação da linguagem insere o trecho correspondente.
Você também pode encontrar extensões que criam trechos de acordo com a linguagem, dentro da loja de extensoes, porém, você pode definir suas próprias, eu uso esses snippets geralmente para evitar a repetição de padrões comuns continuamente escritos, para me ajudar a lembrar como fazer certas coisas como atalhos para documentação de arquivos, de funções, de classes e métodos. Comece a construir sua biblioteca de trechos enquanto codifica e logo você agradecerá pela facilidade em que elas emolduram seu trabalho agregando muita velocidade de desenvolvimento reduzindo muito a quantidade de digitação de código.
Pesquisar por “snippets” na loja de extensões, você também pode especificar palavras-chave para apurar a pesquisa. Entretanto, criar seus próprios é a maneira mais eficiente e produtiva. Você pode criar um facilmente, basta entrar no menu Arquivo-> Preferências-> Trechos do Usuário, Selecione o snippet que deseja criar, local ou global por projeto ou workspace, e nomeie-o. Por exemplo, o seguinte Trecho, define um atalho para a documentação de um arquivo em PHP:
"php7":{
"prefix":":php7",
"body":[
"/**",
" * BRASAP ARTIGO DE TESTE, DEMO DE UM SNIPPET",
" * php version 7.4.3",
" * ",
" * @category PHP_SimplifiedSnippetSample",
" * @package BRASAP",
" * @author Romeu Gomes de Sousa <[email protected]>",
" * @license GNU GPL 3.0 - Livre uso e Distribuição",
" * @version GIT: ",
" * @link https://brasap.com.br",
" */",
"",
"${1:CODE_HERE}",
"?>"
],
"description":"Insere o esqueleto de um Arquivo PHP7 BRASAP CURSO"
},
Para que o SNIPPET seja inserido automaticamente para um workspace, você deve ter dentro da pasta do workspace, um ou mais arquivos com a extensão .code-snippets onde o nome do arquivo, pode corresponder ao nome da linguagem usada, ou outro que o desenvolvedor deseje, o arquivo é um JSON onde são criadas algumas definições, para que o VS CODE identifique o escopo, e o tipo de snippet. Veja abaixo algumas definições que fazem com que o seu snippet seja apresentado dentro dos escopos corretos:
prefix – Identifica o atalho que será usado para inserir o trecho, scope – Identifica o nome ou nomes das linguagens como registradas no VSCODE para usar um snippet prṕprio para uma ou outra linguagem, body – O trecho que será inserido, cada linha deve ser também uma linha no json, como mostrado no trecho acima, você pode inserir variáveis que serão realçadas para ao pressionar a tecla TAB você poder substituir os valores mais comuns. E por fim description – que é uma descrição apresentada na caixa de atalhos e de sugestões. Para inserir uma variável, você pode usar ${1:NOME_VAR}, e pode usar quantas forem necessárias basta adicionar ${2:NOME_VAR2} e assim sucessivamente.
Depois de inserir o JSON no seu arquivo de snipetts salve-o e se você abrir qualquer arquivo de um dos tipos definidos e digitar o atalho, deverá ver o trecho como uma sugestão, se você trabalha em múltiplos projetos pode ser um pesadelo, por exemplo lembrar como uma definição padrão de erro ou uma chamada a um determinado trecho ocorre, isso é muito comum, pelo menos comigo, e como geralmente a criação deste trecho de código é a mesma, e eu sempre o redigitava, e sempre esquecia exatamente como, e perco alguns minutos para abrir um projeto antigo e ver como é a estrutura correta do que fiz, nesse caso um simples snippet, me rende um ganho enorme de tempo. Eu tendo a usar esses trechos não apenas para armazenar partes de código comuns, mas como uma coleção de memória de como executar certos algoritmos ou processos me poupando tempo, dinheiro e frustração.
REFATORAÇÃO DE CÓDIGO (refatoring)
A refatoração de código-fonte pode melhorar a qualidade e a capacidade de manutenção de seu projeto, reestruturando seu código sem modificar o comportamento em tempo de execução, o Visual Studio Code oferece suporte a operações de refatoração (refatorações), como Método de Extração e Variável de Extração, para melhorar sua base de código de dentro de seu editor.
As refatorações são fornecidas por um serviço de linguagem e o VS Code possui suporte integrado para refatoração TypeScript e JavaScript para as demais linguagens o suporte de refatoração é fornecido por meio das extensões do VS Code, que contribuem com serviços de linguagem. A INTERFACE e os comandos para refatoração são os mesmos em todas as linguagens e você pode utiliza-los. O próprio editor já cria o esboço e faz todas as alterações, e os fragmentos do código-fonte podem ser extraídos para um novo método ou para uma nova função em vários escopos diferentes. Durante a refatoração da extração, você será solicitado a fornecer um nome significativo.
Renomear é uma operação comum relacionada à refatoração do código-fonte e o VS Code tem um comando separado Renomear Símbolo ( F2 ). Alguns idiomas oferecem suporte para renomear símbolo em arquivos, outros não, porém ainda assim os métodos de busca global podem ser usados se a sua linguagem não possui suporte no VS-CODE. Pressione F2 , digite o novo nome desejado e pressione Enter . Todos os usos do símbolo serão renomeados nos arquivos e funções de maneira automática.
Esse processo é muito comum na minha rotina, principalmente porque algumas vezes vemos códigos que não seguiam os atuais padrões definidos, e como trabalhamos com muitos projetos simultaneamente, e alguns deles precisam ser retrabalhados e variáveis, métodos e funções precisam ser renomeados ou refatorados e as ferramentas do editor, ajudam muito neste quesito, já que muitas vezes são chamadas em diversos lugares e arquivos diferentes, renomeando a ocorrência da palavra em vários arquivos, localização e substituição simples. Você pode acompanhar se os comentários devem ou não ser alterados, apenas as instâncias de código, e mesmo revisar cada substituição e aceitá-las ou não. Na minha experiência, o F2 faz um trabalho perfeito em encontrar as peças certas.
Seleção de vários cursores (ALT + Clique) (Shift + ALT + PARA CIMA / PARA BAIXO no teclado)
O Código VS tem algo chamado Seleção de Cursores Múltiplos. O que isso significa é que podemos ter vários cursores aparecendo ao mesmo tempo. Você pode escrever em dois lugares ao mesmo tempo, mantendo pressionado alt e clicando nos locais que deseja editar você digitará em todos os cursores marcados.
Este recurso sozinho não tem muita utilidade, porém, se você já precisou editar ou alterar por exemplo todas as ocorrências de uma função, ou editar o nome de várias variáveis declaradas com um prefixo ou sufixo, ou mesmo grandes blocos de texto ou de código podem ser editados. Podemos combinar o multi cursor com a seleção de palavras
Resumo de Símbolos e Esboço
Um esboço é uma visualização de parte do código em um arquivo, pode ser bom ter uma ideia rápida do que está em um arquivo, sem ter que procurar por tudo. O VS Code mostra a estrutura do código em uma boa renderização, basta usar o comando ctrl + shift + o e podemos ver uma lista de itens delineados e pular entre esses itens. Isso é útil para navegação rápida em grandes bases de código ou arquivos. Pressionar o comando de atalho abrirá um prompt de pesquisa que você pode usar para pesquisar a função desejada, estrutura, dependendo da linguagem outras estruturas podem ser visualizadas como métodos, classes etc. Para tornar ainda mais fácil, você pode adicionar o simbolo @ na pesquisa para agrupar por categoria. Isso torna a visualização da estrutura do código em um arquivo ainda mais fácil.
Costumo usar isso com muita frequência em novas bases de código para ter uma noção do que está presente em um arquivo, em vez de rolar às cegas. Indo direto a função ou parte que preciso, o que me gera uma economia de tempo ao navegar pelo código.
Rolagem rápida segurando ALT
Este truque não requer uma grande explicação, é apenas um pequeno recurso que, uma vez que o aprendi, me lembrei de todas as vezes que precisei dele no passado. Mantenha pressionada a tecla ALT e role o seu código, ele vai rolar mais rápido, por padrão, o VS CODE rola 5x mais rápido, mais isso pode ser configurado em “editor.fastScrollSensitivity”: 5 você pode definir qualquer valor entre 1 e 100, ele vai multiplicar o número de linhas roladas por este valor, por exemplo se sem o alt eram roladas 5 linhas, com o alt ele vai rolar 25 linhas.
Configurações do Workspace de Projeto
Se você já trabalhou com projetos diferentes, para clientes diferentes, e que usem definições diferentes da base de código, você já deve ter passado pelo pesadelo das configurações de ambiente diferentes, algumas delas podem ser por exemplos as definições do uso de TAB ou SPACES para a edentação do código, número de espaços que essa edentação será baseada (alguns usam 4, 2 ou diferentes valores) de espaços, o encoding padrão (temos alguns clientes que usam configurações de exibição internacional, diferentes, e antes não era incomum ver erros de grafia de textos exibidos na tela do usuário) essas e outras configurações podem ser setadas tanto na configuração geral, como também na configuração do Workspace do Projeto.
Para isso, basta colocar dentro da pasta .vscode no projeto o arquivo settings.json onde a configuração de cada objeto pode ser obtida e colocada, ou se você utilizar a UI de configurações pode escolher a guia Workspace.
Lembre-se que todas as extensões também podem criar arquivos específicos nas configurações, e qualquer um deles, pode ser copiado para a pasta .vscode de projeto ou do workspace. O VSCODE vai abrir e priorizar as configurações do WorksPace sobre as do ambiente do usuário. Inclusive configurações de temas de cores e outras, então, você pode fazer todas as configurações, inclusive de snippets de projeto e salvar, e depois, os controladores podem simplesmente travar para leitura os arquivos da pasta, desse modo, nenhum usuário poderá alterar as configurações do projeto. Lembre-se, praticamente qualquer configuração pode ser feita desse modo, desde configurações do ambiente, até atalhos de teclado do editor e outras.
Embelezadores de Código (Prettiers) e Predileção de Código (linter)
Se você trabalha em uma equipe de desenvolvimento, já deve ter percebido que cada programador tem um “ESTILO PRÓPRIO DE PROGRAMAR” não só para resolver o problema, mais também, para digitar o código, e deixa-lo claro e legível não para os computadores, mais sim para outros membros da equipe, é quase um pesadelo, abrir um arquivo de código fonte, e perceber que a edentação está quebrada ou fora do padrão que foi adotado. Que dezenas de linhas vazias separam um bloco de código de outro, que quando a linguagem tem suporte a chaves / colchetes / parenteses e instruções multilinhas, e que simplesmente o programador utilizou uma estrutura própria, ou pior, algumas instruções a abertura da estrutura está com espaços, outras, sem espaços, outras deslocadas, e você abre a ferramenta de diff esperando uma mudança de poucas linhas, e o editor mostra que praticamente todo o arquivo foi mudado….
Por isso, o VS-CODE suporta diversos embelezadores de códigos, alguns deles usam e permitem que os programadores e equipes determinem quais regras devem ou não ser aplicadas, se ele é um formatador que pode agir automaticamente, ou se ele apresenta sugestões de melhoria. O que geralmente acontece quando as pessoas estão usando um Prettier é que elas percebem que realmente gastam muito tempo e energia mental formatando o código, e com a integração do editor, você pode simplesmente pressionar aquela tecla mágica e pronto, o código é formatado. Se você tiver um formatador padrão configurado, basta pressionar (Ctrl + Shift + I) ou (CMD + Shift + I se você usa o MAC) e a mágica da formatação inteligente simplesmente acontece.
Essa ferramenta aliada a um poderoso mecanismo de Inteligência Artificial para ajudar a predizer código, como identificar nomes de métodos, de classes, de variáveis, de funções conhecidas, entre mais de uma centena de outras, garantem melhor qualidade do código antes mesmo de tentar executa-lo pela primeira vez. Como o VS-CODE é independente de linguagem, vários linters diferentes e com regras e funções diferentes podem ser usados para se adequarem ao estilo da equipe.
O IntelliSense é uma ajuda de preenchimento de código que inclui inúmeras funcionalidades: Listar Membros, Informações do Parâmetro, Informações Rápidas e Completar de Palavra. Essas funcionalidades ajudam você a aprender mais sobre o código que está usando, a manter o acompanhamento dos parâmetros que está digitando e a adicionar chamadas a métodos e propriedades pressionando apenas algumas teclas.
Colorização de sintaxe, preenchimento de declaração e suporte Navegar até o código, estão presentes no Visual Studio Code. A sintaxe é automaticamente colorizada, e você pode usar algumas centenas de padrões para um melhor conforto visual. Por exemplo, os comentários no código são coloridos em verde, o código é em preto, os caminhos são em vermelho e as instruções são em azul, além de poder definir suas próprias parametrizações e o editor aplica automaticamente a qualquer linguagem que ele dá suporte. Além disso, quando você começar a inserir uma palavra-chave ou objeto de uma linguagem conhecida, o preenchimento de declaração exibe uma lista de possíveis declarações e objetos. O preenchimento de declaração pode ajudá-lo a escrever o código com mais rapidez e facilidade.
O LSP (protocolo de servidor de linguagem) é um protocolo comum, na forma de JSON RPC v 2.0, usado para fornecer recursos de serviço de linguagem a vários editores de código. Usando o protocolo, os desenvolvedores podem escrever um único servidor de linguagem para fornecer recursos de serviço de linguagem como IntelliSense, diagnóstico de erros, localizar todas as referências e assim por diante, a vários editores de código que dão suporte a LSP.
