Como criar seus próprios snippets no VS Code

Sempre que eu posso automatizar uma tarefa no meu dia a dia, eu tento tirar alguns minutos para tentar configurar, já que isso pode me poupar muito tempo – e eu sempre gosto de aprender algo novo nessa área (já utilizo muito o AutoHotkey).

Eu percebi que em alguns tutoriais do YouTube o desenvolvedor escreve apenas uma palavra, aperta TAB e já carrega o código necessário, mas nunca parei para tentar aprender sobre isso.

Como eu tenho criado vários endpoints no WordPress para integrar com meus apps em SvelteKit, percebi como seria bom se pudesse automatizar esse processo e escrever um código de API GET em segundos.

Pesquisando no Google, encontrei poucos vídeos a respeito dessa funcionalidade de criar snippets customizados no VS Code (também presente em outros IDEs, como o Sublime Text).

Mas encontrei esse vídeo do canal DevXplaining sobre como aumentar a produtividade no VS Code. Após conseguir criar um snippet para um código API GET que utilizo bastante, vou documentar o processo.

Crie um snippet customizado no VS Code

Clique em File > Preferences > Configure User Snippets e crie um novo arquivo com o nome que quiser, como sveltekit, php, meus-snippets, etc.

Acesse o site https://snippet-generator.app/ e cole na parte da esquerda o código que você deseja autocompletar.

Utilize os campos acima para dar um nome no “Description…”, por exemplo, “API GET” e um atalho no “Tab trigger…”, por exemplo, “api-get”.

Agora você só precisa copiar o código gerado na parte da direita na aba VS Code e colar no lugar do primeiro exemplo que vem já na tela de snippets que criamos anteriormente.

Pronto, agora é só utilizar o atalho cadastrado (no meu caso api-get), apertar TAB e o código já vai ser escrito na hora, o que economiza muito tempo mesmo! Vou começar a criar vários snippets a partir de agora! 😄

Utilize $$ para escapar variáveis

Caso o seu snippet seja em PHP, muitas vezes utilizamos o $, como no caso da variável $request da minha API GET.

Nesse caso, utilize $$request no snippet-generator para que quando o código for gerado na ativação do snippet, o $ não desapareça e o código fique correto.