Aprenda a criar seus snippets no VSCode facilmente

Como programadores, estamos sempre em busca de maneiras de aumentar nossa produtividade e tornar nosso fluxo de trabalho mais eficiente. O seu maior aliado na programação é o editor de código ou IDE e se você, assim como eu, usa o VS Code para programar, tenho certeza que essas dicas são valiosas e recomendo fortemente que você utilize caso seu objetivo é ter mais produtividade no dia a dia. Neste artigo, exploraremos como criar e usar seus próprios snippets personalizados no VS Code.

O que são snippets?

Quando você digita qualquer coisa no VS Code, ele possui uma inteligência que funciona como uma espécie de autocomplete. Além disso, você também pode instalar plugins que auxiliam o uso de bibliotecas específicas guiando a sua implementação.

Por exemplo, você já tentou digitar "log" no seu VS Code, em um arquivo JavaScript? Provavelmente, aparecerá sugestões como mostra a imagem abaixo:

Observe que apareceram duas sugestões de snippets (os snippets possuem um ícone de um quadrado), isso porque eu criei outro com o mesmo nome, mas pra você deve aparecer apenas um. Ao clicar, o VS Code completará o seu código, inserindo `console.log()`.

Snippets são pequenos trechos de código pré-definidos que podem ser inseridos rapidamente em seu editor de texto. Eles são uma forma de automação que economiza tempo e ajuda a evitar erros comuns.

Ao criar snippets personalizados, você pode transformar trechos de código que você digita repetidamente em atalhos simples e fáceis de usar.

Agora que você já sabe o que são, vamos entender melhor e criar seus próprios Snippets?

Para começar, abra o VS Code e pressione "Ctrl+Shift+P" (ou "Cmd+Shift+P" no macOS) para abrir a paleta de comandos. Digite "Configure User Snippets" e selecione a opção correspondente para abrir o gerenciador de snippets.

Ao clicar, irá abrir o gerenciador de snippets e você verá uma lista de linguagens suportadas e os snippets criados, caso você já tenha algum. Selecione a linguagem na qual deseja criar o snippet personalizado ou escolha "Global snippets" para criar um snippet que funcione em qualquer linguagem.

Após selecionar a linguagem você deve informar um nome para o arquivo do seu snippet, então você verá um arquivo vazio ou com algum exemplo de um snippet. Este é o arquivo onde você definirá seu snippet personalizado. Vamos criar um exemplo simples para entender como funciona.

{
"Print to Console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Prints a message to the console"
}
}

Neste exemplo, criamos um snippet chamado "Print to Console" que será acionado pelo prefixo "log". O corpo do snippet contém o código que será inserido quando o snippet for ativado. No corpo, usamos "$1" e "$2" para indicar onde o cursor será posicionado após a inserção do snippet, na ordem do número informado.

Após definir o corpo do snippet, salve o arquivo e seu novo snippet personalizado está pronto para ser usado. Abra um arquivo na linguagem selecionada, digite o prefixo definido ("log" no nosso exemplo) e pressione a tecla "Tab" para expandir o snippet. O código será inserido e o cursor será posicionado nos locais especificados no corpo do snippet.

Todo código gerado ao usar o snippet fica dentro da propriedade "body" que recebe um array de strings e cada item do array corresponde a uma linha no VS Code. Caso queira adicionar mais quebra de linhas, também pode utilizar o "\n" e em caso de representar o TAB, pode usar o "\t" para aplicar um espaçamento de tab, "\t\t" para dois espaçamentos e assim por diante.

Como adicionar variáveis no Snippet?

Você pode incluir variáveis adicionais em seu snippet usando a sintaxe "${N:V}", onde N é o número da variável e V é o nome da variável. Por exemplo, vamos criar um snippet para um loop "for" com uma variável de iteração:

{
"For Loop": {
"prefix": "for",
"body": [
"for (let ${1:i} = 0; ${1:i} < ${2:length}; ${1:i}++) {",
"\t$3",
"}"
],
"description": "Creates a for loop"
}
}

Neste exemplo, ao digitar "for" e pressionar "Tab", o snippet será expandido e você poderá preencher as variáveis "i", "length" e adicionar o código dentro do loop.

Observe que a variável "i" se repete e todas elas possuem o número 1. Isso permite que o cursor se posicione simultaneamente em todas elas para que todas sejam alteradas em um único comando.

Ao criar e usar snippets, você economiza tempo e aumenta sua produtividade como programador(a). Os snippets são muito poderosos e você pode consultar a documentação do VS Code para mais detalhes e opções avançadas. Através dos passos apresentados neste artigo, juntamente com a documentação do VS Code, você poderá criar seus próprios snippets personalizados e adaptá-los às suas necessidades específicas.

Até a próxima leitura!

Criado por Guido Cerqueira

Perguntas frequentes sobre criação de snippets no VSCode

1. O que são snippets no VSCode?

Snippets no VSCode são pequenos trechos de código pré-definidos que podem ser inseridos rapidamente enquanto se escreve código. Eles ajudam a economizar tempo e esforço, evitando a digitação repetitiva de código.

2. Posso criar snippets personalizados no VSCode?

Sim, o VSCode permite que você crie seus próprios snippets personalizados. Você pode definir atalhos para blocos de código, funções, estruturas de controle e muito mais.

3. Como configuro o VSCode para reconhecer meus snippets personalizados?

Para configurar o VSCode para reconhecer snippets personalizados, abra as preferências e selecione "User Snippets". Em seguida, selecione a linguagem de programação para a qual você deseja criar o snippet e defina seus próprios snippets no arquivo JSON fornecido.

4. Posso compartilhar meus snippets personalizados com outros desenvolvedores?

Sim, você pode compartilhar seus snippets personalizados com outros desenvolvedores. Basta compartilhar o arquivo JSON contendo seus snippets ou publicá-los em um repositório do GitHub para que outros possam baixá-los e usar em seus projetos.

5. Existem recursos online para encontrar snippets prontos para uso no VSCode?

Sim, existem vários recursos online onde você pode encontrar snippets prontos para uso no VSCode. Alguns exemplos incluem o marketplace do VSCode, comunidades de desenvolvedores e repositórios no GitHub.

6. Os snippets do VSCode funcionam em todas as linguagens de programação?

Sim, os snippets do VSCode podem ser usados em várias linguagens de programação suportadas pelo editor. Você pode criar snippets personalizados para JavaScript, Python, HTML, CSS e muitas outras linguagens.