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:

Uso de snippets padrão do Visual Studio code

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:

Busca no marketplace da IDE Visual Studio Cide com a palavra-chave snippets

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:

Abertura da command pallet do Visual Studio Code

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:

Criação de arquivo de snippets

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!

Utilização dos snippets personalizados

Espero que você tenha gostado de conhecer esse recurso do Visual Studio Code,; afinal, ele é muito útil!

Bons estudos!!