Você sabe o que são os snippets de código do Visual Studio Code? Caso a sua resposta seja não, snippets de código são templates (modelos) de código que podemos usar para gerar trechos de códigos automaticamente. Geralmente, utilizamos este recurso para automatizar a digitação de padrões repetitivos de códigos, tais como laços de repetição e estruturas condicionais.
Já existem, no Visual Studio Code, alguns snippets padrões para algumas linguagens como Javascript e Typescript; além desses snippets padrões, podemos utilizar snippets específicos para uma determinada linguagem, ou até mesmo criar os nossos próprios snippets! Muito legal, não é mesmo?
Usando snippets
Podemos acessar os snippets do Visual Studio Code através do próprio intelisense da IDE (CTRL + espaço), independente de qual é a fonte daqueles snippets.
Para que esses snippets apareçam, basta começar a digitar o comando, e os snippets sugeridos para aquele texto aparecem:
Caso a IDE não forneça snippets para a linguagem (ou framework) que você está utilizando, você pode procurar por extensões com snippets de código na loja de extensões da IDE:
Criando seus próprios snippets
Para criar seus próprios snippets, você deve clicar na engrenagem no canto inferior esquerdo da tela e então selecionar a opção User Snippets. Isso abrirá a paleta de comandos da IDE, assim como na imagem abaixo:
Através da Command Pallete que foi aberta você pode selecionar onde quer criar o seu snippet personalizado. Você pode criar snippets globais para uma determinada linguagem (ou framework), ou criar snippets que existam apenas no seu projeto.
No exemplo abaixo, selecionei a opção de criar um arquivo de snippets próprio para o meu projeto. Depois de selecionar esta opção, é preciso decidir um nome para o arquivo de snippets. Dessa forma, é criada uma pasta chamada .vscode no seu projeto, onde este arquivo ficará.
Dentro desta pasta, o seu arquivo de snippets é inicializado automaticamente com alguns comentários contendo informações de como criar o snippet, assim como na imagem:
Os seus snippets de código sempre terão o mesmo padrão:
{
"Nome do Snippet": {
"scope" : "linguagem/linguagens/framework onde o seu snippet setá aplicado",
"prefix": ["palavras-chave pelas quais o snippet pode ser chamado"],
"body": ["Código que será gerado"],
"description": "Descrição do snippet."
}
}
Para a demonstração, resolvi criar dois snippets ilustrativos para a linguagem Javascript:
"Função X está executando": {
"scope": "javascript",
"prefix": "xExec",
"body": ["console.log('Executando a função $1')"],
"description": "Diz que uma determinada função está executando"
},
"For contagem":{
"scope": "javascript",
"prefix": "fCont",
"body": [
"console.log('Contagem de 0 a ' +$1)",
"for(let i = 0; i< $1 ; i++){",
"\\tconsole.log('i = '+i)",
"}",
"console.log('Fim da contagem')"
],
"description": "Diz que uma determinada função está executando"
}
O valor $1 que aparece acima representa um determinado valor que vamos definir depois do uso do snippet. Você pode ver no GIF abaixo onde é mostrada a utilização dos snippets que sempre haverá um cursor no ponto em que o $1 estava definido, para que você complete o código. No segundo snippet, teremos um cursor duplo, ou seja: um cursor em dois pontos diferentes do código; assim, podemos adicionar a mesma variável em múltiplos lugares de uma só vez.
Depois de salvar o arquivo com os seus snippets, eles já aparecerão no intelisense. Assim, é ai é só selecionar o snippet que você deseja e pronto!
Espero que você tenha gostado de conhecer esse recurso do Visual Studio Code,; afinal, ele é muito útil!
Bons estudos!!