Como criar e usar snippets no VSCode

Usar snippets tem sido uma parte crucial no meu uso do vscode pois dá maior agilidade na hora de escrever código. Para que escrever a estrutura básica de um componente na mão sempre que eu precisar criar um se eu posso simplesmente começar escrever componente e apertar Tab e ela aparece ali mágicamente?

O que são snippets?

Snippets são modelos de código reutilizáveis que você pode ativar digitando um atalho. Eles funcionam como mini templates que o VS Code insere automaticamente no seu arquivo, com variáveis editáveis e posicionamento do cursor inteligente.

Por que usar snippets?

• Menos repetição: você escreve menos código repetitivo manualmente.
• Menos erros: estruturas padronizadas ajudam a manter a consistência.
• Mais velocidade: basta digitar um atalho e pressionar Tab para gerar estruturas completas.
• Flexibilidade: você pode criar snippets personalizados para qualquer linguagem ou projeto.

Criando seu primeiro snippet

Vamos ver o passo a passo para criar um snippet no VS Code:

1. Acesse a configuração de snippets

Abra a paleta de comandos (Ctrl+Shift+P) e digite "snippets". A primeira opção que irá aparecer deve ser "Preferences: Configure User Snippets". Clique nela.

Você pode:

• Escolher um snippet global (New Global Snippets file)
• Criar para uma linguagem específica (por exemplo, JavaScript ou TypeScript)

2. Estrutura básica de um snippet

{
	"Nome do Snippet": {
		"prefix": "atalho",
		"body": [
			"linha 1 de código",
			"linha 2 de código",
			"linha ${1:editável}"
		],
		"scope": "javascript",
		"description": "Descrição do snippet"
	}
}

Preste bastante atenção aqui pois esses campos são importantes:

• prefix: o atalho que você irá usar para disparar o snippet;

• body: o corpo do snippet, ou seja, o texto que será inserido. - Se for apenas de uma linha, basta usar uma string. Já se for mais de uma linha, aí deve ser um array de strings; - Use para simbolizar uma parada de tabulação;

• scope: opcional. Delimita em quais linguagens o snippet será usado;

• description: opcional. Esse texto vai aparecer de legenda quando você começar a escrever o atalho.

3. Usando o snippet

Vamos usar esse snippet como exemplo:

{
	"Função em JS": {
		"prefix": "funcao",
		"body": [
			"function ${1:nome}(${2:args}) {",
				"	${3:// corpo da função}",
			"}"
		],
		"description": "Declaração de função padrão em JavaScript"
	}
}

Depois de salvar, basta digitar funcao em um arquivo .js ou .ts, pressionar Tab, e o VS Code vai expandir o trecho automaticamente. Os campos ${1}, ${2}, etc., são pontos de parada do cursor, e você pode navegar entre eles com Tab. Aqui foi usado ${1:valor} para adicionar sugestões editáveis.

Considerações finais

Criar snippets pode parecer trivial, mas no longo prazo eles economizam muito tempo e esforço. Se você trabalha em projetos com estruturas repetitivas — como componentes React, controllers, classes, testes — investir alguns minutos criando bons snippets vai fazer bastante diferença no longo prazo.

Experimente começar com os blocos que você mais repete e adicione novos conforme for sentindo necessidade."